es5與es6常用語法教程(4)

js常用語法系列教程如下

展開操作符(spread)

展開運算符（spread operator）允許一個表達式在某處展開归园。展開運算符在多個參數(shù)（用于函數(shù)調(diào)用）或多個元素（用于數(shù)組字面量）或者多個變量（用于解構(gòu)賦值）的地方可以使用。

函數(shù)調(diào)用中使用展開運算符

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

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

上面代碼塊中言秸，我們把args數(shù)組當作實參傳遞給了a,b,c岩齿，這邊正是利用了Function.prototype.apply的特性唱遭。

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

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

test(...args)

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

數(shù)組字面量中使用展開運算符

在ES6中，我們可以直接將一個數(shù)組合并到另一個數(shù)組中

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

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

展開運算符也可以用在push函數(shù)中旨怠，以后不需再用apply()函數(shù)來合并兩個數(shù)組

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

用于解構(gòu)賦值(rest）

解構(gòu)賦值也是ES6中的一個特性，而展開運算符可以用于部分情景

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

注意點：

展開運算符在解構(gòu)賦值中的作用跟上面的展開作用看上去是相反的蜈块，它是將多個元素合成了一個新數(shù)組鉴腻。
解構(gòu)賦值中展開運算符只能用在最后面迷扇，不能用在其他的位置
下面的用法就會報語法錯誤

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

類數(shù)組對象變成數(shù)組

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

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

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

對象展開運算符(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}

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

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操作符用在函數(shù)的參數(shù)內(nèi)，將剩余的參數(shù)放到foods數(shù)組中

function breakfast(dessert, drink, ...foods) {
  console.log(dessert) // ??
  console.log(drink) // ??
  console.log(foods) // ["??", "??"]
}

breakfast ('??', '??', '??', '??')