ES6-rest参数、数组扩展中的扩展运算符

rest 参数

形式为(...变量名) rest参数搭配的变量是一个数组，该变量将多余的参数放入其中。

复制代码

function add(...values) {
  console.log(values)
}
add(2, 5, 3)

//[3, 4, 5]

数组的扩展（...）, 如同rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。

复制代码

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

扩展运算符主要用于函数调用。

复制代码

function push(array, ...items) {
  array.push(...items);
}
function add(x, y) {
  return x + y;
}
var numbers = [4, 38];
add(...numbers); // 42

array.push(...items) 和 add(...numbers) 都是函数的调用。它们都是用了扩展运算符。该运算符可以将一个数组变为参数序列。

替代数组的apply 方法

由于扩展运算符可以展开数组，所以不再需要使用apply 方法将数组转为函数的参数。

复制代码

//es5 写法
function f(x, y, z) {
  //....
};
var args = [1, 2, 3];
f.apply(null, args);

//es6 写法
function f(x, y, z) {
  //....
};
var args = [1, 2, 3];
f(...args);

下面是扩展运算符取代apply 方法的一个实际例子：应用Math.max方法简化求出一个数组中的最大元素。

复制代码

//ES5的写法
Math.max.apply(null, [14, 3, 77])
//ES6的写法
Math.max(...[14, 3, 77])
//等同于
Matn.max(14, 3, 77)

另一个例子：通过push函数将一个数组添加到另一个数组的尾部。

复制代码

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

扩展运算符的应用

合并数组

扩展运算符提供了数组合并的新写法

复制代码

//es5
[1, 2].concat(more)
//es6
[1, 2, ...more]

var arr1 = ['a', 'b']
var arr2 = ['c']
var arr3 = ['d', 'e']
//es5 合并
arr1.concat(arr2, arr3)
//es6 合并
[...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  // []
如果将扩展运算符用于数组赋值， 则智能将其放在参数的最后一位，否则会报错。