摘要：一共講解了個(gè)常用的新特性，講解過(guò)程也是由淺入深。最后一個(gè)新增的方法主要是為了彌補(bǔ)當(dāng)做構(gòu)造函數(shù)使用時(shí)產(chǎn)生的怪異結(jié)果。特性共享父級(jí)對(duì)象共享父級(jí)不能當(dāng)做構(gòu)造函數(shù)語(yǔ)法最簡(jiǎn)表達(dá)式前后對(duì)比很容易理解，可以明顯看出箭頭函數(shù)極大地減少了代碼量。

上周在公司組織了 ES6 新特性的分享會(huì)，主要講了工程化簡(jiǎn)介、ES6 的新特性與前端常用的幾種構(gòu)建工具的配合使用。ES6 這塊主要講了一些我們平時(shí)開(kāi)發(fā)中經(jīng)常會(huì)用到的新特性。在這里整理一下關(guān)于 ES6 的部分。

一共講解了 8 個(gè)常用的 ES6 新特性，講解過(guò)程也是由淺入深。廢話(huà)不多說(shuō)，下面進(jìn)入正文。

// Before
function decimal(num, fix) {
    fix = fix === void(0) ? 2 : fix;

    return +num.toFixed(fix);
}

// After
function decimal(num, fix = 2) {
    return +num.toFixed(fix);
}

　　首先，我們看一下之前我們是怎么寫(xiě)函數(shù)默認(rèn)值的：我們通常會(huì)使用三元運(yùn)算符來(lái)判斷入?yún)⑹欠裼兄?，然后決定是否使用默認(rèn)值運(yùn)行函數(shù)（如示例中 fix = fix === void(0) ? 2 : fix）

　　而在 ES6 中，我們可以直接在函數(shù)的顯示入?yún)⒅兄付ê瘮?shù)默認(rèn)值（function decimal(num, fix = 2){}），很明顯，這種寫(xiě)法更自然易懂，也更加方便，不過(guò)有一點(diǎn)需要注意：

設(shè)定了默認(rèn)值的入?yún)ⅲ瑧?yīng)該放在沒(méi)有設(shè)置默認(rèn)值的參數(shù)之后，也就是我們不應(yīng)該這樣寫(xiě)：function decimal(fix = 2, num){}，雖然通過(guò)變通手段也可以正常運(yùn)行，但不符合規(guī)范。

// Before
// Before.1
var type = "simple";
"This is a " + type + " string join."

// Before.2
var type = "multiline";
"This 
is 
a 
" + type + "
string."

// Before.3
var type = "pretty singleline";
"This 
is 
a 
" + type + "
string."
// OR
// Before.4
"This " +
"is" +
"a" +
type +
"string."

// After
var type = "singleline";
`This is a ${type} string.`

var type = "multiline";
`This
is
a
${type}
string.`

var type = "pretty singleline";
`This 
is 
a 
${type} 
string.`

　　我們之前在對(duì)字符串和變量進(jìn)行拼接的時(shí)候，通常都是反復(fù)一段一段使用引號(hào)包裹的字符串，再反復(fù)使用加號(hào)進(jìn)行拼接（Before.1）。多行字符串的時(shí)候我們還要寫(xiě)上蹩腳的 來(lái)?yè)Q行以得到一個(gè)多行的字符串（Before.2）。

　　在字符串過(guò)長(zhǎng)的時(shí)候可能會(huì)使用 在編輯器中書(shū)寫(xiě)多行字符串來(lái)表示單行字符串，用來(lái)方便較長(zhǎng)的字符串在編輯器中的閱讀（Before.3），或者簡(jiǎn)單粗暴的反復(fù)引號(hào)加號(hào)這樣多行拼接（Before.4）。

　　ES6 中我們可以使用反引號(hào)（`，位于 TAB 上方）來(lái)輸入一段簡(jiǎn)單明了的多行字符串，還可以在字符串中通過(guò) ${變量名} 的形式方便地插入一個(gè)變量，是不是方便多了！

var [a, ,b] = [1, 2, 3, 4, 5];
console.log(a); // => 1
console.log(b); // => 3

　　數(shù)組解構(gòu)，使用變量聲明關(guān)鍵字聲明一個(gè)形參數(shù)組（[a, , b]），等號(hào)后跟一個(gè)待解構(gòu)目標(biāo)數(shù)組（[1, 2, 3]），解構(gòu)時(shí)可以通過(guò)留空的方式跳過(guò)數(shù)組中間的個(gè)別元素，但是在形參數(shù)組中必須留有相應(yīng)空位才可以繼續(xù)解構(gòu)之后的元素，如果要跳過(guò)的元素處于數(shù)組末端，則在形參數(shù)組中可以不予留空。

var {b, c} = {a: 1, b: 2, c: 3};
console.log(b); // => 2
console.log(c); // => 3

　　對(duì)象解構(gòu)與數(shù)組解構(gòu)大體相同，不過(guò)需要注意一點(diǎn)

形參對(duì)象（{b, c}）的屬性或方法名必須與待解構(gòu)的目標(biāo)對(duì)象中的屬性或方法名完全相同才能解構(gòu)到對(duì)應(yīng)的屬性或方法

var example = function() {
    return {a: 1, b: 2, c: 3};
}
var {a: d, b: e, c: f} = example();
console.log(d, e, f); // => 1, 2, 3

　　對(duì)象匹配解構(gòu)是對(duì)象解構(gòu)的一種延伸用法，我們可以在形參對(duì)象中使用:來(lái)更改解構(gòu)后的變量名。

function example({param: value}) {
    return value;
}
console.log(example({param: 5})); // => 5

　　函數(shù)的入?yún)⒔鈽?gòu)也是對(duì)象解構(gòu)的一種延伸用法，我們可以通過(guò)改寫(xiě)入?yún)?duì)象目標(biāo)值為變量名的方式，在函數(shù)內(nèi)部直接獲取到入?yún)?duì)象中某個(gè)屬性或方法的值。

function example({x, y, z = 0}) {
    return x + y + z;
}
console.log(example({x: 1, y: 2}));       // => 3
console.log(example({x: 1, y: 2, z: 3})); // => 6

　　這是入?yún)⒔鈽?gòu)的另一種用法，我們可以在入?yún)?duì)象的形參屬性或方法中使用等號(hào)的方式給入?yún)?duì)象的某些屬性或方法設(shè)定默認(rèn)值。

無(wú)變量提升

// Before
console.log(num); // => undefined
var num = 1;

// After
console.log(num); // => ReferenceError
let num = 1;

　　使用 var 聲明的變量會(huì)自動(dòng)提升到當(dāng)前作用域的頂部，如果聲明位置與作用域頂部之間有另一個(gè)同名變量，很容易引起難以預(yù)知的錯(cuò)誤。使用 let 聲明的變量則不會(huì)進(jìn)行變成提升，規(guī)避了這個(gè)隱患。

注意：var 聲明的變量提升后雖然在聲明語(yǔ)句之前輸出為 undefined，但這并不代表 num 變量還沒(méi)有被聲明，此時(shí) num 變量已經(jīng)完成聲明并分配了相應(yīng)內(nèi)存，只不過(guò)該變量目前的值為 undefined，并不是我們聲明語(yǔ)句中賦的初始值 1。

有塊級(jí)作用域

// Before
{
    var num = 1;

    console.log(num); // => 1
}
console.log(num);     // => 1

// After
{
    let num = 1;
    
    console.log(num); // => 1
}
console.log(num);     // => ReferenceError

　　let 聲明的變量只能在當(dāng)前塊級(jí)作用域中使用，最常見(jiàn)的應(yīng)用大概就是 for(let i = 0, i < 10; i++) {}，相信許多小伙伴在面試題中見(jiàn)過(guò)，哈哈。

禁止重復(fù)聲明

// Before
var dev = true;
var dev = false;

console.log(dev); // => false

// After
let dev = true;
let dev = false; // => SyntaxError

　　var 聲明的變量可以重復(fù)聲明，而且不會(huì)有任何警告或者提示，就這樣悄悄的覆蓋了一個(gè)值，隱患如變量提升一樣讓人擔(dān)憂(yōu)。(￣┰￣*)

　　而 let 聲明的變量如果進(jìn)行重復(fù)聲明，則會(huì)直接拋出一個(gè)語(yǔ)法錯(cuò)誤（是的，就是直接明確地告訴你：你犯了一個(gè)相當(dāng)?shù)图?jí)的語(yǔ)法錯(cuò)誤哦）

無(wú)變量提升

有塊級(jí)作用域

禁止重復(fù)聲明

前 3 點(diǎn)跟 let 一個(gè)套路，就不多說(shuō)了

禁止重復(fù)賦值

const DEV = true;
DEV = false; // => TypeError

　　基于靜態(tài)常量的定義我們可以很明顯知道，const 聲明的常量一經(jīng)聲明便不能再更改其值，無(wú)需多說(shuō)。

必須附初始值

const DEV; // => SyntaxError

　　也是基于定義，const 聲明的常量既然一經(jīng)聲明便不能再更改其值，那聲明的時(shí)候沒(méi)有附初始值顯然是不合理的，一個(gè)沒(méi)有任何值的常量是沒(méi)有意義的，浪費(fèi)內(nèi)存。

　　ES6 新增了許多（相當(dāng)多）的庫(kù)函數(shù)，這里只介紹一些比較常用的。

題外話(huà)：多了解一下內(nèi)建函數(shù)與方法有時(shí)候可以很方便高效地解決問(wèn)題。有時(shí)候絞盡腦汁寫(xiě)好的一個(gè)算法，沒(méi)準(zhǔn)已經(jīng)有內(nèi)建函數(shù)實(shí)現(xiàn)了！而且內(nèi)建函數(shù)經(jīng)過(guò)四海八荒眾神的考驗(yàn)，性能一定不錯(cuò)，哈哈。

Number.EPSILON
Number.isInteger(Infinity); // => false
Number.isNaN("NaN");        // => false

　　首先是 ? 這個(gè)常量屬性，表示小數(shù)的極小值，主要用來(lái)判斷浮點(diǎn)數(shù)計(jì)算是否精確，如果計(jì)算誤差小于該閾值，則可以認(rèn)為計(jì)算結(jié)果是正確的。

　　然后是 isInteger() 這個(gè)方法用來(lái)判斷一個(gè)數(shù)是否為整數(shù)，返回布爾值。

　　最后是 isNaN() 用來(lái)判斷入?yún)⑹欠駷?NaN。是的，我們?cè)僖膊挥猛ㄟ^(guò) NaN 不等于 NaN 才能確定一個(gè) NaN 就是 NaN 這種反人類(lèi)的邏輯來(lái)判斷一個(gè) NaN 值了！

if(NaN !== NaN) {
    console.log("Yes! This is actually the NaN!");
}

　　另外還有兩個(gè)小改動(dòng)：兩個(gè)全局函數(shù) parseInt() 與 parseFloat() 被移植到 Number 中，入?yún)⒎磪⒈３植蛔儭＿@樣所有數(shù)字處理相關(guān)的都在 Number 對(duì)象上嘞！規(guī)范多了。

"abcde".includes("cd"); // => true
"abc".repeat(3);        // => "abcabcabc"
"abc".startsWith("a");  // => true
"abc".endsWith("c");    // => true

inclueds() 方法用來(lái)判斷一個(gè)字符串中是否存在指定字符串

repeat() 方法用來(lái)重復(fù)一個(gè)字符串生成一個(gè)新的字符串

startsWith() 方法用來(lái)判斷一個(gè)字符串是否以指定字符串開(kāi)頭，可以傳入一個(gè)整數(shù)作為第二個(gè)參數(shù)，用來(lái)設(shè)置查找的起點(diǎn)，默認(rèn)為 0，即從字符串第一位開(kāi)始查找

endsWith() 與 startsWith() 方法相反

Array.from(document.querySelectorAll("*")); // => returns a real array.
[0, 0, 0].fill(7, 1); // => [0, 7, 7]
[1, 2, 3].findIndex(function(x) {
    return x === 2;
}); // => 1
["a", "b", "c"].entries(); // => Iterator [0: "a"], [1: "b"], [2: "c"]
["a", "b", "c"].keys();    // => Iterator 0, 1, 2
["a", "b", "c"].values();  // => Iterator "a", "b", "c"
// Before
new Array();        // => []
new Array(4);       // => [,,,]
new Array(4, 5, 6); // => [4, 5, 6]
// After
Array.of();         // => []
Array.of(4);        // => [4]
Array.of(4, 5, 6);  // => [4, 5, 6]

　　首先是 from() 方法，該方法可以將一個(gè)類(lèi)數(shù)組對(duì)象轉(zhuǎn)換成一個(gè)真正的數(shù)組。還記得我們之前常寫(xiě)的 Array.prototype.slice.call(arguments) 嗎？現(xiàn)在可以跟他說(shuō)拜拜了~

　　之后的 fill() 方法，用來(lái)填充一個(gè)數(shù)組，第一個(gè)參數(shù)為將要被填充到數(shù)組中的值，可選第二個(gè)參數(shù)為填充起始索引（默認(rèn)為 0），可選第三參數(shù)為填充終止索引（默認(rèn)填充到數(shù)組末端）。

　　findIndex() 用來(lái)查找指定元素的索引值，入?yún)楹瘮?shù)，函數(shù)形參跟 map() 方法一致，不多說(shuō)。最終輸出符合該條件的元素的索引值。

　　entries()、keys()、values() 三個(gè)方法各自返回對(duì)應(yīng)鍵值對(duì)、鍵、值的遍歷器，可供循環(huán)結(jié)構(gòu)使用。

　　最后一個(gè)新增的 of() 方法主要是為了彌補(bǔ) Array 當(dāng)做構(gòu)造函數(shù)使用時(shí)產(chǎn)生的怪異結(jié)果。

let target = {
    a: 1,
    b: 3
};
let source = {
    b: 2,
    c: 3
};

Object.assign(target, source); // => { a: 1, b: 2, c: 3}

　　assign() 方法用于合并兩個(gè)對(duì)象，不過(guò)需要注意的是這種合并是淺拷貝?？赡芸吹竭@個(gè)方法我們還比較陌生，不過(guò)了解過(guò) jQuery 源碼的應(yīng)該知道 $.extend() 這個(gè)方法，例如在下面這個(gè)粗糙的 $.ajax() 模型中的應(yīng)用：

$.ajax = function(opts) {
    var defaultOpts = {
        method: "GET",
        async: true,
        //...
    };
    opts = $.extend(defaultOpts, opts);
}

　　從這我們可以看到 TC39 也是在慢慢吸收百家所長(zhǎng)，努力讓 JavaScript 變得更好，更方便開(kāi)發(fā)者的使用。

Object 新增的特性當(dāng)然不止這一個(gè) assign() 方法，一共增加了十多個(gè)新特性，特別是對(duì)屬性或方法名字面量定義的增強(qiáng)方面，很值得一看，感興趣的自行查找資料進(jìn)行了解哈，印象會(huì)更深刻！

　　Math 對(duì)象上同樣增加了許多新特性，大部分都是數(shù)學(xué)計(jì)算方法，這里只介紹兩個(gè)常用的

Math.sign(5);     // => +1
Math.sign(0);     // => 0
Math.sign(-5);    // => -1

Math.trunc(4.1);  // => 4
Math.trunc(-4.1); // => -4

　　sign() 方法用來(lái)判斷一個(gè)函數(shù)的正負(fù)，使用與對(duì)應(yīng)返回值如上。

　　trunc() 用來(lái)取數(shù)值的整數(shù)部分，我們之前可能經(jīng)常使用 floor() 方法進(jìn)行取整操作，不過(guò)這個(gè)方法有一個(gè)問(wèn)題就是：它本身是向下取整，當(dāng)被取整值為正數(shù)的時(shí)候計(jì)算結(jié)果完全 OK，但是當(dāng)被取整值為負(fù)數(shù)的時(shí)候：

Math.floor(-4.1); // => -5

插播一個(gè)小 Tip：使用位操作符也可以很方便的進(jìn)行取整操作，例如：~~3.14 or 3.14 | 0，也許這更加方便 : )

　　箭頭函數(shù)無(wú)疑是 ES6 中一個(gè)相當(dāng)重要的新特性。

共享父級(jí) this 對(duì)象

共享父級(jí) arguments

不能當(dāng)做構(gòu)造函數(shù)

最簡(jiǎn)表達(dá)式

var arr = [1, 2, 3, 4, 5, 6];

// Before
arr.filter(function(v) {
    return v > 3;
});
// After
arr.filter(v => v > 3); // => [4, 5, 6]

　　前后對(duì)比很容易理解，可以明顯看出箭頭函數(shù)極大地減少了代碼量。

完整語(yǔ)法

var arr = [1, 2, 3, 4, 5, 6];

arr.map((v, k, thisArr) => {
    return thisArr.reverse()[k] * v;
})  // => [6, 10, 12, 12, 10, 6]

　　一個(gè)簡(jiǎn)單的首尾相乘的算法，對(duì)比最簡(jiǎn)表達(dá)式我們可以發(fā)現(xiàn)，函數(shù)的前邊都省略了 function 關(guān)鍵字，但是多個(gè)入?yún)r(shí)需用括號(hào)包裹入?yún)?，單個(gè)入?yún)⑹菚r(shí)可省略括號(hào)，入?yún)?xiě)法保持一致。后面使用胖箭頭 => 連接函數(shù)名與函數(shù)體，函數(shù)體的寫(xiě)法保持不變。

函數(shù)上下文 this

// Before
var obj = {
    arr: [1, 2, 3, 4, 5, 6],
    getMaxPow2: function() {
        var that = this,
            getMax = function() {
                return Math.max.apply({}, that.arr);
            };
        
        return Math.pow(getMax(), 2);
    }
}
// After
var obj = {
    arr: [1, 2, 3, 4, 5, 6],
    getMaxPow2: function() {
        var getMax = () => {
            return Math.max.apply({}, this.arr);
        }

        return Math.pow(getMax(), 2);
    }
}

　　注意看中第 5 行 var that = this 這里聲明的一個(gè)臨時(shí)變量 that。在對(duì)象或者原型鏈中，我們以前經(jīng)常會(huì)寫(xiě)這樣一個(gè)臨時(shí)變量，或 that 或 _this，諸如此類(lèi)，以達(dá)到在一個(gè)函數(shù)內(nèi)部訪(fǎng)問(wèn)到父級(jí)或者祖先級(jí) this 對(duì)象的目的。

　　如今在箭頭函數(shù)中，函數(shù)體內(nèi)部沒(méi)有自己的 this，默認(rèn)在其內(nèi)部調(diào)用 this 的時(shí)候，會(huì)自動(dòng)查找其父級(jí)上下文的 this 對(duì)象（如果父級(jí)同樣是箭頭函數(shù)，則會(huì)按照作用域鏈繼續(xù)向上查找），這無(wú)疑方便了許多，我們無(wú)需在多余地聲明一個(gè)臨時(shí)變量來(lái)做這件事了。

　　注意：

某些情況下我們可能需要函數(shù)有自己的 this，例如 DOM 事件綁定時(shí)事件回調(diào)函數(shù)中，我們往往需要使用 this 來(lái)操作當(dāng)前的 DOM，這時(shí)候就需要使用傳統(tǒng)匿名函數(shù)而非箭頭函數(shù)。

在嚴(yán)格模式下，如果箭頭函數(shù)的上層函數(shù)均為箭頭函數(shù)，那么 this 對(duì)象將不可用。

另，由于箭頭函數(shù)沒(méi)有自己的 this 對(duì)象，所以箭頭函數(shù)不能當(dāng)做構(gòu)造函數(shù)。

父級(jí)函數(shù) arguments

　　我們知道在函數(shù)體中有 arguments 這樣一個(gè)偽數(shù)組對(duì)象，該對(duì)象中包含該函數(shù)所有的入?yún)ⅲ@示入?yún)?+ 隱式入?yún)ⅲ?，?dāng)函數(shù)體中有另外一個(gè)函數(shù)，并且該函數(shù)為箭頭函數(shù)時(shí)，該箭頭函數(shù)的函數(shù)體中可以直接訪(fǎng)問(wèn)父級(jí)函數(shù)的 arguments 對(duì)象。

function getSum() {
    var example = () => {
        return Array
            .prototype
            .reduce
            .call(arguments, (pre, cur) => pre + cur);
    }

    return example();
}
getSum(1, 2, 3); // => 6

由于箭頭函數(shù)本身沒(méi)有 arguments 對(duì)象，所以如果他的上層函數(shù)都是箭頭函數(shù)的話(huà)，那么 arguments 對(duì)象將不可用。

　　最后再鞏固一下箭頭函數(shù)的語(yǔ)法：

當(dāng)箭頭函數(shù)入?yún)⒅挥幸粋€(gè)時(shí)可以省略入?yún)⒗ㄌ?hào)；

當(dāng)入?yún)⒍嘤嘁粋€(gè)或沒(méi)有入?yún)?/strong>時(shí)必須寫(xiě)括號(hào)；

/* 類(lèi)不會(huì)被提升 */
let puppy = new Animal("puppy"); // => ReferenceError

class Animal {
    constructor(name) {
        this.name = name;
    }

    sleep() {
        console.log(`The ${this.name} is sleeping...`);
    }

    static type() {
        console.log("This is an Animal class.");
    }
}

let puppy = new Animal("puppy");

puppy.sleep();    // => The puppy is sleeping...

/* 實(shí)例化后無(wú)法訪(fǎng)問(wèn)靜態(tài)方法 */
puppy.type();     // => TypeError

Animal.type();    // => This is an Animal class.

/* 實(shí)例化前無(wú)法訪(fǎng)問(wèn)動(dòng)態(tài)方法 */
Animal.sleep();   // => TypeError

/* 類(lèi)不能重復(fù)定義 */
class Animal() {} // => SyntaxError

雖然類(lèi)的定義中并未要求類(lèi)名的大小寫(xiě)，但鑒于代碼規(guī)范，推薦類(lèi)名的首字母大寫(xiě)。

function Animal(name) {
    this.name = name;
}

Animal.prototype = {
    sleep: function(){
        console.log("The " + this.name + "is sleeping...");
    }
};

Animal.type = function() {
    console.log("This is an Animal class.");
}

class 關(guān)鍵字真真讓這一切變得清晰易懂了~

class Programmer extends Animal {
    constructor(name) {
        /* 在 super 方法之前 this 不可用 */
        console.log(this); // => ReferenceError
        super(name);
        console.log(this); // Right!
    }
    
    program() {
        console.log("I"m coding...");
    }

    sleep() {
        console.log("Save all files.");
        console.log("Get into bed.");
        super.sleep();
    }
}

let coder = new Programmer("coder");
coder.program(); // => I"m coding...
coder.sleep();   // => Save all files. => Get into bed. => The coder is sleeping.

function Programmer(name) {
    Animal.call(this, name);
}

Programmer.prototype = Object.create(Animal.prototype, {
    program: {
        value: function() {
            console.log("I"m coding...");
        }
    },
    sleep: {
        value: function() {
            console.log("Save all files.");
            console.log("Get into bed.");
            Animal.prototype.sleep.apply(this, arguments);
        }
    }
});

Programmer.prototype.constructor = Programmer;

啊哈，終于寫(xiě)到最后一部分了。

OMG，這段話(huà)寫(xiě)的好燃 orz

為方便描述，下文中導(dǎo)出對(duì)象指一切可導(dǎo)出的內(nèi)容（變量、函數(shù)、對(duì)象、類(lèi)等），勿與對(duì)象（Object）混淆。
導(dǎo)入對(duì)象同理。

export const DEV = true;
export function example() {
    //...
}
export class expClass {
    //...
}
export let obj = {
    DEV,
    example,
    expClass,
    //...
}

// module example.js
const DEV = true;
function example() {
    //...
}
class expClass {
    //...
}
let obj = {
    DEV,
    example,
    expClass,
    //...
}
// module example.js
export {DEV, example, expClass, obj};
export {DEV, example as exp, expClass, obj};

export default {DEV, example as exp, expClass, obj};
// OR
export default obj;
// OR
export default const DEV = true;

import example from "./example.js";
// OR 
import default as example from "./example.js";

import {DEV, example} from "./example.js";
import * as exp from "./example.js";
import {default as expMod, * as expAll, DEV, example as exp} from "./example.js";

import {DEV, example, expClass as EC} from "./example.js";

if(DEV) {
    let exp = new EC();
    // anything you want...
    example();
}

文中部分專(zhuān)業(yè)名詞由于未找到合適譯文，最后自行翻譯，如有不妥，歡迎指正。