JavaScript Spread運算符

了解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 = (foo, bar) => {}
const a = [1, 2]
f(...a)

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

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

傳播元素

const numbers = [1, 2, 3, 4, 5]
const sum = (a, b, c, d, e) => a + b + c + d + e
const result = 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 }

這也是將兩個簡單對象合併為一個的完美方法:

const object1 = {
  name: 'Flavio'
}

const object2 = { age: 35 }

const object3 = {…object1, …object2 }

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


更多js教程: