javascript展开运算符是什么？它如何合并数组或对象？

展开运算符是JavaScript ES6引入的语法特性，符号为三个点...，它可以将数组、对象等可迭代对象展开为独立的元素，在很多场景下都能简化代码逻辑，其中最常见的用途就是合并数组和对象。

展开运算符的基本定义

展开运算符的核心作用是把可迭代对象（比如数组、字符串、Set等）或者对象的自身可枚举属性，在语法层面展开成独立的个体。它既可以用在数组相关的操作中，也可以用在对象相关的操作中，使用场景非常灵活。

简单来说，当你在数组字面量、函数调用或者对象字面量中使用...加上一个可迭代对象时，这个可迭代对象就会被展开成对应的单个元素或者属性。

使用展开运算符合并数组

合并数组是展开运算符非常典型的使用场景，相比传统的concat方法，用展开运算符合并数组的语法更直观，代码可读性也更高。

合并两个数组

只需要把两个数组都用展开运算符展开，放在一个新的数组字面量中，就能得到合并后的新数组，原数组不会被修改。

// 定义两个原始数组
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// 使用展开运算符合并数组
const mergedArr = [...arr1, ...arr2];

console.log(mergedArr); // 输出 [1, 2, 3, 4, 5, 6]
console.log(arr1); // 输出 [1, 2, 3]，原数组未被修改
console.log(arr2); // 输出 [4, 5, 6]，原数组未被修改

合并多个数组

如果有多个数组需要合并，同样可以把所有数组都用展开运算符展开，放在新数组中即可，不需要多次调用concat方法。

const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];
const arr3 = ['e', 'f'];

const mergedArr = [...arr1, ...arr2, ...arr3];
console.log(mergedArr); // 输出 ["a", "b", "c", "d", "e", "f"]

在合并时添加新元素

展开运算符合并数组的时候，还可以在新数组的任意位置添加额外的元素，顺序完全由你决定。

const arr1 = [1, 2];
const arr2 = [5, 6];

// 在两个数组中间添加元素3、4
const mergedArr = [...arr1, 3, 4, ...arr2];
console.log(mergedArr); // 输出 [1, 2, 3, 4, 5, 6]

使用展开运算符合并对象

展开运算符同样可以用来合并对象，它会把源对象的所有可枚举属性复制到目标对象中，这个特性在ES6之后被广泛使用，替代了很多需要手动遍历对象属性的场景。

合并两个对象

把两个对象用展开运算符展开，放在一个新的对象字面量中，就能得到合并后的新对象，如果属性名有重复，后面的对象的属性会覆盖前面对象的同名属性。

// 定义两个原始对象
const obj1 = { name: '张三', age: 20 };
const obj2 = { gender: '男', city: '北京' };

// 使用展开运算符合并对象
const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); // 输出 { name: '张三', age: 20, gender: '男', city: '北京' }
console.log(obj1); // 输出 { name: '张三', age: 20 }，原对象未被修改
console.log(obj2); // 输出 { gender: '男', city: '北京' }，原对象未被修改

处理同名属性的合并

当合并的多个对象存在同名属性时，排在后面的对象的属性值会覆盖前面的，这个特性可以用来给对象设置默认值或者覆盖特定属性。

const defaultConfig = { timeout: 3000, retry: 2, log: false };
const userConfig = { timeout: 5000, log: true };

// 用户配置覆盖默认配置
const finalConfig = { ...defaultConfig, ...userConfig };
console.log(finalConfig); // 输出 { timeout: 5000, retry: 2, log: true }

合并多个对象

和数组合并一样，合并多个对象也只需要把所有对象都用展开运算符展开放在新对象中即可。

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };

const mergedObj = { ...obj1, ...obj2, ...obj3 };
console.log(mergedObj); // 输出 { a: 1, b: 2, c: 3 }

使用展开运算符合并的注意事项

• 展开运算符合并数组和对象都是浅拷贝，如果数组或对象中包含引用类型的元素，拷贝的是引用地址，修改拷贝后的值会影响原数据。
• 展开运算符只能展开可迭代对象，比如数组、字符串、Set、Map等，不能直接展开普通的对象（不过在对象字面量中使用展开运算符展开对象是ES2018引入的特性，属于例外情况）。
• 函数调用时使用展开运算符传参，会把数组展开成多个参数，比如Math.max(...[1,2,3])等价于Math.max(1,2,3)。

展开运算符是JavaScript中非常实用的语法糖，掌握它合并数组和对象的方法，可以让你的代码更简洁，减少不必要的冗余逻辑，建议在日常开发中多尝试使用。

javascript展开运算符数组合并对象合并spread_operator修改时间：2026-07-11 02:24:26