展开运算符...是JavaScript中对可迭代对象或类数组对象进行逐项取出的操作符;它只在需多个独立值的位置生效,如函数调用、数组/对象字面量中,不可单独使用或在赋值左侧。

展开运算符 ... 是什么,不是什么
它不是语法糖的包装纸,也不是万能胶水。它是 JavaScript 中对可迭代对象(如数组、字符串、Map、Set)或类数组对象(如 arguments、NodeList)进行「逐项取出」的操作符。关键点在于:它只在「需要多个独立值」的位置生效,比如函数调用、数组字面量、对象字面量中——在赋值语句左侧或单独一行写 ... 会直接报错 SyntaxError: Unexpected token ...。
数组合并与浅拷贝时怎么用 ...
这是最不容易出错的场景,但要注意浅拷贝陷阱。
-
[...arr1, ...arr2]比arr1.concat(arr2)更直观,且支持任意多个数组拼接 -
[...arr]是最常用的数组浅拷贝方式,比arr.slice()或Array.from(arr)更简洁 - 如果
arr里有嵌套对象,[...arr]只复制第一层引用,修改newArr[0].x仍会影响原数组中的对应项 - 不能用于类数组对象(如
document.querySelectorAll('div'))直接展开进数组字面量,得先确保环境支持或加一层Array.from()包裹
函数调用中替代 apply 的细节差异
用 fn(...args) 替代 fn.apply(null, args) 看似等价,但有两处实际影响:
- 参数数量限制不同:
apply在旧引擎中有参数长度上限(如 Chrome 栈空间限制,但通常更宽松 -
...展开的是「真实参数」,所以console.log(...[1, 2, 3])等价于console.log(1, 2, 3),而非一个数组;而apply第二个参数必须是数组/类数组 - 不能展开
null或undefined,会抛TypeError: undefined is not iterable;apply对null作为第二个参数是允许的(视作空数组)
对象展开时哪些坑会让代码静默失败
对象展开({...obj})只处理自身可枚举属性,且按顺序覆盖——这既是特性也是雷区。
立即学习“Java免费学习笔记(深入)”;
- 原型链上的属性、
Symbol键、不可枚举属性(如Object.defineProperty(obj, 'x', { enumerable: false }))全部丢失 - 同名键按展开顺序后出现的覆盖前出现的:
{...a, ...b}中b的同名属性会覆盖a的 - 不能展开
null或undefined,但{...(obj || {})}是常见防御写法 - 深层合并不存在:
{...a, ...b}不会递归合并嵌套对象,只是顶层替换——要深克隆或深合并得靠structuredClone或第三方库
真正容易被忽略的是:对象展开在解构赋值左侧不合法,比如 const {...rest} = obj 是错的;正确写法是 const { x, y, ...rest } = obj,且 ... 必须是最后一个属性。











