胡說八道es6

提及es6你們都很熟悉，有些es6新特性chrome等高級瀏覽器已經實現，不用咱們去編譯了。今天我簡單說下es6的一些特性，爲何寫呢？一方面自娛自樂，一方面是由於我有段時間不用就會忘，我給本身回回爐。說的不對，你們給我留言拍磚哈。

一、聲明變量有變化，再也不傻傻分不清

聲明變量有兩種方法，let和const。 let用來聲明變量，const用來聲明常量。

什麼是變量？變化的量。好比你的名字，公司地址。

什麼是常量？永遠不會變的東西。好比你的生日，固然你僞造的話那就不算。

平時咱們聲明var的變量能夠重複聲明，但let聲明的變量不能重複聲明，可是它們均可以重複賦值。

const聲明的常量即不能重複賦值也不能重複聲明。

二、做用域定義有變化，讓你隨手畫個圈

以前js的做用域是用function來定義的，一個function內是一個做用域。如今是經過{}來定義的， 一個花括號內是一個做用域。

//var聲明的i
var arr=[];
for (var i=0; i<10; i++){
    arr[i]=function(){
        console.log(i);
    }
}
arr[6]();//var聲明的i指向i的地址,因此是10

//var聲明的i若是要獲得6，須要用一個當即執行和閉包。把i給num，

//而後在function裏面console.log(num)便可，每個num都是一個新變量。
	var arr=[];
	for (var i=0; i<10; i++){
	    arr[i]=(function(num){
	         return function () {
            console.log(num);
        }
	    })(i);
	}
arr[6]();

//let聲明的i
var arr=[];
for (let i=0; i<10; i++){
//let聲明的i在這個花括號內是一直存在的，到下次循環的時候i=i+1
    arr[i]=function(){
        console.log(i);
    }
}
arr[6]();//6

複製代碼

三、解構賦值二合一，省時省力好簡潔

用人話來講就是左邊和右邊結構同樣。

第一能夠省一部分賦值代碼，讓代碼看起來簡潔。

let [a,b]=[1,2];
console.log(a); //1
console.log(b); //2

複製代碼

第二json簡潔，提取方便。若是key和value是一樣的命名，能夠縮寫。

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

複製代碼

四、有了字符串模板，遠離+++拼接

let str="真好啊";
console.log("今每天氣"+str+",心情也好！");
//如今能夠寫成
console.log(`今每天氣${str},心情也好! `);

複製代碼

五、函數增長新特性，箭頭函數省省省，rest參數略略略

函數裏面加了一個箭頭函數和rest參數

箭頭函數能夠極大的縮寫咱們的函數

若是參數只有一個，能夠省略function(); 若是有return 返回，能夠省略{return };

//一個參數和返回

//之前
let show=function(r){
    return r;
}

//如今
let show=r=>r;

//兩個參數和返回
let show=(a,b)=>{return a+b};
複製代碼

寫起來是否是看着更簡潔了，固然若是你不常寫的話，以個人經驗就是你不出一週就忘了怎麼寫了。

rest參數(...rest)顧名思義就是拿剩下的參數唄

function show(a,b,...arg){
    console.log(arg);
}
show(1,2,3,4,5);//[3,4,5]

複製代碼

並且rest參數還能夠幫咱們展開數組

let arr=[1,2,3];
console.log(...arr);
複製代碼

展開有什麼用呢？

var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];
// ES5 的合併數組
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6 的合併數組
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
複製代碼

能夠看到展開後能夠作合併和賦值。

六、數組有了新方法，遍篩累加很省勁兒。

map和forEach均可以遍歷數組，既然均可以遍歷數組，爲何要定義兩個方法呢？

其餘這兩個方法是有不一樣的地方的：

內部代碼在return的時候,forEach不會生成新數組。map會生成一個新數組。

foreEach要想改變數組須要在callback函數中去改。

//map改變數組
let arr=[1,3,5];
let curArr=arr.map(function(item,index){
    return item*2;
});
console.log(curArr);//[2,6,10]

//forEach改變數組
let arr=[1,3,5];
let curArr=arr.forEach(function(item,index){
    return arr[index]=item*2;
})
console.log(arr);//[2,6,10]
console.log(curArr);//undefined;
複製代碼

filter是過濾器的意思，能夠根據條件用來篩選數組中的元素。就比如流水線上的檢查員，篩選出合格的產品。

let arr=[1,2,6];
let curArr=arr.filter(function(item,index){
    return item%2;
})
console.log(curArr);
複製代碼

reduce是減小的意思，它能夠執行數組的累積運算而後返回一個數。就比如搭積木，多個積木最後搭成一個東西。

let arr=[1,2,6];
let sum=arr.reduce(function(prev,cur,index,arr){
//prev是前一步的操做和
//cur是當前值
//index是當前的索引
//arr是當前的數組
    return prev+cur;
})
console.log(sum);
複製代碼

七、對象繼承新形式，聲明繼承更簡單。

咱們先看下以前的對象聲明和繼承是怎麼作的。

//定義父類
function Animal(name,color){
    this.name=name;
    this.color=color;
}
Animal.prototype.showName=function(){
    console.log(this.name);
}
Animal.prototype.showColor=function(){
    console.log(this.color);
}
let obj1=new Animal('mimi','白色');
obj1.showName();//mimi
obj1.showColor();//白色 
//定義子類
function Cat(name,color,age){
    Animal.apply(this,arguments);
    this.age=age;
}
//繼承
Cat.prototype=new Animal();
Cat.prototype.constructor=Cat;
Cat.prototype.showAge=function(){
    console.log(this.age);
}
let obj2=new Cat('hh','紅色',3);
obj2.showName();
obj2.showColor();
obj2.showAge();
複製代碼

以前的繼承作法是經過原型鏈先指向父類的原型，而後把子類的構造函數指向定義的構造函數。

這樣原型鏈上就有了父類的方法，構造函數裏面也會有父類的構造函數。

這樣定義有個問題就是類和構造函數是一塊兒的，單把構造函數拿出來，也能作類也能作函數。

es6裏面更嚴謹了，聲明類有了專門的class,繼承有了extends

//父類聲明
class Animal{
   //構造函數聲明
    constructor(name,color){
        this.name=name;
        this.color=color;
    }
    //對象的方法聲明
    showName(){
        console.log(this.name);
    };
    showColor(){
        console.log(this.color);
    }
}
let obj1=new Animal('mimi','白色');
obj1.showName();//mimi
obj1.showColor();//白色

//子類使用extends繼承
class Cat extends Animal{
   
    constructor(name,color,age){
        //構造函數內繼承父類的構造函數
        super(name,color);//super在這裏表明了父類的構造函數
        this.age=age;
    }
    showAge(){
        console.log(this.age);
    }
}
let obj2=new Cat('haha','紅色',6);
obj2.showAge();//6
obj2.showName();//haha
obj2.showColor();//紅色
複製代碼

八、異步回調好麻煩，aysnc和await來幫忙

咱們常見的異步回調會操做地獄回調，讓你傻傻分不清，常常問本身，我代碼在哪裏呢？我邏輯走到哪裏去了？

$.ajax({url:'/data.txt'},function(){//第一步
   $.ajax({url:'/data2.txt'},function(){//第二步
     $.ajax({url:'/data3.txt'},function(){//第三步
        $.ajax({url:'/data4.txt'},function(){//第四步
          $.ajax({url:'/data5.txt'},function(){//第五步
    
           })
        })
     })
   }) 
})
複製代碼

若是咱們用async和await就能夠實現同步寫法實現異步回調的做用。

(async ()=>{
      let res=await $.ajax({
          url: '/data.txt'
       });
       //第一步
       console.log(res);
        let res2=await $.ajax({
          url: '/data2.txt'
       });
       //第二步
      console.log(res2);
      let res3=await $.ajax({
          url: '/data3.txt'
       });
       //第三步
      console.log(res3);
      let res4=await $.ajax({
          url: '/data4.txt'
       });
       //第四步
      console.log(res4);
      let res5=await $.ajax({
          url: '/data5.txt'
       });
       //第五步
      console.log(res5);
 })()
show();

複製代碼

固然如今有不少提到Promise，Promise鏈式調用，咱們來看下若是用Promise要怎麼用

let p1=new Promise(function(resolve,reject){
       $.ajax({
            url: 'data.txt',       
        })
        .done(function(data) {
           resolve(data);
        })
        .fail(function(err) {
           reject(err);
        }) 
   }) 
   p1.then(function(data){
   //成功
    console.log(data);
    return $.ajax({url: 'data2.txt'})//拋出Promise
   },function(err){
   //失敗
    console.log(err);
   })
   //第二個Promise的處理
   .then(function(data){
       console.log(data);
   },function(err){
       console.log(err);
   })
複製代碼

這裏由於用的是jquery3.0的ajax,返回的實際上是一個promise，你能夠打出來ajax的看下。

九、模塊導入新方法，import和export要配合

es6用export來暴露模塊的屬性和方法，用import來引入模塊。

a.js

let a=2;
let b=3;
export {a,b}
複製代碼

index.html

<script type="module">
 import {a,b} from './a.js';
 console.log(a);
 console.log(b);
 </script>
複製代碼

在頁面中引入模塊，type是必定要聲明的，目前在谷歌最新版本的瀏覽器中測試的時候，若是不聲明會報錯。

es6的這些新特性是否是很神奇，好了，今天咱們先說到這裏，工做中你們可使用，具體的原理，咱們後面講。