JavaScript展开运算符是什么？它有哪些实用场景？

JavaScript展开运算符（...）是一种强大而直观的语法机制，用于将可迭代对象（如数组、字符串、Set、Map）或类数组对象（如arguments、NodeList）“逐项取出并铺开”，在函数调用、数组/对象字面量等需要多个独立值的场景中大放异彩；它不仅让数组浅拷贝、合并、去重和参数传递更简洁（如Math.max(...arr)替代apply），还支持对象属性覆盖与剔除等灵活操作，但需警惕其仅限可迭代对象、不支持深拷贝、存在参数数量限制及兼容性等关键边界——掌握这些细节，才能真正用好这个看似简单却暗藏玄机的现代JavaScript利器。

展开运算符 ... 是什么？

它不是语法糖，也不是新函数，而是 JavaScript 中对可迭代对象（如数组、字符串、Map、Set）或类数组对象（如 arguments、NodeList）进行「逐项取出并铺开」的操作符。关键点在于：它只在「需要多个独立值」的位置生效，比如函数调用、数组字面量、对象字面量（ES2018+）中。

数组合并与浅拷贝时为什么用 [...arr] 而不用 arr.slice()？

两者都能实现浅拷贝，但语义和扩展性不同：[...arr] 更直观表达「我要一份一模一样的副本」，且天然支持任意可迭代对象；slice() 仅限数组，且容易被误写成 arr.slice(0, -1) 导致漏项。

常见错误：把 ... 用在非可迭代对象上，比如直接展开 null 或普通对象（不带 Symbol.iterator），会抛出 TypeError: X is not iterable。

实用建议：

• 复制数组优先用 [...arr]，尤其当源可能是 Set 或 arguments 时（[...new Set(arr)] 去重 + 转数组）
• 避免嵌套展开： [...[...arr]] 没必要，等价于 [...arr]
• 性能敏感场景（超大数组）注意：展开运算符会一次性分配新内存，比 for 循环手动 push 略慢

函数调用时传参用 fn(...args) 的真实限制

这是展开最经典也最容易翻车的场景。它把 args 数组里的每一项作为独立参数传给 fn，但受引擎最大参数个数限制（V8 中约 65536）。超限时会报 RangeError: Maximum call stack size exceeded 或类似错误，而非静默失败。

典型使用场景：

• 替代 apply： Math.max(...numbers) 替代 Math.max.apply(null, numbers)
• 组合已有参数： fn('prefix', ...rest, 'suffix') —— 这是 apply 做不到的
• 传入 DOM 方法： console.log(...nodeList) 可直接展开 NodeList（它可迭代）

注意：不能用于构造函数调用（new C(...args) 在 ES2015+ 是合法的，但部分旧环境不支持，需检查兼容性）。

对象展开 {...obj} 和深拷贝的关系

对象展开只做**一层浅拷贝**，嵌套对象仍共享引用。例如：

const a = { x: 1, y: { z: 2 } };
const b = { ...a };
b.y.z = 99;
console.log(a.y.z); // 输出 99 —— 被改了

所以它不能替代 structuredClone 或第三方深拷贝库。但它能方便地做属性覆盖或默认值合并：

• 覆盖默认配置：{ ...defaults, ...overrides }，后者同名属性会覆盖前者
• 剔除某些字段：const { password, ...safeUser } = user;
• 注意：展开顺序很重要，后出现的同名键会覆盖前面的

一个易忽略点：展开对象时，undefined 和 null 会被跳过，但 0、false、'' 都会被保留。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript展开运算符是什么？它有哪些实用场景？》文章吧，也可关注golang学习网公众号了解相关技术文章。