javascript展开数组运算符...

在 JavaScript 中，展开数组运算符（Spread Operator）是一种强大的语法糖，用三个连续的点（...）表示。它允许你将数组或类数组对象展开为单个元素，从而简化数组操作。下面我将详细介绍它的用法和常见场景。

基本用法

1. 复制数组

展开运算符可以创建数组的浅拷贝，避免引用问题：

const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // [1, 2, 3]
console.log(copy === original); // false（地址不同）

2. 合并数组

合并多个数组时，展开运算符比 concat() 更简洁：

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

3. 解构赋值

结合解构赋值，提取数组的部分元素：

const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest);  // [2, 3, 4]

应用场景

1. 函数参数展开

将数组元素作为独立参数传递给函数：

const numbers = [1, 2, 3];
console.log(Math.max(...numbers)); // 3

2. 字符串转数组

将字符串展开为字符数组：

const str = "hello";
const chars = [...str];
console.log(chars); // ['h', 'e', 'l', 'l', 'o']

3. Set 转数组（去重）

利用 Set 自动去重，再用展开运算符转回数组：

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

4. 类数组对象转数组

将 arguments、DOM 节点列表等转为真正的数组：

function example() {
  const args = [...arguments];
  console.log(args); // [1, 'a', true]
}
example(1, 'a', true);

与 concat() 的对比

展开运算符更直观，支持嵌套数组的展开：

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

// 展开运算符
const merged1 = [...arr1, ...arr2, ...arr3];

// concat()
const merged2 = arr1.concat(arr2, arr3);

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

注意事项

1. 深拷贝问题：展开运算符只创建浅拷贝，嵌套对象仍会共享引用：

const original = [{ id: 1 }];
const copy = [...original];
copy[0].id = 2;
console.log(original[0].id); // 2（被修改）

2. 兼容性：展开运算符是 ES6 特性，旧浏览器（如 IE）需通过 Babel 转译。

总结

展开数组运算符 ... 简化了数组操作，让代码更简洁。常见用途包括：

• 数组复制、合并
• 函数参数展开
• 字符串 / 类数组转数组
• 数组去重

在实际开发中，它是处理数组的得力工具。

参考：豆包AI