ES6 扩展运算符 三点(…)
参考
含义
扩展运算符( spread )是三个点(…)。它将一个数组转为用逗号分隔的参数序列。
console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]
该运算符主要用于函数调用。
function push(array, ...items) { //item是数组类型。
array.push(...items);
}
function add(x, y) {
return x + y;
}
var numbers = [4, 32];
add(...numbers) // 相当于第一步先讲数组转为逗号分割的序列4,32,再将序列作为参数调用函数,结果===>add(4,32)===》36
运用扩展运算符替代数组的 apply 方法:
应用Math.max方法,简化求出一个数组最大元素的写法。
// ES5 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77);
运用扩展运算符将一个数组添加到另一个数组的尾部:
var arr1;
var arr2;
arr1.push(...arr2);//push方法的参数不能是数组
运用扩展运算符合并数组:
//ES5合并数组
[a1,a2,a3].concat(anotherarr);
[a1,a2,a3,...anotherarr];
//ES6合并数组
arr1.concat(arr2,arr3);
[...arr1,...arr2,...arr3];
扩展运算符可以与解构赋值结合起来,用于生成数组:
// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list
下面是另外一些例子。
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];
// 报错