扩展运算符是三个点...。它好比rest参数的逆运算,将一个数组转为用逗号分隔的参数序列。
console.log(...[1,2,3]) // 1 2 3
console.log(1,...[2,3,4],5) //1 2 3 4 5
该运算主要用于函数调用
function push(array,...items){
array.push(...items)
}
let a=[1,2]
push(a,3,3,3)
a //[1, 2, 3, 3, 3]
...运算符将一个数组,变为参数序列。
扩展运算符与正常的函数参数可以结合使用。
function f(v,w,x,y,z){
console.log(v,w,x,y,z);
}
f(-1,...[1,2],2,...[3]) //-1,1,2,2,3
f(-1,...[1,2,3],2,...[3]) //-1,1,2,3,2
扩展运算符后面还可以放置表达式。
const x = 2
const arr = [...(x > 0 ? ['a'] : []),'b']
arr //['a','b']
若扩展运算符后面是一个空数组,则不产生任何效果。
[...[],1] //[1]
扩展运算符可以展开数组,可替代函数的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)
实例如下:
// ES5
Math.max.apply(null,[14,3,77]) //77
// ES6
Math.max(...[14,3,77]) //77
// 等同于
Math.max(14,3,77) //77
// ES5
var arr1 = [0,1,2];
var arr2 = [3,4,5];
Array.prototype.push.apply(arr1,arr2)
arr1 //[0,1,2,3,4,5]
//ES6
var arr1 = [0,1,2]
var arr2 = [3,4,5]
arr1.push(...arr2)
扩展运算符的应用
(1)复制数组
数组是复合的数据类型,直接复制的话,只是复制了指向底层数据结构的指针,而不是克隆一个全新的数组。
var a1 = [1,2]
var a2 = a1
a2[0] = 2
a1 //[2,2]
上面代码中,a2并不是a1的克隆,而是指向同一份数据的另一个指针。修改a2,会直接导致a1的变化。
ES5只能用变通的方法来复制数组。
var a1 = [1,2]
var a2 = a1.concat()
a2[0] = 2
a1 //[1,2]
上面代码中,a1会返回原数组的克隆,再修改a2不会对a1产生影响。
扩展运算符提供了复制数组的简便写法。
var a1 = [1,2]
//写法一
var a2 = [...a1]
//写法二
var [...a2] = a1
(2)合并数组
//ES5
[1,2].concat([3,4,5]) // [1, 2, 3, 4, 5]
//ES6
[1,2,...[3,4,5]] // [1, 2, 3, 4, 5]
var arr1 = ['a','b']
var arr2 = ['c']
var arr3 = ['d','e']
//ES5
arr1.concat(arr2,arr3)
//ES6
[...arr1,...arr2,...arr3]
(3)与解构赋值结合
扩展运算符可以与解构赋值结合起来,用于生成数组。
var list = [0,1,2,3,4]
//ES5
a = list[0]
rest = list.slice(1)
//ES6
[a,...rest] = list
其他例子:
var [first, ...rest] = [1,2,3,4,5]
first // 1
rest // [2, 3, 4, 5]
var [first, ...rest] = []
first //undefined
rest //[]
const [first, ...rest] = ['foo']
first //'foo'
rest //[]
如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。
(4)字符串
扩展运算符还可以将字符串转为真正的数组。
[...'hello']
// ["h", "e", "l", "l", "o"]
js会将四个字节的Unicode字符,识别为2个字符,采用扩展运算符就没有这个问题。
返回字符串长度的函数:
function length(str){
return [...str].length
}
length('x\uD83D\uDE80y') // 3
//不使用扩展运算符会有问题
'x\uD83D\uDE80y'.length //4
(5)实现了Iterator接口的对象
任何Iterator接口的对象,都可以用扩展运算符转为真正的数组。
let nodeList = document.querySelectorAll('div)
let array = [...nodeList]
nodeList不是数组,而是一个类似数组的对象。这时,扩展运算符可以将其转为真正的数组,原因就在于NodeList对象实现了Iterator。
var arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// TypeError: Cannot spread non-iterable object.
var arr = [...arrayLike];
上面代码中,arrayLike是一个类似数组的对象,但是没有部署Iterator接口,扩展运算符就会报错。可改为Array.from方法将arrayLike转为真正的数组。
var arrayLike = Array.from({
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
});
arrayLike //['a','b','c']
(6)Map和Set结构,Generator函数
扩展运算符内部调用的是数据结构的Iterator接口,因此只要具有Iterator接口的对象,都可以使用扩展运算符,比如Map结构。
let map = new Map([
[1,'one'],
[2,'two'],
[3,'three']
])
let arr = [...map.keys()] // [1,2,3]
let arr2 = [...map.values()] // ["one", "two", "three"]
Generator函数运行后,返回一个遍历器对象,因此也可以使用扩展运算符。
const go = function*() {
yield 1;
yield 2;
yield 3;
}
[...go()] // [1,2,3]