1. 基本定义与作用
扩展运算符（Spread Operator）... 是 ES6 引入的语法，用于将可迭代对象（如数组、对象）展开为独立元素，支持数组、对象、函数参数等多种场景。
核心能力：
快速展开数组或对象内容，实现浅拷贝、合并或参数传递等操作。
简化代码逻辑，替代传统 concat()、apply() 等方法。
2. 典型使用场景
场景 1：数组展开代码语言：javascript复制const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = [...arr1, ...arr2]; // [1, 2, 3, 4]
// 替代 concat
const copy = [...arr1]; // [1, 2]（浅拷贝）场景 2：对象展开代码语言：javascript复制const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }
// 合并对象（重复属性后者覆盖前者）
const mergedObj = { ...obj1, b: 3 }; // { a: 1, b: 3 }场景 3：函数参数传递代码语言：javascript复制function sum(a, b, c) { return a + b + c; }
const nums = [1, 2, 3];
sum(...nums); // 6（替代 apply）
// 动态参数场景
const dynamicArgs = [10, 20];
sum(5, ...dynamicArgs); // 35场景 4：解构赋值代码语言：javascript复制const [first, ...rest] = [1, 2, 3];
console.log(first); // 1
console.log(rest); // [2, 3]
const { x, ...others } = { x: 1, y: 2, z: 3 };
console.log(others); // { y: 2, z: 3 }3. 与剩余参数（Rest Parameters）的区别
对比项 扩展运算符 ... 剩余参数 ...
使用位置 数组/对象前、函数调用时参数列表 函数声明时参数列表
作用方向 展开（拆包） 聚合（打包）
典型示例 [...arr]、func(...args) function(a, ...rest) { ... }
4. 注意事项浅拷贝问题：
代码语言：javascript复制const nested = [{ a: 1 }];
const copy = [...nested];
copy.a = 2;
console.log(nested.a); // 2（原对象被修改）嵌套对象/数组的拷贝需使用深拷贝方法（如 JSON.parse(JSON.stringify())）。
不可迭代对象限制：
代码语言：javascript复制const obj = { a: 1 };
[...obj]; // TypeError: obj is not iterable普通对象不可直接展开，但可通过 Object.entries() 转换后使用。
浏览器兼容性：
需注意旧版浏览器（如 IE）不支持，建议使用 Babel 转译。
5. 实际应用案例React 状态更新：代码语言：javascript复制setState(prev => ({ ...prev, count: prev.count + 1 }));
动态生成 DOM 元素：
javascript
Copy Code
const children = [
return
通过合理使用扩展运算符，可显著提升代码简洁性与可读性，尤其适用于数据聚合、状态管理和函数式编程场景。