擴展運算符 spread syntax 又叫展開語法，寫法是 ...，顧名思義，其實是用來展開字符串，數組和對象的一種語法，可以在函數調用/數組構造時, 將數組表達式或者 string 在語法層面展開；還可以在構造字面量對象時, 將對象表達式按 key-value 的方式展開。常用的語法如下：
|
1
2
3
4
5
6
7
8
|
//函數調用：myFunction(...iterableObj);//字面量數組構造或字符串：[...iterableObj, '4', ...'hello', 6];// 構造字面量對象時,進行克隆或者屬性拷貝（ECMAScript 2018規范新增特性）：let objClone = { ...obj }; |
在函數調用時使用擴展運算符相當于使用 Function.prototype.apply：
|
1
2
3
4
5
6
7
8
|
function myFunction(x, y, z) { }var args = [0, 1, 2];myFunction(...args);//相當于function myFunction(x, y, z) {}var args = [0, 1, 2];myFunction.apply(null, args); |
和 apply 不同的是，我們不僅可以將全部參數放到一個數組中，還可以只將其中幾個參數用擴展運算符展開，并且可以再一次調用中多次使用擴展運算符。
|
1
2
3
4
5
6
|
function myFunction(a, b, c, d, e) { console.log(a, b, c, d, e); //-1 0 1 2 3 console.log(arguments); //[Arguments] { '0': -1, '1': 0, '2': 1, '3': 2, '4': 3 }}var args = [0, 1];myFunction(-1, ...args, 2, ...[3]); |
使用 new 關鍵字來調用構造函數時，不能直接使用數組加上 apply 的方式（apply 執行的是調用 [[Call]] , 而不是構造 [[Construct]]）。有了展開語法, 將數組展開為構造函數的參數就很簡單了：
|
1
2
|
var dateFields = [1970, 0, 1]; // 1970年1月1日var d = new Date(...dateFields); |
如果想要不使用擴展運算符實現同樣的效果，我們必須用一個函數包裝構造函數，將這個新的構造函數的 prototype 設為原構造函數的實例，用 Object.create(constructor.prototype)（這里主要是為了新構造函數原型的修改不影響原構造函數的原型，直接用 constructor.prototype 作為新構造函數的原型也可以實現）。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
function applyAndNew(constructor, args) { function partial() { return constructor.apply(this, args); } if (typeof constructor.prototype === 'object') { partial.prototype = Object.create(constructor.prototype); } return partial;}function myConstructor() { console.log('arguments.length: ' + arguments.length); console.log(arguments); this.prop1 = 'val1'; this.prop2 = 'val2';}var myArguments = ['hi', 'how', 'are', 'you', 'mr', null];var myConstructorWithArguments = applyAndNew(myConstructor, myArguments);console.log(new myConstructorWithArguments());// (myConstructor構造函數中): arguments.length: 6// (myConstructor構造函數中): ["hi", "how", "are", "you", "mr", null]// ("new myConstructorWithArguments"中): {prop1: "val1", prop2: "val2"} |
當然用的最多的還是在字面量數組上，沒有展開語法的時候，只能組合使用 push, splice, concat 等方法，來將已有數組元素變成新數組的一部分。有了展開語法, 通過字面量方式, 構造新數組會變得更簡單、更優雅：
|
1
2
3
|
var parts = ['shoulders', 'knees'];var lyrics = ['head', ...parts, 'and', 'toes'];// ["head", "shoulders", "knees", "and", "toes"] |
可以用來實現數組淺拷貝：
|
1
2
3
4
5
6
|
var arr = [1, 2, 3];var arr2 = [...arr]; // like arr.slice()arr2.push(4);// arr2 此時變成 [1, 2, 3, 4]// arr 不受影響 |
連接多個數組：
|
1
2
3
|
var arr1 = [0, 1, 2];var arr2 = [3, 4, 5];var arr3 = [...arr1, ...arr2]; |
擴展運算符還可以將已有對象的所有可枚舉(enumerable)屬性拷貝到新構造的對象中。該方法為淺拷貝，可以拷貝 Symbol 屬性，但不包含原型上的屬性和方法。如果同時拷貝多個對象，后面的對象會覆蓋前面對象的同名屬性。
|
1
2
3
4
5
6
7
8
|
var obj1 = { foo: 'bar', x: 42, [Symbol('a')]: 123 };var obj2 = { foo: 'baz', x: 100, y: 13 };var clonedObj = { ...obj1 };console.log(clonedObj); //{ foo: 'bar', x: 42, [Symbol(a)]: 123 }var mergedObj = { ...obj1, ...obj2 };console.log(mergedObj); //{ foo: 'baz', x: 100, y: 13, [Symbol(a)]: 123 } |
該方法的性質和 Object.assign 類似，但是 Object.assign() 函數會觸發 setters，而展開語法則不會。
注意事項
- 在數組或函數參數中使用展開語法時, 擴展運算符只能用于可迭代對象。
- 只有函數調用時，擴展運算符才可以放在圓括號中，否則會報錯。
- 只能用在函數調用，字面量數組（可以在數組中展開字符串），字面量對象中。
- 用于數組的解構賦值的時候，擴展運算符只能處于最后一個。
- 展開對象可以是任意可迭代對象。
剩余參數
剩余參數語法允許我們將一個不定數量的參數表示為一個數組。如果函數的最后一個命名參數以 ... 為前綴，則它將成為一個由剩余參數組成的真數組，其中從 0（包括）到 theArgs.length（排除）的元素由傳遞給函數的實際參數提供。
剩余語法(Rest syntax) 看起來和展開語法完全相同，不同點在于, 剩余參數用于解構數組和對象。從某種意義上說，剩余語法與展開語法是相反的：展開語法將數組展開為其中的各個元素，而剩余語法則是將多個元素收集起來并“凝聚”為單個元素。擴展運算符是用在函數調用，而剩余參數是用在函數聲明。
剩余參數和 arguments 對象之間的區別主要有三個：
-
剩余參數只包含那些沒有對應形參的實參，而
arguments對象包含了傳給函數的所有實參。 -
arguments對象不是一個真正的數組，而剩余參數是真正的 Array 實例，也就是說你能夠在它上面直接使用所有的數組方法，比如sort，map，forEach或pop。 -
arguments對象還有一些附加的屬性 （如 callee 屬性）。
如果剩余參數（包括在解構賦值中）右側有逗號，會拋出 SyntaxError，因為剩余元素必須是函數的最后一個參數或者數組的最后一個元素。
以上就是詳解ES6 擴展運算符的詳細內容，更多關于ES6 擴展運算符的資料請關注服務器之家其它相關文章！
原文鏈接：https://www.clloz.com/programming/front-end/js/2020/11/05/deep-into-spread-syntax/
