展开运算符(...)是JavaScript中用于展开可迭代对象的语法,支持数组复制合并、函数传参、对象浅合并与解构,但仅限浅拷贝、不可单独使用、不适用于null/undefined。

展开运算符(...)是 JavaScript 中用于“展开”可迭代对象(如数组、字符串、类数组对象,或对象的键值对)的语法。它不是函数也不是方法,而是一种解构和组合数据的简洁写法。
数组中的展开:合并、复制与传参
在数组上下文中,... 可以把一个数组“打散”成独立元素,方便拼接或传入函数。
- 复制数组:const newArr = [...oldArr]; —— 浅拷贝,比
slice()或Array.from()更直观 - 合并数组:const combined = [...arr1, ...arr2, 4, 5]; —— 不修改原数组,支持插入字面量
- 函数调用传参:Math.max(...numbers); —— 替代
apply(),直接展开为参数列表
对象中的展开:浅合并与解构赋值
对象展开只适用于普通对象(非 null/undefined),会按属性顺序依次覆盖同名键。
- 合并对象:const user = { ...defaults, ...overrides }; —— 后者属性优先,适合配置合并
- 提取并保留剩余属性:const { id, ...rest } = user; ——
rest是不含id的新对象 - 注意:不能展开
null或undefined,否则报错;可配合空值合并操作符:{ ...(obj ?? {}) }
替代 apply 和 arguments 的常见场景
过去需用 func.apply(this, args) 的地方,现在可直接用展开运算符简化。
- 构造实例:new Date(...[2023, 0, 1]); —— 展开数组作为构造函数参数
- 处理类数组对象:const arr = [...document.querySelectorAll('div')]; —— 转为真数组后使用
map/filter - 函数参数收集(配合剩余参数):function sum(...nums) { return nums.reduce((a,b) => a+b, 0); }
注意事项与常见误区
展开运算符功能强大,但有明确限制,误用易引发错误。
- 仅支持可迭代对象(数组、字符串、Map、Set 等),
Object本身不可迭代,所以对象展开是语法特例,非通用迭代行为 - 深度克隆不适用:展开只做一层浅拷贝,嵌套对象仍共享引用
- 性能考虑:对超大数组展开可能触发栈溢出或影响性能,此时应改用循环或
push.apply等替代方案 - 不能单独使用:...arr 必须出现在数组字面量、对象字面量或函数调用中,不能独立成句










