2022 IT 鐵人賽 [ Day 15 ] [ JS ] Spread Operator 展開運算子的使用方法

2022 iThome 鐵人賽 清空我的最愛之前端筆記 系列

今天是第 15 天，沒想到已經到了一半了，希望能夠順利完賽~~

Spread Operator 展開運算子是 ES6 版本的新功能，本來我只知道簡單的用法，今天想要多知道更多的應用，然後筆記並實作。

Spread Operator

使用對象與作用：

• 可迭代的 Array 或 String
  - 如果是 Function，會將其展開成 0 到多個引數
  - 如果是 Array 或字組，會將其展開成 0 到多個元素
• Object
  - 展開成 0 到多個 key-value pair

使用場景：

• 當 Object 或 Array 的所有元素，需要被深拷貝(只有一層)到新的 Object 或 Array
• 在呼叫 Function 時，當成引數的列表，一一展開使用

語法：

• 用在 Function arguments list，

myFunction(a, …iterableObj, b)

• 用在 Array literals，

[1, …iterableObj, ‘4’, ‘five’, 6]

• 用在 Object literals，

{ …obj, key: ‘value’ }

拷貝一個 Array

對象：Array
輸出：Array

let array1 = [2, 4, 6]
let array2 = […array1]
console.log(array2) // [2, 4, 6]

把 String 分解成字符，新建一個 Array

對象：String
輸出：Array

let string1 = ‘Hello, Daisy.’
let array3 = […string1]
console.log(array3)
// [‘H’, ‘e’, ‘l’, ‘l’, ‘o’, ‘,’, ‘ ‘, ‘D’, ‘a’, ‘i’, ‘s’, ‘y’, ‘.’]

合併 Array (前後)

對象：Array
輸出：Array

let array4 = [1, 3, 5]
let array5 = [7, 9]
array4 = […array4, …array5]
console.log(array4) // [1, 3, 5, 7, 9]

也可以不要修改到原本的 Array，

let array6 = […array4, …array5]
console.log(array6) // [1, 3, 5, 7, 9]

也可以搭配 Array.push()，

array4.push(…array5)
console.log(array4) // [1, 3, 5, 7, 9]

合併 Array (插入中間的元素當中)

對象：Array
輸出：Array

把 array7 加在 array8 裡，

let array7 = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’]
let array8 = [‘0’, …array7, ‘6’]
console.log(array8) // [‘0’, ‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘6’]

找出 Array 當中的最大值或最小值

對象：Array 當中的數值
輸出：數值

搭配 Math.max()、Math.min()。
如果想要找 12, 82, 2, -4, 0 當中的最大值與最小值，平常會這樣子寫，

console.log(Math.max(12, 82, 2, -4, 0)) // 82
console.log(Math.min(12, 82, 2, -4, 0)) // -4

這時候可以使用展開運算子了~~

let array9 = [12, 82, 2, -4, 0]
console.log(…array9) // 12 82 2 -4 0
console.log(Math.max(…array9)) // 82
console.log(Math.min(…array9)) // -4

合併 Object

對象：Object
輸出：Object

let obj1 = {
 name: ‘apple’,
 color:’red’,
 price: 30
}
let obj2 = {
 size: ‘small’,
 shape: ‘round’
}
let obj3 = { …obj1, …obj2 }
console.log(obj3)
// { name: ‘apple’, color: ‘red’, price: 30, size: ‘small’, shape: ‘round’ }

解構 Object

對象：Object、變數
輸出：變數的值

let { x, y, …z } = {
 x: 1,
 y: 2,
 a: 3,
 b: 4
}
console.log(x) // 1
console.log(y) // 2
console.log(z) // { a: 3, b: 4 }

apply() 的替代方案

一般想要用 Array 中的元素用作 Function 的引數時，很常使用 Function.prototype.apply() 這個方法。

const args = [0, 1, 2]
function myFunction(x, y, z) {
 return x + y + z
}
myFunction.apply(null, args) // 3

這時可以使用展開運算子，

const args = [0, 1, 2]
function myFunction(x, y, z) {
 return x + y + z
}
myFunction(…args) // 3

也可以這樣使用，

const args2 = [1, 2]
function myFunction2(x, a, b, y, z) {
 return x + a + b + y + z
}
myFunction2(0, …args2, 3, 4) // 10

Demo

明天會再接續 Rest Parameter 與兩者的比較

參考資料：
10 Uses for JavaScript’s Spread Operator
MDN — Spread syntax (…)
JavaScript Spread Operator

文章同步更新於 2022 IT 鐵人賽