JavaScript 扩展运算符

JavaScript 扩展运算符是一种语法，用于将可迭代对象（如数组、字符串或类数组对象等）展开为函数调用或数组/对象字面量中的元素。该运算符通常用于简化代码和实现一些常见的编程模式。

基本语法

扩展运算符使用 ... 符号。在函数调用中，它可以用于传递任意数量的参数。示例如下：

function myFunction(a, b, c) {
  console.log(a, b, c);
}

const args = [1, 2, 3];
myFunction(...args); // 输出: 1 2 3

在数组/对象字面量中，扩展运算符可以用于将一个数组/对象的元素展开到另一个数组/对象中。示例如下：

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

const obj1 = { foo: 1, bar: 2 };
const obj2 = { ...obj1, baz: 3 };
console.log(obj2); // 输出: { foo: 1, bar: 2, baz: 3 }

扩展运算符的应用

1. 复制数组或对象

扩展运算符可以用于快速复制一个数组或对象，而不需要使用循环或递归。示例如下：

const arr1 = [1, 2, 3];
const arr2 = [...arr1];

const obj1 = { foo: 1, bar: 2 };
const obj2 = { ...obj1 };

2. 合并数组或对象

扩展运算符可以用于将多个数组或对象合并成一个数组或对象。示例如下：

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [...arr1, ...arr2];

const obj1 = { foo: 1 };
const obj2 = { bar: 2 };
const obj3 = { ...obj1, ...obj2 };

3. 将字符串转换为数组

扩展运算符可以用于将一个字符串转换为一个元素为字符的数组。示例如下：

const str = 'hello';
const arr = [...str];
console.log(arr); // 输出: ['h', 'e', 'l', 'l', 'o']

4. 获取函数参数列表

扩展运算符可以用于将函数的参数列表转换为一个数组。示例如下：

function myFunction(a, b, c) {
  const args = [...arguments];
  console.log(args);
}

myFunction(1, 2, 3); // 输出: [1, 2, 3]

注意事项

1. 扩展运算符只能应用于可迭代对象，否则会抛出 TypeError。
2. 由于 JavaScript 的函数是动态的，并且可以接收任意数量的参数，因此扩展运算符不适用于固定参数数量的函数。
3. 扩展运算符只是一种语法糖，本质上和手动遍历和复制/合并数组或对象是相同的，因此在大规模数据的情况下，性能可能存在瓶颈，需要谨慎使用。

参考链接

• MDN Web Docs - Spread syntax (...)