/

JavaScript 展開運算子

JavaScript 展開運算子

學習 JavaScript 的展開運算子基礎知識

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

首先從陣列的例子開始。給定

1
const a = [1, 2, 3]

你可以使用以下方式來建立一個新陣列

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

你也可以使用以下方式來複製一個陣列

1
const c = [...a]

這對物件也同樣適用。你可以使用以下方式來克隆一個物件

1
const newObj = { ...oldObj }

使用字串時，展開運算子會將字串中的每個字元創建一個陣列

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

這個運算子有一些非常有用的應用。其中最重要的應用之一是能夠非常簡單地將陣列作為函式參數使用

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

在處理陣列解構賦值時，rest 元素非常有用

1
2
const numbers = [1, 2, 3, 4, 5]
const [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 result = 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 屬性 允許通過結合展開運算子後的物件的屬性來創建一個新物件：

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

這也是將兩個簡單物件合併為一個物件的完美方式：

1
2
3
4
5
6
7
8
9
const object1 = {
  name: 'Flavio'
}

const object2 = {
  age: 35
}

const object3 = {...object1, ...object2 }

tags: [“JavaScript”, “Spread Operator”, “Rest”, “Object Destructuring”, “ES2018”]