




展开运算符(...)是JavaScript中将可迭代对象解包为独立值的底层能力,用于数组合并、函数传参、浅拷贝、类数组转换等,但不支持深拷贝、null/undefined展开及原型属性继承。
展开运算符(...)不是语法糖,是 JavaScript 中真正改变数据操作方式的底层能力——它把“可迭代对象”转成一串独立值,不是复制,而是解包。
最常见用途:替代 Array.prototype.concat() 或 Array.prototype.push.apply()。它不修改原数组,只生成新结构。
[...arr1, ...arr2] 合并数组比 arr1.concat(arr2) 更直观,且支持多个源、中间插入字面量(如 [...a, 0, ...b])Math.max(...numbe
rs) 可直接展开,避免写 Math.max.apply(null, numbers)
const copy = [...original],但注意嵌套对象仍共享引用arguments、NodeList)为真数组:[...document.querySelectorAll('div')]
对象展开只处理**自身可枚举属性**,且按声明顺序覆盖——后写的同名键会覆盖前面的。
{ ...a, ...b } 等价于 Object.assign({}, a, b),但不能展开 null 或 undefined(会报 TypeError: Cannot spread non-iterable instance)Object.getOwnPropertySymbols() 配合)const obj = { x: { y: 1 } }; const copy = { ...obj };,修改 copy.x.y 仍会影响 obj.x.y
...rest 和展开运算符不是一回事?虽然都用 ... 符号,但语义相反:一个是「收」(rest 参数),一个是「放」(展开)。混淆会导致常见错误。
function f(a, ...rest) { },rest 是数组;展开用于调用或字面量:f(...arr)
[first, ...middle, last])function(...[]) {} 报错),但展开允许空数组:[...[], 1] → [1]
不是所有“看起来像集合”的东西都能展开,关键看是否实现了 Symbol.iterator。
Array、String、Map、Set、生成器函数返回值等)arguments 在非箭头函数中可用,但箭头函数没有 arguments,得靠 rest 参数代替HTMLCollection)在较老浏览器(如 IE)中不支持展开,需先转成数组undefined 或 null 直接抛错,建议加判断:...(arr ?? [])
真正容易被忽略的是:展开运算符的执行时机是**运行时解包**,不是编译期宏替换。这意味着它依赖目标值的实际类型和迭代器实现,动态性高,但也意味着出错往往在数据进入时才暴露,而不是写代码时。