摘要：原因中，定義的變量沒有塊級作用域，在第一個中循環后已經是，里面的執行的時候彈出的就是。

ECMAScript（簡稱ECMA、ES），ES6也被稱為ECMAScript 2015
JavaScript是ECMAScript的一種，但是目前實現ECMAScript標準的僅JavaScript

ES6新的標準，新的語法特征：
1、變量/賦值
2、函數
3、數組/json
4、字符串
5、面向對象
6、Promise
7、generator
8、ES7:async/await

var：可以重復定義、不能限制修改（問題越早發現代價越小，因此其實嚴謹的語法更利于開發大項目）、沒有塊級作用域（函數作用域）

let： 不能重復定義、變量、塊級作用域

const： 不能重復定義、常量、塊級作用域

示例1，如下代碼得到彈出的值始終是3，大家可以想下原因。

window.onload=function(){
    let aBtn = document.getElementsByTagName("input");
    for (var i=0; i< aBtn.length; i++) {
        aBtn[i].onclick=function(){
            alert(i);
        }
    }
}

原因：es5中，var定義的變量沒有塊級作用域，i在第一個function中循環后已經是3，里面的function執行的時候彈出的就是3。
此時解決方案有2種，都是通過改變變量i的作用域解決
1、閉包的方式封一下（原生js是函數級作用域，用函數包了后作用域不會到外面去）

for (var i=0; i< aBtn.length; i++) {
    (function(i) {
        aBtn[i].onclick=function(){
            alert(i);
        }
    })(i);
}

2、ES6方式，let塊級作用域

for (let i=0; i< aBtn.length; i++) {

解構賦值（借鑒于Python），只有符合以下要求，解構賦值可以靈活使用

左右兩邊結構必須一樣

定義和賦值必須同步完成

示例：

let arr=[12,5,8];
// let [a,b,c]=arr; // a=12,b=5,c=8
let {a,b,c}={a:12,b:3,c:6};
let [m,n,k]=[12,{a: {n1:5,n2:8},b:12,c:8},55];
alert(`${a},${b},${c}`); // a=12,b=3,c=6
console(m,n,k); // m=12,n={a: {n1:5,n2:8},b:12,c:8},c=55

1、如果有且僅有1個參數，()可以省略
2、如果函數體只有一句話，而且是return，{}也可以省
關于this，箭頭函數會改變this（后面提及）

let show = function(a,b){return a+b;};
let show = ((a,b)=>a+b);
let show = (a=>a*3);

傳統函數實現默認參數：

function show(a,b,c) {
    b=b||5;
    c=c||12;
    alert(`${a},${b},${c}`);
}
show(13);//值是13,5,12
show(13,24,15);//值是13,24,15

ES6實現默認參數：

function show(a,b=5,c=12) {
    alert(`${a},${b},${c}`);//值是13,5,12
}

1、“...”作用1，接收剩余參數，參數展開必須在參數列表的最后

function show(a,b, ...args){
    console.log(a,b,args);
}
show(18,5,14,27,44,12);//函數中a=18,b=5,args=[14,27,44,12]

2、“...”作用2，展開一個數組

let arr=[5,14,27,44];
let arr1=[18,...arr,12];
alert(arr1);//顯示18,5,14,27,44,12
//等價于...arr=>5,14,27,44

1）map，映射，通常用于對一個列表進行操作后返回新的列表，示例：

let arr=[59,84,27,46,97];
let arr2=arr.map(item=>{
    return item>=60;
});
alert(arr2);//arr2=[false,true,false,false,true]

2）filter，列表過濾，過濾出返回值true的列表，示例：

let arr=[59,84,27,46,97];
let arr2=arr.filter((item,index)=>{
    return item%2;
});
alert(arr2);//arr2=[59,27,97]

3）forEach 遍歷數組

4）reduce 通常用于匯總，返回一個值（reduce有tmp參數）

let arr=[59,84,27,46,97];
//使用reduce計算總和
let sum=arr.reduce((tmp,item,index)=>{//reduce有tmp參數
    return tmp+item;
});

5）偽數組使用數組的方法（類數組直接使用數組方法會報錯），使用Array.from()轉換

Array.from(array-like).forEach(item=>{});

名字和值的變量名一樣，可以省略值的變量名只寫名字; function可以不寫

let a=5;
let obj={a,b:7,
    // show: function(){alert(this.a+","+this.b)}//傳統寫法
    show(){alert(this.a+","+this.b);}//ES6
}
obj.show();//

模板字符串
1)字符串拼接，插入變量

let person={name:"李明",age:17};
alert("我叫"+person.name+"，我今年"+person.age+"歲");//傳統方式
alert(`我叫${person.name}，我今年${person.age}歲`);//ES6模板字符串

2）模板字符串的內容書寫時可以換行

新增常用方法：startsWith、endsWith

1）es5實現一個對象
傳統方式，function實現對象，使用prototype追加方法和繼承
缺點：大項目中每個開發者的實現不一致，原生沒有對象概念，有性能問題

//傳統方式實現對象，通過函數表達函數，prototype添加方法
function Person(name,age){
    this.name=name;
    this.age=age;
}
Person.prototype.showName=function(){
    alert("我叫"+this.name);
}
Person.prototype.showAge=function(){
    alert("我"+this.age+"歲");
}
// 繼承
function Worker(name,age,job){
    Person.call(this,name,age);
    this.job=job;
}
Worker.prototype=new Person();
Worker.prototype.constructor=Worker;//非官方繼承會改變constructor指向，需要手動修復
Worker.prototype.showJob=function(){
    alert("我的工作是："+this.job);
}
let w=new Worker("小葉子",18,"學生");// 調用
w.showName();
w.showAge();
w.showJob();

2）es6的class實現一個對象
ES6的類和其它面向對象的語言更為類似（大部分屬性類似Python）

class Person{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    showName(){
        alert("我叫"+this.name);
    }
    showAge(){
        alert("我"+this.age+"歲");
    }
}
class Worker extends Person{
    constructor(name,age,job){
        super(name,age); //super-超類（父類）
        this.job=job;
    }
    showJob(){
        alert("我的工作是："+this.job);
    }
}
let w=new Worker("小葉子",18,"學生");
w.showName();
w.showAge();
w.showJob();

【函數this/bind】
1、函數this
箭頭函數this：根據所在的環境確定this，this是所在環境的this，this恒定
普通函數this：根據調用我的人確定this，誰調用this是誰，this經常變化

2、bind是function中的方法，類似call和apply，為方法綁定this
call和apply直接調用方法，bind先綁定方法的this，不執行

let p=new Person("小葉子",18);
// document.onclick=p.showName;//點擊的時候提示“我叫undefined”，this指向[object HTMLDocument]
document.onclick=p.showName.bind(p);//點擊的時候提示“我叫小葉子”，this指向p對象

【Web全棧課程三】ES6特性介紹（下）》見：https://segmentfault.com/a/11...