ECMAScript 6學習筆記（一）：展開運算符

同步發佈於：http://mjzhang.cn/(轉載請說明此出處)。

JavaScript是ECMAScript的實現和擴展，ES6標準的制定也爲JavaScript加入了許多新特性。本文主要記錄展開運算符。

展開運算符（spread operator）容許一個表達式在某處展開。展開運算符在多個參數（用於函數調用）或多個元素（用於數組字面量）或者多個變量（用於解構賦值）的地方能夠使用。

展開運算符不能用在對象當中，由於目前展開運算符只能在可遍歷對象（iterables）可用。iterables的實現是依靠[Symbol.iterator]函數，而目前只有Array,Set,String內置[Symbol.iterator]方法，而Object還沒有內置該方法，所以沒法使用展開運算符。不過ES7草案當中已經加入了對象展開運算符特性。

函數調用中使用展開運算符

在之前咱們會使用apply方法來將一個數組展開成多個參數：

function test(a, b, c) { }
var args = [0, 1, 2];
test.apply(null, args);

如上，咱們把args數組看成實參傳遞給了a,b,c，這邊正是利用了Function.prototype.apply的特性。

不過有了ES6，咱們就能夠更加簡潔地來傳遞數組參數：

function test(a,b,c) { }
var args = [0,1,2];
test(...args);

咱們使用...展開運算符就能夠把args直接傳遞給test()函數。

數組字面量中使用展開運算符

''
在ES6的世界中，咱們能夠直接加一個數組直接合併到另一個數組當中：

var arr1=['a','b','c'];
var arr2=[...arr1,'d','e']; //['a','b','c','d','e']

展開運算符也能夠用在push函數中，能夠不用再用apply()函數來合併兩個數組：

var arr1=['a','b','c'];
var arr2=['d','e'];
arr1.push(...arr2); //['a','b','c','d','e']

用於解構賦值

解構賦值也是ES6中的一個特性，而這個展開運算符能夠用於部分情景：

let [arg1,arg2,...arg3] = [1, 2, 3, 4];
arg1 //1
arg2 //2
arg3 //['3','4']

展開運算符在解構賦值中的做用跟以前的做用看上去是相反的，將多個數組項組合成了一個新數組。

不過要注意，解構賦值中展開運算符只能用在最後：

let [arg1,...arg2,arg3] = [1, 2, 3, 4]; //報錯

類數組對象變成數組

展開運算符能夠將一個類數組對象變成一個真正的數組對象：

var list=document.getElementsByTagName('div');
var arr=[..list];

list是類數組對象，而咱們經過使用展開運算符使之變成了數組。

ES7草案中的對象展開運算符

ES7中的對象展開運算符符能夠讓咱們更快捷地操做對象：

let {x,y,...z}={x:1,y:2,a:3,b:4};
x; //1
y; //2
z; //{a:3,b:4}

如上，咱們能夠將一個對象當中的對象的一部分取出來成爲一個新對象賦值給展開運算符的參數。

同時，咱們也能夠像數組插入那樣將一個對象插入另一個對象當中：

let z={a:3,b:4};
let n={x:1,y:2,...z};
n; //{x:1,y:2,a:3,b:4}

另外還要不少用處，好比能夠合併兩個對象：

let a={x:1,y:2};
let b={z:3};
let ab={...a,...b};
ab //{x:1,y:2,z:3}

歡迎指正交流。