【JavaScript】展開語法

以下內容為學習記錄，可以參考 MDN 原文。

環境

• node v12.18.1
• npm 6.14.5
• vscode 1.46
• Microsoft Edge 83

概念

展開語法（Spread syntax），可以在函數調用數組構造時，將數組表達式或者 string 在語法層面展開；還可以在構造字面量對象時, 將對象表達式按 key-value 的方式展開。

示例

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// expected output: 6

console.log(sum.apply(null, numbers));
// expected output: 6

在函數調用時使用展開語法

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);

構造字面量數組時使用展開語法

var parts = ['shoulders', 'knees']; 
var lyrics = ['head', ...parts, 'and', 'toes']; 
// ["head", "shoulders", "knees", "and", "toes"]

數組拷貝

var arr = [1, 2, 3];
var arr2 = [...arr]; // like arr.slice()
arr2.push(4); 

// arr2 此時變成 [1, 2, 3, 4]
// arr 不受影響

連接多個數組

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1, ...arr2];

構造字面量對象時使用展開語法

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// 克隆后的對象: { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// 合並后的對象: { foo: "baz", x: 42, y: 13 }