ES6 数组的新特性之扩展运算符

简单用法

扩展运算符(...)好比 rest 参数的逆运算,将一个数组转为一个个元素

console.log(...[1, 2, 3])
// 1 2 3

function add(x, y) {
  return x + y
}
add(...numbers)
// 42

扩展运算符与正常的函数参数可以结合使用,非常灵活

function f(v, w, x, y, z) {}
const args = [0, 1]
f(-1, ...args, 2, ...[3])

扩展运算符后面还可以放置表达式

const arr = [
  ...(x > 0 ? ['a', 'c'] : []),
  'b'
]

如果扩展运算符后面是一个空数组,则不产生任何效果

let arr = [...[], 1]
arr // [1]

与解构赋值结合

扩展运算符可以与解构赋值结合起来,用于生成数组

const [first, ...rest] = [1, 2, 3, 4, 5]
first // 1
rest  // [2, 3, 4, 5]

const [first, ...rest] = []
first // undefined
rest  // []

const [first, ...rest] = ["foo"]
first  // "foo"
rest   // []

如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错

const [...butLast, last] = [1, 2, 3, 4, 5]
// 报错

const [first, ...middle, last] = [1, 2, 3, 4, 5]
// 报错

应用

替代函数的 apply 方法

// ES5 的写法
function f(x, y, z) {
  // ...
}
var args = [0, 1, 2]
f.apply(null, args)

// ES6的写法
function f(x, y, z) {
  // ...
}
let args = [0, 1, 2]
f(...args)

简化通过 Math.max 求出一个数组最大元素的写法

// ES5 的写法
Math.max.apply(null, [14, 3, 77])

// ES6 的写法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77)

简化通过 push 将一个数组添加到另一个数组尾部的写法

// ES5 的写法
var arr1 = [0, 1, 2]
var arr2 = [3, 4, 5]
Array.prototype.push.apply(arr1, arr2)

// ES6 的写法
let arr1 = [0, 1, 2]
let arr2 = [3, 4, 5]
arr1.push(...arr2)

数组的拷贝

// ES5 的写法
const a1 = [1, 2]
const a2 = a1.concat()

// ES6 的写法
const a1 = [1, 2]
// 写法一
const a2 = [...a1]
// 写法二
const [...a2] = a1

* 如果数组成员是对象,则拷贝的是对象的引用

let arr = [ { name: 'aaa', age: 18 } ]
let brr = [...arr]
brr[0].age = 19
arr[0].age // 19

合并数组

const arr1 = ['a', 'b']
const arr2 = ['c']
const arr3 = ['d', 'e']

// ES5 的合并数组
arr1.concat(arr2, arr3)
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

将字符串转为真正的数组

[...'hello']
// [ "h", "e", "l", "l", "o" ]

将具有 Iterator 接口的对象转为数组

let nodeList = document.querySelectorAll('div')
let array = [...nodeList]

querySelectorAll 方法返回的是一个 NodeList 对象
NodeList 对象不是数组,而是一个类似数组的对象
NodeList 对象实现了 Iterator 所以能够转换为数组

本文转载自 http://es6.ruanyifeng.com/#docs/array#扩展运算符 并进行整理

除特殊说明外本人博客均属原创,转载请注明出处:http://blog.johnhan.cn/blog_1030.html
鄂ICP备17018604号-1  鄂公网安备42060702000030号