使用Rest和Spread處理對象和數組

學習兩種現代技術來處理JavaScript中的數組和對象

您可以使用點差算子 ...

讓我們從一個數組示例開始。給定

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)但這不是很好的可讀性)

休息元素在使用時很有用陣列解構

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

傳播元素

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

ES2018引入了其他屬性,其餘屬性與對象相同。

休息屬性

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 }

價差屬性允許通過組合在點差運算符之後傳遞的對象的屬性來創建新對象:

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

免費下載我的JavaScript初學者手冊


更多js教程: