ES7: 数组解构中的 '...' 运算符

在 ES6 中，我们已经学会了通过解构语法来提取数组中的值，比如：

const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a, b, c);  // 1 2 3

ES7 中新增了一个 '...' 运算符，它可以让我们更为灵活地解构数组。

基本语法

使用 '...' 运算符的基本语法如下：

const arr = [1, 2, 3, 4];
const [a, ...b] = arr;
console.log(a);  // 1
console.log(b);  // [2, 3, 4]

上面的代码中，我们使用了 '...' 运算符来提取数组中的剩余部分，把它们赋值给了 b 变量。

指定位置

除了提取剩余部分外，我们还可以指定要提取的位置：

const arr = [1, 2, 3, 4];
const [a, , , ...b] = arr;
console.log(a);  // 1
console.log(b);  // [4]

上面的代码中，我们使用了两个偏移量来指定要提取的位置。第一个偏移量是 0，表示提取第一个元素；第二个偏移量是 3，表示提取第四个元素之后的所有元素。

其他用途

除了在数组解构中使用，'...' 运算符在其他地方也有很多用途，比如：

扩展运算符

'...' 运算符可以把一个数组展开为多个参数传递给函数，甚至还可以与其他参数一起使用：

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

foo(1, 2, 3);  // [1, 2, 3]

对象合并

'...' 运算符还可以用于对象合并：

const obj1 = {a: 1, b: 2};
const obj2 = {c: 3, ...obj1};
console.log(obj2);  // {a: 1, b: 2, c: 3}

上面的代码中，我们使用了 '...' 运算符来合并 obj1 对象的属性到 obj2 中。

总结

'...' 运算符是 ES7 中新增的一项语法，它可以让我们在数组解构中更加灵活地提取值，同时还可以用在其他地方，比如函数传参和对象合并。掌握 '...' 运算符的使用，可以让你的代码更加简洁明了。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646f58a0968c7c53b0db9f0e