/

使用Rest和Spread處理物件和陣列

使用Rest和Spread處理物件和陣列

學習在JavaScript中使用兩種現代技術來處理陣列和物件。

你可以使用spread運算子 ...來展開陣列、物件或字串。

讓我們從一個陣列的例子開始。給定

1
const a = [1, 2, 3]

你可以使用以下方式創建一個新的陣列

1
const b = [...a, 4, 5, 6]

你也可以使用以下方式創建一個陣列的複製

1
const c = [...a]

這對於物件也同樣適用。使用以下方式克隆一個物件：

1
const newObj = { ...oldObj }

對於字串，spread運算子會創建一個包含字串中每個字符的陣列：

1
2
const hey = 'hey'
const arrayized = [...hey] // ['h', 'e', 'y']

這個運算子有一些非常有用的應用。其中最重要的一個是在非常簡單的方式下將陣列用作函數參數：

1
2
3
const f = (arg1, arg2) => {}
const a = [1, 2]
f(...a)

（在過去，你可以使用 f.apply(null, a) 來實現這一點，但這不太好看和易讀）

rest元素在處理陣列解構時非常有用：

1
2
const numbers = [1, 2, 3, 4, 5]
[first, second, ...others] = numbers

和spread運算子：

1
2
3
const numbers = [1, 2, 3, 4, 5]
const sum = (a, b, c, d, e) => a + b + c + d + e
const sumOfNumbers = sum(...numbers)

ES2018引入了rest屬性，與此相同但適用於物件。

rest屬性：

1
2
3
4
5
6
7
8
9
10
11
const { first, second, ...others } = {
 first: 1,
 second: 2,
 third: 3,
 fourth: 4,
 fifth: 5
}

first // 1
second // 2
others // { third: 3, fourth: 4, fifth: 5 }

spread屬性允許通過合併spread運算子後傳遞的物件的屬性來創建一個新的物件：

1
2
const items = { first, second, ...others }
items //{ first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }

tags: [“JavaScript”, “array”, “object”, “spread operator”, “rest element”, “spread properties”]