扩展运算符...args

扩展运算符（Spread Operator）是 JavaScript 中一个非常实用的语法特性，用三个点 ... 表示。它允许将可迭代对象（如数组、字符串、Set、Map 等）“展开”为多个独立的元素，或者在对象字面量中复制对象的属性。

---

一、在数组中的使用

1. 展开数组

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

运行结果如下

 

2. 合并数组

const a = [1, 2];
const b = [3, 4];
const c = [...a, ...b]; // [1, 2, 3, 4]

3. 浅拷贝数组（创建新数组）

const original = [1, 2, 3];
const copy = [...original];
// 修改 copy 不会影响 original
copy.push(4,5,6);

console.log(original)
console.log(copy)

运行结果如下

⚠️ 注意：这是浅拷贝，如果数组包含对象，对象引用仍会共享。

二、在函数调用中的使用

替代 apply()，将数组作为参数传入函数：

// 需求：求数组中最大数
const nums = [10, 20, 5];

// 传统方式
const max1 = Math.max.apply(null, nums); // 20

// 扩展运算符方式（更直观）
const max2 = Math.max(...nums); // 20
console.log(max2);

三、在对象中的使用（ES2018+）

1. 复制对象

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

2. 合并对象

const user = { name: 'Alice' };
const details = { age: 25, city: 'Beijing' };
const profile = { ...user, ...details };
// { name: 'Alice', age: 25, city: 'Beijing' }

🔸 如果有同名属性，后面的会覆盖前面的。

3. 操作字符串

 

把字符串拆成单个字符的数组：

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

四、与剩余参数（Rest Parameters）的区别

虽然语法相同（都是 ...），但用途不同：

• 扩展运算符：用于“展开”已有数据。
• 剩余参数：用于“收集”函数中多余的参数。

// 剩余参数（收集）
function foo(...args) {
  console.log(args); // 数组
}
foo(1, 2, 3); // [1, 2, 3]

// 扩展运算符（展开）
const nums = [1, 2, 3];
foo(...nums); // 等价于 foo(1, 2, 3)

五、注意事项

 

1. 1. 浅拷贝限制：如果数组 / 对象里包含引用类型（比如嵌套对象、数组），扩展运算符只能拷贝外层，内层还是引用（修改内层会影响原数据）：

const obj = { name: "张三", info: { score: 90 } };
const objCopy = { ...obj };
objCopy.info.score = 80;
console.log(obj.info.score); // 80（原数据也变了）

  2、可迭代对象限制：扩展运算符只能用于 “可迭代对象”（数组、字符串、Set、Map、对象（特殊）等），普通数字 / 布尔值不能用：

// 错误：Uncaught TypeError: 123 is not iterable
// console.log(...123);

总结

 

1. 1. 扩展运算符 ... 的核心是 **“展开” 可迭代对象为单个元素 / 键值对 **，与剩余参数作用相反；
   2. 最常用场景：数组 / 对象的复制、合并，以及将数组作为函数参数传递；
   3. 注意扩展运算符做的是浅拷贝，嵌套的引用类型会共享内存。