JavaScript展开运算符(...)的用法（附带实例）

在现代的 JavaScript 开发中，展开运算符（...）是一种强大而灵活的工具，可以用于同时复制和合并数组，将字符串转换为数组，甚至可以复制和合并对象。

本节将深入讲解 JavaScript 的展开运算符，揭示这项强大功能的奥秘。

数组展开运算符

数组展开运算符是展开运算符的一种应用，它可以完成对数组进行复制、合并，以及将字符串转换为数组的操作。

1) 复制数组

使用数组展开运算符可以轻松复制一个数组，示例代码如下：

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];
console.log(copiedArray); // 输出：[1, 2, 3]

通过简单地使用展开运算符，我们实现了数组的复制，并将结果存储在新的变量 copiedArray 中。

2) 合并数组

除了复制数组，展开运算符还可以实现两个或多个数组的合并，示例代码如下：

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = [...array1, ...array2];
console.log(mergedArray); // 输出：[1, 2, 3, 4, 5, 6]

通过将多个数组放在数组展开运算符中并使用逗号分隔，可以将它们合并为一个新的数组。

3) 字符串转数组

展开运算符还可以将字符串转换为数组，并以单个字符作为数组元素，示例代码如下:

const str = "Hello";
const strArray = [...str];
console.log(strArray); // 输出：['H', 'e', 'l', 'l', 'o']

通过使用展开运算符，可以将一个字符串快速转换为由单个字符组成的数组。

对象展开运算符

除了数组展开运算符，JavaScript 还引入了对象展开运算符，它可以用于复制和合并对象。

1) 复制对象

使用对象展开运算符可以简单地复制一个对象，示例代码如下：

const originalObj = { name: 'Tom', age: 18 };
const copiedObj = { ...originalObj };
console.log(copiedObj); // 输出：{ name: 'Tom', age: 18 }

通过使用对象展开运算符，实现了对象的复制，并将结果存储在新的变量 copiedObj 中。

2) 合并对象

除了复制对象，展开运算符还能够合并两个或多个对象，示例代码如下：

const obj1 = { name: 'Tom', age: 18 };
const obj2 = { sex: '男' };
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // 输出：{ name: 'Tom', age: 18, sex: '男' }

通过将多个对象放在对象展开运算符中并使用逗号分隔，可以将它们合并为一个新的对象。

JavaScript 展开运算符为开发者提供了一种方便而强大的工具，可以轻松地复制和合并数组、对象，甚至将字符串转换为数组。通过灵活运用展开运算符，我们能够大大简化代码，并提高开发效率。