ES6扩展运算符：从基础到实战的全方位解析

在ES6引入的众多新特性中，扩展运算符绝对是实用性拉满的"明星特性"之一。它以简洁的...语法，轻松解决了数组和对象的复制、合并、传参等常见问题，极大地简化了代码逻辑。今天，我们就从基础概念到实战场景，全方位拆解扩展运算符的用法，让你彻底吃透这个高效工具。

一、什么是扩展运算符？

扩展运算符用三个连续的点...表示，其核心作用是"展开"可迭代对象（如数组、字符串、Set、Map等）或"浅复制"对象的可枚举属性。简单来说，它能把一个集合中的元素或对象的属性"拆解"出来，单独使用或重组到新的结构中。

需要注意的是：扩展运算符是"浅操作"，不会递归处理嵌套结构；同时，它仅对可迭代对象和普通对象有效，对null、undefined等原始值使用会报错。

二、数组中的核心用法（最常用场景）

数组是扩展运算符最常发挥作用的场景，无论是复制、合并还是传参，都能让代码变得无比简洁。

1. 数组复制：避免引用传递的"坑"

在ES6之前，我们复制数组时如果直接用赋值语句（如let arr2 = arr1），得到的其实是数组的引用，修改arr2会同时改变arr1。而扩展运算符能轻松实现数组的浅复制，生成一个全新的数组。

// 传统方式（引用复制，有风险）
const arr1 = [1, 2, 3];
const arr2 = arr1;
arr2.push(4);
console.log(arr1); // [1,2,3,4]（arr1被意外修改）

// 扩展运算符（浅复制，安全）
const arr3 = [1, 2, 3];
const arr4 = [...arr3];
arr4.push(4);
console.log(arr3); // [1,2,3]（arr3不受影响）
console.log(arr4); // [1,2,3,4]

注意：如果数组是嵌套结构（如二维数组），扩展运算符仅复制外层数组，内层数组仍为引用传递，此时需要结合递归或其他方法实现深复制。

2. 数组合并：替代concat的简洁方案

在没有扩展运算符时，我们通常用concat()方法合并数组，而扩展运算符能以更直观的方式实现多数组合并。

// 传统concat方式
const arrA = [1, 2];
const arrB = [3, 4];
const arrC = arrA.concat(arrB);
console.log(arrC); // [1,2,3,4]

// 扩展运算符方式
const arrD = [...arrA, ...arrB];
console.log(arrD); // [1,2,3,4]

// 合并多个数组并添加新元素
const arrE = [0, ...arrA, 2.5, ...arrB, 5];
console.log(arrE); // [0,1,2,2.5,3,4,5]

可以看到，扩展运算符不仅能合并数组，还能在合并过程中灵活插入新元素，比concat()的扩展性更强。

3. 函数传参：替代apply的"神操作"

当我们需要将数组中的元素作为函数的单个参数传递时，传统方式需要用Function.prototype.apply()，而扩展运算符能直接"展开"数组作为参数，代码更简洁易懂。

// 需求：求数组中元素的最大值
const nums = [10, 20, 5, 15];

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

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

// 多参数场景：传递数组元素+固定参数
function sum(a, b, c) {
  return a + b + c;
}
const params = [10, 20];
const total = sum(...params, 30); // 相当于sum(10,20,30)
console.log(total); // 60

4. 解构赋值结合：灵活提取数组元素

扩展运算符与数组解构赋值结合使用时，可以轻松提取数组的"剩余元素"，尤其适合获取数组的前几个元素后，收集剩下的所有元素。

const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3,4,5]（剩余元素组成的新数组）

// 注意：扩展运算符在解构中只能放在最后一位
const [a, ...b, c] = [1,2,3,4]; // 报错：Rest element must be last element

三、对象中的核心用法（ES2018新增）

ES2018（ES9）将扩展运算符的功能扩展到了对象上，使其能实现对象的浅复制、属性合并等操作，替代了传统的Object.assign()方法的部分场景。

1. 对象复制：浅复制可枚举属性

与数组复制类似，扩展运算符能实现对象的浅复制，生成一个新对象，修改新对象不会影响原对象（仅外层属性，嵌套对象仍为引用）。

const user = { name: "张三", age: 25 };

// 扩展运算符复制
const userCopy = { ...user };
userCopy.age = 26;
console.log(user); // { name: "张三", age: 25 }（原对象不变）
console.log(userCopy); // { name: "张三", age: 26 }

2. 对象合并：处理属性覆盖

扩展运算符可以合并多个对象的属性到一个新对象中，如果存在同名属性，后面的对象会覆盖前面的对象的属性（这一点与Object.assign()一致）。

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

// 扩展运算符合并
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // { a: 1, b: 3, c: 4 }（obj2的b覆盖了obj1的b）

// 合并时添加新属性
const newObj = { ...obj1, d: 5, ...obj2 };
console.log(newObj); // { a: 1, b: 3, c: 4, d: 5 }

3. 解构赋值结合：提取剩余属性

扩展运算符与对象解构赋值结合时，可以提取对象的部分属性，同时将剩余的属性收集到一个新对象中。

const person = { name: "李四", age: 30, gender: "男", city: "北京" };

// 解构提取部分属性，剩余属性用...收集
const { name, age, ...otherInfo } = person;
console.log(name); // 李四
console.log(age); // 30
console.log(otherInfo); // { gender: "男", city: "北京" }

四、其他实用场景

除了数组和对象，扩展运算符还能作用于其他可迭代对象，如字符串、Set、Map等，实现一些巧妙的功能。

1. 字符串转数组

扩展运算符可以将字符串拆分为单个字符组成的数组，比split('')更简洁，且能正确处理Unicode字符（如emoji）。

// 普通字符串
const str = "hello";
const strArr = [...str];
console.log(strArr); // ["h","e","l","l","o"]

// 含Unicode字符的字符串
const emojiStr = "😀abc";
const emojiArr1 = [...emojiStr];
const emojiArr2 = emojiStr.split('');
console.log(emojiArr1); // ["😀","a","b","c"]（正确）
console.log(emojiArr2); // ["�","�","a","b","c"]（错误，split无法正确处理emoji）

2. Set/Map转数组

Set和Map都是可迭代对象，扩展运算符可以轻松将它们转换为数组，简化数据处理。

// Set转数组
const set = new Set([1, 2, 2, 3]); // Set自动去重
const setArr = [...set];
console.log(setArr); // [1,2,3]

// Map转数组（得到[key, value]形式的二维数组）
const map = new Map([["name", "王五"], ["age", 28]]);
const mapArr = [...map];
console.log(mapArr); // [["name","王五"], ["age",28]]

五、注意事项与常见坑

1. 浅操作限制 ：扩展运算符仅实现浅复制/浅合并，对于嵌套数组或嵌套对象，内层结构仍为引用传递，修改会影响原数据。如需深复制，可结合JSON.parse(JSON.stringify())（适用于简单数据）或第三方库（如Lodash的cloneDeep）。

2. 可迭代对象限制：扩展运算符仅对可迭代对象（数组、字符串、Set、Map、类数组对象等）有效，对null、undefined、数字、布尔值等原始值使用会报错。

3. 对象属性限制 ：扩展运算符仅复制对象的可枚举属性，不可枚举属性（如通过Object.defineProperty定义的enumerable: false的属性）不会被复制。

4. 解构位置限制：在数组或对象解构中，扩展运算符必须放在最后一位，否则会报错。

六、总结

扩展运算符以...这一简洁语法，解决了数组和对象的复制、合并、传参等核心问题，替代了传统的concat、apply、Object.assign等方法，让代码更简洁、直观。掌握它的核心用法（数组/对象的复制、合并、解构结合），并注意浅操作的限制，就能在实际开发中大幅提升效率。

赶紧把扩展运算符用起来，让你的代码更具"ES6风格"吧！如果有其他实用场景，欢迎在评论区补充~