Javascript 是 ECMAScript 的實現(xiàn)和擴展,ES6標準的制定也為Javascript 加入了許多新特性,本文主要記錄展開運算符。
展開運算符允許一個表達式在某處展開。展開運算符在多個參數(用于函數調用)或多個元素(用于數組字面量)或者多個變量(用于解構賦值)的地方可以使用。
展開運算符不能用在對象當中,因為目前展開運算符只能在可遍歷對象(iterables)可用。iterables實現(xiàn)是依靠[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 = [ ...arr1, 'd', 'e' ] // //['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]; //報錯
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 }