es5与es6常用语法教程(4)

2017-11-01 本文已影响138人光强_上海

js常用语法系列教程如下

展开操作符(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 ('🍰', '🍺', '🍎', '🍐')