前言

隨著前端工程化的快速推進，在項目中使用ES6甚至更高的ES7等最近特性早已不是什麽新鮮事。之前還覺得既然瀏覽器支持有限，那了解一下能看懂就好，然而僅僅了解還是不夠的，現在放眼望去，那些成熟框架的代碼示例都已經開始使用ES6編寫了，昨天瞥了一眼vue的源碼，已經全部使用ES6編寫了。隨著開發的進行，發現僅僅了解一下已經不能應付一些日常開發了，因為一些新的特性看起來有點吃力了，所以決定重新學習一下日常開發中見得比較多的ES6特性，爭取與實際用例相結合，不僅要認識還要會用，以後多多用起來！當然本文中的ES6就是泛指哈，借用阮一峰老師的定義:

ES6 既是一個歷史名詞，也是一個泛指，含義是 5.1 版以後的 JavaScript 的下一代標準，涵蓋了 ES2015、ES2016、ES2017 等等，而 ES2015 則是正式名稱，特指該年發布的正式版本的語言標準。本書中提到 ES6 的地方，一般是指 ES2015 標準，但有時也是泛指“下一代 JavaScript 語言”。

擴展運算符

rest參數

在講擴展運算符之前得講一下rest參數，rest參數在我理解來看就是用‘...變量名‘的形式替代了函數參數中的arguments對象，大概用法如下：

function testFn (fist, ...rest) {
    console.log(fist);  //1
    console.log(rest);  //[2,3,4,5]
}
testFn(1,2,3,4,5);

當然如果在參數中只傳入rest參數的話它代表的就是將arguments對象轉為數組之後的一個數組，也就是一個包含了所有參數的數組：

function test2 (...rest) {
    console.log(rest);
}
test2(1,2,3);  // [1,2,3]
 

這個對於處理一些不知道參數數量的情況是很方便的，因為一般來說我們也要將argum對象轉為數組才方便處理的，下面就是兩種不同的寫法：

// arguments寫法
function add1(){
    var sum = 0;
    Array.prototype.slice.apply(arguments).forEach( function(item){
        sum += item;
    })
    console.log(sum)
}
add1(1,2,3); //6

// rest參數寫法
function add2(...valus) {
    let sum = 0;
    valus.forEach( value => {
        sum += value
    })
    console.log(sum)
}
add2(1,2,3);  //6
 

擴展運算符

講完了rest參數，再講擴展運算符就可以把它理解為rest參數的逆運算，將一個數組轉為用逗號分隔的參數序列：

console.log(...[1,2]);  //1,2
console.log(8, ...[1,2], 9);  //8,1,2,9

再將rest參數和擴展運算符結合起來就是這樣的：

function test3 (...rest) {
    console.log(rest)
}
var nums = [1,2,7];
test3(...nums);  // [1,2,7]

應用：

• 替代組中的apply方法

var arr4 = [1,2,3];
function test4 (a, b, c) {
    console.log(a)
}
// ES5寫法
test4.apply(null, arr4);
// ES6寫法
test4(...arr4);

• 合並數組

var arr1_ = [1];
var arr2_ = [2,3];
var arr3_ = [4,5];
// ES5
var arr4_ = arr1_.concat(arr2_, arr3_);
console.log(arr4_);  //[1, 2, 3, 4, 5]
// ES6
var arr5_ = [...arr1_, ...arr2_, ...arr3_]
console.log(arr5_);  //[1, 2, 3, 4, 5]

rest運算符和spread運算符的區別

對於三個點號，三點放在形參或者等號左邊為rest運算符; 放在實參或者等號右邊為spread運算符，或者說，放在被賦值一方為rest運算符，放在賦值一方為擴展運算符。

解構賦值

解構的作用是可以快速取得數組或對象當中的元素或屬性，而無需使用arr[x]或者obj[key]等傳統方式進行賦值

• 數組的解構賦值

  let [a, b, c] = [1, 2, 3];
  console.log(a);  //1

• 對象的解構賦值

  let { foo, bar } = { foo: "aaa", bar: "bbb" };
  console.log(foo);  //"aaa"

• 字符串的解構賦值

  const [a, b, c, d, e] = 'hello';
  a // "h"

• 數值和布爾值的解構賦值

• 函數參數的機構賦值

本文同步發表在我的個人博客：[https://wancheng7.github.io/post/59cf2dea.html)

參考文章

• 阮一峰 ES6標準入門
• 妙用ES6解構和擴展運算符讓你的代碼更優雅

ES6學習筆記（一）——擴展運算符和解構賦值