ES5與ES6常用語法教程之 ④展開運算符...在數組和對象中的作用

展開操作符(spread)

展開運算符（spread operator）允許一個表達式在某處展開。展開運算符在多個參數（用於函數調用）或多個元素（用於數組字面量）或者多個變量（用於解構賦值）的地方可以使用。

函數調用中使用展開運算符

在以前我們會使用apply方法來將一個數組展開成多個參數：

function test(a, b, c) {
  console.log(a, b, c) // 輸出 0 1 2
}
var args = [0, 1, 2]
test.apply(null, args)

 

上面代碼塊中，我們把args數組當作實參傳遞給了a,b,c，這邊正是利用了Function.prototype.apply的特性。

不過ES6有了展開運算符，我們就可以更加簡潔地來傳遞數組參數：

function test(a, b, c) {
  console.log(a, b, c) // 輸出 0 1 2
}
var args = [0, 1, 2]

test(...args)

 

我們使用...xxx展開運算符就可以把args展開直接傳遞給test()函數

數組字面量中使用展開運算符

• 在ES6中，我們可以直接將一個數組合並到另一個數組中

let arr1 = ['a', 'b', 'c']
let arr2 = [...arr1, 'd', 'e']

console.log(arr2) // 輸出：["a", "b", "c", "d", "e"] 

 

• 展開運算符也可以用在push函數中，以后不需再用apply()函數來合並兩個數組

let arr1=['a', 'b', 'c']
let arr2=['d', 'e']
arr2.push(...arr1)
console.log(arr2) // 輸出：["d", "e", "a", "b", "c"]

 

用於解構賦值(rest）

• 解構賦值也是ES6中的一個特性，而展開運算符可以用於部分情景

let [arg1, arg2, ...arg3] = [1, 2, 3, 4]
console.log(arg1) // 1
console.log(arg2) // 2
console.log(arg3) // [3, 4]

 

注意點：

• 展開運算符在解構賦值中的作用跟上面的展開作用看上去是相反的，它是將多個元素合成了一個新數組。
• 解構賦值中展開運算符只能用在最后面，不能用在其他的位置
• 下面的用法就會報語法錯誤

let [arg1, ...arg2, arg3] = [1, 2, 3, 4]
console.log(arg1)
console.log(arg2)
console.log(arg3)

 

類數組對象變成數組

• 展開運算符可以將一個類數組對象變成一個真正的數組對象

let list = document.getElementsByTagName('div')
let arr = [...list]
console.log(arr)

 

• list是類數組對象，通過使用展開運算符將其變成了數組對象

對象展開運算符(ES7)

• ES7中的對象展開運算符可以更快捷地操作對象

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}

 

• 如上面的代碼塊，我們可以將一個對象中的一部分抽取出來，成為一個新對象賦值給展開運算符
• 我們也可以像數組中插入數組那樣將一個對象插入到另外一個對象中

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

 

• 合並兩個對象

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

 

剩余操作符(rest)

• rest操作符用在函數的參數內，將剩余的參數放到foods數組中

function breakfast(dessert, drink, ...foods) {
  console.log(dessert) // 🍰
  console.log(drink) // 🍺
  console.log(foods) // ["🍎", "🍐"]
}

breakfast ('🍰', '🍺', '🍎', '🍐')

 

注意點：

• 和上面的解構賦值一樣，剩余操作符只能用在函數的最后一個參數上，用在其他地方一樣報語法錯誤。