使用 ES6 扩展运算符 - JavaScript

在 JavaScript 中，扩展运算符是一个用于展开数组、对象或字符串的新特性。它用三个连续的点（...）来表示，可以使用在函数调用、数组字面量、对象字面量、解构赋值等多种场景中。

1. 扩展数组

扩展运算符可以用来展开数组，将一个数组展开成多个独立的元素。

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

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

2. 扩展对象

扩展运算符也可以用来展开对象，将一个对象的所有属性展开到另一个对象中。

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3, d: 4 };

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

如果有相同的属性名，后面的属性将覆盖前面的属性。

3. 合并数组

扩展运算符可以用来合并数组。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArray = [...arr1, ...arr2];

console.log(mergedArray); // [1, 2, 3, 4, 5, 6]

4. 克隆数组或对象

扩展运算符还可以用来快速克隆数组或对象。

const originalArray = [1, 2, 3];
const clonedArray = [...originalArray];

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

const originalObject = { a: 1, b: 2 };
const clonedObject = { ...originalObject };

console.log(clonedObject); // { a: 1, b: 2 }

5. 字符串转数组

扩展运算符可以将字符串转换为数组。

const str = "Hello";
const strToArray = [...str];

console.log(strToArray); // ['H', 'e', 'l', 'l', 'o']

以上是使用 ES6 扩展运算符的一些常见用法。它简化了代码编写，并提供了更方便的操作数组、对象和字符串的方式。

请记得在支持 ES6 的环境下使用扩展运算符，或者考虑使用 Babel 等工具进行转换以保持兼容性。

参考资料：MDN Web 文档 - 扩展语法