ECMAScript 2019 (ES10) 中的拓展运算符：新特性和用法

拓展运算符是 ECMAScript 2015 (ES6) 中引入的，它可以将一个可迭代对象（如数组、字符串、Set 等）拆分成单独的值，或将多个值组合成一个数组。在 ECMAScript 2019 (ES10) 中，拓展运算符得到了新的特性和用法，本文将详细介绍它们的使用方法和指导意义。

扩展数组字面量语法

在 ES6 中，使用拓展运算符可以将一个数组拆分成单独的值：

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

在 ES10 中，拓展运算符可以在数组字面量语法中使用：

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];
console.log(arr2); // [1, 2, 3, 4, 5, 6]

这样可以更方便地创建新的数组，而不需要使用 concat() 方法。

对象拓展运算符

在 ES6 中，拓展运算符只能用于数组和类数组对象。在 ES10 中，它还可以用于对象：

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

这样可以更方便地创建新的对象，而不需要使用 Object.assign() 方法。

函数参数中的拓展运算符

在 ES6 中，拓展运算符可以在函数调用时将一个数组拆分成单独的值，作为函数的参数：

function foo(x, y, z) {
  console.log(x, y, z);
}

const arr = [1, 2, 3];
foo(...arr); // 1 2 3

在 ES10 中，拓展运算符可以在函数参数中使用，将多个参数组合成一个数组：

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

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

这样可以更方便地处理不定数量的参数，而不需要使用 arguments 对象。

拓展运算符和迭代器

拓展运算符的内部实现依赖于迭代器。在 ES6 中，只有数组、字符串、Set 和 Map 等内置对象实现了迭代器，因此只有这些对象可以使用拓展运算符。在 ES10 中，任何实现了迭代器的对象都可以使用拓展运算符。

例如，我们可以使用生成器函数创建一个实现了迭代器的对象：

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}

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

总结

ES10 中的拓展运算符扩展了它的使用范围，使得它可以更方便地创建新的数组和对象，处理不定数量的函数参数，以及使用迭代器。这些新特性和用法可以提高代码的可读性和简洁性，值得前端开发者深入学习和掌握。

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