Spread 與 Rest 運算子都是寫成三個點，而它的身份就取決於我們在哪裡使用它，一起來看看吧。

展開運算子 (Spread Operator)

🔑 Pull out、傳播、解壓縮物件屬性或陣列元素

用來拆分陣列的元素或是物件的屬性，添加新元素或屬性則是可選的。

例如：使用 Spread Operator 可以很容易地把資料拉出來。

• 將舊陣列的所有元素添加到新陣列，再另外添加新的元素 1 跟 2
• 將舊物件所有的 Name-value pair 拉出來放入新物件，再另外添加新的屬性

1const oldArray = [1, 2, 3];
2const newArray = [...oldArray, 4, 5];
3console.log(newArray);
4// [1, 2, 3, 4, 5]
5
6const oldObject = { oldProp: 1 };
7const newObject = { ...oldObject, newProp: 5 };
8console.log(newObject);
9// { oldProp: 1, newProp: 5 }
10

Spread Operator 可以用來複製物件或陣列，屬於「淺拷貝」。

關於淺拷貝與深拷貝的差異：

• 母湯安捏用：obj2 = obj1。
• 淺拷貝 (Shallow Copy)：以「應該拷貝屬性而非整個物件」的原則來執行，最常用的方法就是本文的 Spread Operator，但是淺拷貝只有第一層是 Real copy，到了第二層之後就會失效。
  • 有些人會把 Object.assign 歸類到深拷貝，但是在關於 JS 中的淺拷貝(shallow copy)以及深拷貝(deep copy)這篇文章中有提到它的隱藏地雷，因此最後決定將它歸類在淺拷貝。
• 深拷貝 (Deep Copy)：請服用 JSON.stringify(obj) 以及 JSON.parse(JSONString)。
  • Lodash 內的 _.cloneDeep 也是一個簡單而且乾淨的做法。

其餘運算子 (Rest Operator)

🔑 合併、壓縮、函式參數

函式可以接收多個參數，...args 會將所有的參數合併到一個陣列中。

1function sortArgs(...args) {
2  console.log(args); // 參數列表
3  return args.sort();
4}
5
6sortArgs('Sean', 23, true);
7// ["Sean", 23, true]
8

在 ES6 的箭頭函式也可以使用 ...args 得到參數清單的陣列。

1const filter = (...args) => {
2  return args.filter((el) => el === 1);
3};
4
5console.log(filter(1, 2, 3));
6// [1]
7

解構 (Destructuring)

Destructuring 與 Spread 的差異

• Destructuring：將陣列元素或物件屬性提取出來，並存到一個變數上
• Spread：解壓縮取出「所有」陣列元素或物件屬性，再把它們放入新陣列或新物件

聽起來做的事情好像差不多，但是 Destructuring 其實多了一個特點，就是它可以只提取「單一個」元素或屬性。

Array Destructuring

常見用法：建立新陣列，其中 a 跟 b 的位置會對應到陣列元素的位置順序。

如果要跳過某個元素，像是要跳過 num2 直接取得後面的 num3，只要放一個空格然後逗號就可以忽略掉 num2 了。

1const [a, b] = ['Hello', 'Sean', 123];
2console.log(a); // "Hello"
3console.log(b); // "Sean"
4
5const numbers = [1, 2, 3];
6const [num1, , num3] = numbers;
7console.log(num1, num3); // 1 3
8

Object Destructuring

在等號左側使用大括號並寫上對應的屬性名稱，就可以從右邊提取出該屬性的值。

1const { name } = { name: 'Sean', age: 23 };
2console.log(name); // "Sean"
3console.log(age); // age is not defined
4

以上資源是我自己整理過後的筆記，若有錯誤歡迎隨時和我聯繫