【Web全棧課程二】ES6特性介紹（上）

ES6特性介紹（上）

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

ES6新的標準，新的語法特徵：
一、變量/賦值
二、函數
三、數組/json
四、字符串
五、面向對象
六、Promise
七、generator
八、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的做用域解決
一、閉包的方式封一下（原生js是函數級做用域，用函數包了後做用域不會到外面去）

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

二、ES6方式，let塊級做用域

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

【賦值】

解構賦值（借鑑於Python），只有符合如下要求，解構賦值能夠靈活使用

1. 左右兩邊結構必須同樣
2. 定義和賦值必須同步完成

示例：

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

二、函數（相似Python）

【箭頭函數】

一、若是有且僅有1個參數，()能夠省略
二、若是函數體只有一句話，並且是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，接收剩餘參數，參數展開必須在參數列表的最後

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，展開一個數組

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

三、數組/json

【數組經常使用方法】

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=>{});

【json-可簡寫】

名字和值的變量名同樣，能夠省略值的變量名只寫名字; 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】
一、函數this
箭頭函數this：根據所在的環境肯定this，this是所在環境的this，this恆定
普通函數this：根據調用個人人肯定this，誰調用this是誰，this常常變化

二、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...