說起es6大家都很熟悉，有些es6新特性chrome等高階瀏覽器已經實現，不用我們去編譯了。今天我簡單說下es6的一些特性，為什麼寫呢？一方面自娛自樂，一方面是因為我有段時間不用就會忘，我給自己回回爐。說的不對，大家給我留言拍磚哈。
1、宣告變數有變化，不再傻傻分不清
宣告變數有兩種方法，let和const。 let用來宣告變數，const用來宣告常量。
什麼是變數？變化的量。比如你的名字，公司地址。
什麼是常量？永遠不會變的東西。比如你的生日，當然你偽造的話那就不算。
平時我們宣告var的變數可以重複宣告，但let宣告的變數不能重複宣告，但是它們都可以重複賦值。
const宣告的常量即不能重複賦值也不能重複宣告。
2、作用域定義有變化，讓你隨手畫個圈
之前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
複製程式碼3、解構賦值二合一，省時省力好簡潔
用人話來說就是左邊和右邊結構一樣。
第一可以省一部分賦值程式碼，讓程式碼看起來簡潔。
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;
複製程式碼4、有了字串模板，遠離+++拼接
let str="真好啊";
console.log("今天天氣"+str+",心情也好！");
//現在可以寫成
console.log(`今天天氣${str},心情也好! `);
複製程式碼5、函式增加新特性，箭頭函式省省省，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' ]
複製程式碼可以看到展開後可以做合併和賦值。
6、陣列有了新方法，遍篩累加很省勁兒。
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);
複製程式碼7、物件繼承新形式，宣告繼承更簡單。
我們先看下之前的物件宣告和繼承是怎麼做的。
//定義父類
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();//紅色
複製程式碼8、非同步回撥好麻煩，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的看下。
9、模組匯入新方法，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的這些新特性是不是很神奇，好了，今天我們先說到這裡，工作中大家可以使用，具體的原理，我們後面講。