es6 扩展运算符 三个点（...）

1 含义

扩展运算符（ spread ）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

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) {
array.push(...items);
}
function add(x, y) {
return x + y;
}
var numbers = [4, 38];
add(...numbers) // 42

上面代码中，array.push(…items)和add(…numbers)这两行，都是函数的调用，它们的都使用了扩展运算符。该运算符将一个数组，变为参数序列。
扩展运算符与正常的函数参数可以结合使用，非常灵活。

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

2 替代数组的 apply 方法

当我们的函数有多个变量的时候（特别是当我们不知道变量的数量的时候），有时候会通过将变量保存在数组中，并通过call来执行函数，有了展开运算符后则有了更好的方式

毕竟使用call需要手动指定this，有时候会不是很方便很准确

// 一般
function a(x, y, z) { }
var args = [0, 1, 2];
a.apply(null, args);

// 展开运算符
a(...args);

除此之外还可以

// 需要传入不定数量的参数，同时最后一个参数为需要指定的值
function b() {
  console.log(arguments.length);
  console.log(arguments[arguments.length -1]);
}
var args = [0, 1, 2];
b(...args, -2)

总的来说，使多参数的函数调用有了新的方式, 而且避免的作用域的问题。

2.数组中的使用

数组的合并

var a = [1, 2];
var b = [0, ...a, 3]

数组的分割

var [a, ...b] = [0, 1, 2];
console.log(b) // [1, 2]

数组的拷贝

var a = [1, 2];
var b = [...a];

数组中添加值

this.list.push(...res.data.data)

3.对象中的使用

这里的对象是指类似{a:1}这样的对象，因为数组，函数也是对象中的一种。

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(z) // {a: 3, b: 4}

这个在函数的参数中也有很好的用处

function test(...args) {
  console.log(args);
}

test('wang', '23', 'man');

可能会有人说arguments本身就可以啊，但是arguments本身并不是数组，所以无法直接对arguments进行数组操作。

类外，在Node中有很多的回调函数都是以error为第一返回值，其实很多接口都是那么设计的。那么我们可以很方便的分离error和其他参数

request.get('./demo', (e, ...data) => {
  console.log(e);
  console.log(data);
})

转载于 https://juejin.cn/post/6844903585960951815