JS 擴展運算符詳解

一、基本概念

JavaScript 的擴展運算符是指三個點（…）。它可以將一個數組轉為用逗號分隔的參數序列，或將一個對象轉為由 (key,value) 組成的序列。

擴展運算符出現的初衷是為了取代 ES5 中的 apply 方法。

下面是一個簡單的示例：

const arr = [1, 2, 3];
console.log(...arr); // 1 2 3

擴展運算符將數組 [1, 2, 3] 轉換成了參數 1，2，3。這個特性使得函數的調用非常方便。

二、數組操作

1. 數組合併

擴展運算符可以將兩個或多個數組合併成一個數組。示例如下：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const newArr = [...arr1, ...arr2];
console.log(newArr); // [1, 2, 3, 4, 5, 6]

2. 數組拷貝

擴展運算符還可以拷貝數組，而不是引用。下面的示例可以看出，在拷貝過程中，修改新數組並不會影響原數組。

const arr1 = [1, 2, 3];
const arr2 = [...arr1];
arr2[0] = 0;
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [0, 2, 3]

三、函數調用

擴展運算符可以將數組轉換為一個函數的參數序列。這一特性對於需要多個參數的函數非常有用。

下面的示例演示了如何使用擴展運算符調用一個函數：

function myFunction(x, y, z) {
  console.log(x, y, z);
}
const arr = [1, 2, 3];
myFunction(...arr); // 1 2 3

四、對象操作

1. 對象合併

擴展運算符可以將多個對象合併成一個對象。如果有重複的鍵名，後面的屬性會覆蓋前面的屬性。

const obj1 = { foo: 1, bar: 2 };
const obj2 = { baz: 3, bar: 4 };
const newObj = {...obj1, ...obj2};
console.log(newObj); // { foo: 1, bar: 4, baz: 3 }

2. 對象新增屬性

擴展運算符還可以為一個對象添加新的屬性，同時不會影響原對象。

const obj1 = { foo: 1, bar: 2 };
const newObj = { ...obj1, baz: 3 };
console.log(obj1); // { foo: 1, bar: 2}
console.log(newObj); // { foo: 1, bar: 2, baz: 3 }

五、其他用法

1. 字符串轉數組

擴展運算符可以將一個字符串轉換成字符數組。

const str = 'hello';
const arr = [...str];
console.log(arr); // ['h', 'e', 'l', 'l', 'o']

2. 數組轉對象

擴展運算符可以將一個數組轉換成對象。但是需要注意的是，數組中的每一項必須是由鍵名和鍵值構成的數組。

const arr = [['foo', 1], ['bar', 2]];
const obj = {...arr};
console.log(obj); // {foo: 1, bar: 2};

六、總結

擴展運算符是 JavaScript 中非常強大的功能之一，可以大大簡化代碼的編寫，提高程序的效率。不僅可以用於數組和對象操作，還可以將字符串轉換為字符數組，將數組轉換為對象等。