Sean's Blog

An image showing avatar

Hi, I'm Sean

這裡記錄我學習網站開發的筆記
歡迎交流 (ゝ∀・)b

LinkedInGitHub

瞭解 Spread & Rest Operator 與 Destructuring 的用法

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,到了第二層之後就會失效。
  • 深拷貝 (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

常見用法:建立新陣列,其中 ab 的位置會對應到陣列元素的位置順序。

如果要跳過某個元素,像是要跳過 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

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