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

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

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

const a = [1, 2, 3]

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

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

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

const c = [...a]

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

const newObj = { ...oldObj }

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

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

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

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

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

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

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

spread運算子

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屬性

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運算子後傳遞的物件的屬性來創建一個新的物件:

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