你以为你懂 ...？其实坑才刚开始！

前言

在前端圈里，有一个操作符被称作「万能胶水」，有点像哆啦 A 梦的百宝袋，什么都能掏出来，它就是 JavaScript 的扩展运算符 ...，俗称"三点运算符"。

null

虽然看起来只是三个小点点，但用好了，代码能优雅到飞起；用不好，就像胶水乱涂一通，搞得代码又黏又臭。

今天，我们就来盘一盘这三个点到底都能干啥，有啥坑，又该怎么写得更优雅。

---

数组的"复制+拼接"，so easy！

很多时候我们想复制数组，或者合并多个数组。如果你还在用 slice 或 concat，那你真的可以退休了：

✅ 替代 slice：

const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // [1, 2, 3]

这样复制是浅拷贝，不会影响原数组：

copy[0] = 100;
console.log(original[0]); // 依然是 1

✅ 合并数组：

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

是不是比 concat() 更清爽？

---

对象的合并与重写，更丝滑

扩展运算符也能用于对象，但它的行为有点不同：它是按键名覆盖，后面的会覆盖前面的。

const base = { a: 1, b: 2 };
const update = { b: 3, c: 4 };

const result = { ...base, ...update };
console.log(result); // { a: 1, b: 3, c: 4 }

🎯 小心坑！

当对象内嵌结构（比如嵌套对象、数组）时，还是浅拷贝哦！

const obj = { a: { x: 1 } };
const clone = { ...obj };
clone.a.x = 999;
console.log(obj.a.x); // 999，惊不惊喜？

解决方案：用 structuredClone、lodash.cloneDeep 或手撸递归。

---

函数的参数魔术：rest & spread

这三个点还能玩点参数魔法：

✅ spread（拆开参数）：

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

等价于 Math.max(1, 2, 3)，拆得明明白白。

✅ rest（打包参数）：

function sum(...args) {
  return args.reduce((acc, val) => acc + val, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

你可以把任意数量的参数打包进数组，超适合做工具函数。

---

数组解构的隐藏技巧

用 ... 解构数组时，你可以捕获"剩余"的部分，就像用网捞鱼一样：

const [head, ...tail] = [10, 20, 30];
console.log(head); // 10
console.log(tail); // [20, 30]

这在处理响应数据时非常高效，比如：

const [first, ...rest] = data.list;

处理主数据和副数据，优雅又清晰。

---

你可能没注意的细节 ⚠️

❌ 不能乱用在对象中间：

const obj = { a: 1, ...null }; // ❌ 会报错

✅ 可以用在数组/对象的函数参数中：

function logAll(a, b, ...rest) {
  console.log(a, b, rest);
}
logAll(1, 2, 3, 4); // 1 2 [3, 4]

---

✍️ 总结

扩展运算符 ... 其实就是 JavaScript 世界的"万能钥匙"。拼接、解构、打包、展开，一个符号搞定各种场景。

但也别盲目崇拜，像对象嵌套那种场景它就无能为力了。掌握它、理解它、敬畏它，才能写出既简洁又健壮的代码。