學習在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 }