函數(shù)默認(rèn)值

特性 & 語(yǔ)法

// 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);
}

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

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

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

模板字符串

特性 & 語(yǔ)法

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

// Before.2
var type = 'multiline';
'This \nis \na \n' + type + '\nstring.'

// 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í)候我們還要寫上蹩腳的 \n 來(lái)?yè)Q行以得到一個(gè)多行的字符串（Before.2）民晒。

在字符串過長(zhǎng)的時(shí)候可能會(huì)使用 \ 在編輯器中書寫多行字符串來(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)單明了的多行字符串，還可以在字符串中通過 ${變量名} 的形式方便地插入一個(gè)變量磁滚，是不是方便多了佛吓！

解構(gòu)賦值

數(shù)組解構(gòu)

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í)可以通過留空的方式跳過數(shù)組中間的個(gè)別元素，但是在形參數(shù)組中必須留有相應(yīng)空位才可以繼續(xù)解構(gòu)之后的元素晒他，如果要跳過的元素處于數(shù)組末端吱型，則在形參數(shù)組中可以不予留空。

對(duì)象解構(gòu)

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

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

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

對(duì)象匹配解構(gòu)

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)后的變量名铝侵。

函數(shù)入?yún)⒔鈽?gòu)

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

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

函數(shù)入?yún)⒛J(rèn)值解構(gòu)

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)值撞鹉。

Let & Const

Let

無(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 變量還沒有被聲明，此時(shí) num 變量已經(jīng)完成聲明并分配了相應(yīng)內(nèi)存穴墅，只不過該變量目前的值為 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í)作用域中使用玄货，最常見的應(yīng)用大概就是 for(let i = 0, i < 10; i++) {}皇钞，相信許多小伙伴在面試題中見過。

禁止重復(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)憂隘世。(￣┰￣*)

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

Const

無(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í)候沒有附初始值顯然是不合理的纷捞，一個(gè)沒有任何值的常量是沒有意義的痢虹，浪費(fèi)內(nèi)存。

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

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

Number

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è)僖膊挥猛ㄟ^ NaN 不等于 NaN 才能確定一個(gè) NaN 就是 NaN 這種反人類的邏輯來(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ī)范多了。

String

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

1仔掸、inclueds() 方法用來(lái)判斷一個(gè)字符串中是否存在指定字符串
2脆贵、repeat() 方法用來(lái)重復(fù)一個(gè)字符串生成一個(gè)新的字符串
3、startsWith() 方法用來(lái)判斷一個(gè)字符串是否以指定字符串開頭起暮，可以傳入一個(gè)4卖氨、整數(shù)作為第二個(gè)參數(shù)，用來(lái)設(shè)置查找的起點(diǎn)负懦，默認(rèn)為 0筒捺，即從字符串第一位開始查找
5、endsWith() 與 startsWith() 方法相反

Array

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è)類數(shù)組對(duì)象轉(zhuǎn)換成一個(gè)真正的數(shù)組焙矛。還記得我們之前常寫的 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é)果捉蚤。
```
Object

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ì)象抬驴，不過需要注意的是這種合并是淺拷貝±虑桑可能看到這個(gè)方法我們還比較陌生布持，不過了解過 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 變得更好题暖，更方便開發(fā)者的使用。

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