
JavaScript 的展开运算符(Spread Operator)是三个英文句点 ...,它能把可迭代对象(如数组、字符串)或类数组对象“打散”成独立的元素,也支持将对象的属性逐个展开。它常用于数组合并、对象合并、函数调用传参等场景,写法简洁且可读性强。
用展开运算符合并数组
传统方式合并数组常用 concat() 或手动 push,而展开运算符让操作更直观:直接把一个数组“铺开”,再与其他元素一起组成新数组。
- 合并两个或多个数组:
const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = [...arr1, ...arr2]; // [1, 2, 3, 4] - 在开头/中间插入元素:
const nums = [2, 3];
const withHead = [1, ...nums, 4]; // [1, 2, 3, 4] - 浅拷贝数组(避免修改原数组):
const original = [1, 2, 3];
const copy = [...original];
用展开运算符合并对象
对象展开会把自身可枚举属性(不含原型链上的)复制到新对象中。多个对象展开时,**后出现的同名属性会覆盖前面的**,这点和 Object.assign() 行为一致。
- 基础合并:
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 }; // { a: 1, b: 3, c: 4 } - 添加/覆盖属性:
const base = { x: 10 };
const extended = { ...base, y: 20, x: 99 }; // { x: 99, y: 20 } - 注意:只做一层浅合并,嵌套对象不会递归处理。
若需深合并,得配合其他方法(如结构化克隆或第三方库)。
常见注意事项
- 展开运算符只能用在表达式位置,不能单独一行写
...arr,否则语法错误。 - 对对象使用时,不支持 Set、Map 等非普通对象的直接展开(但可用
[...map.keys()]展开其键或值)。 - 展开 null 或 undefined 会报错,建议合并前做判空处理,例如:
{ ...(obj || {}), name: 'test' } - 与剩余参数(Rest Parameter)符号相同(
...),但语义相反:展开是“拆”,剩余是“收”。











