展开运算符是ES6为javascript新增的语法特性，用三个连续的点...表示，作用是将可迭代对象（如数组、字符串、Set等）或者对象的元素、属性展开到对应的上下文中，避免手动逐个遍历取值的繁琐操作。
展开运算符的基本语法
展开运算符的使用场景主要分为数组展开和对象展开两类，语法形式非常简洁。
数组场景下的展开
当展开运算符作用于数组时，会把数组的每个元素依次取出，放到新的数组或者函数参数列表中。
// 数组展开到新数组
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // 输出 [1, 2, 3, 4, 5]
// 展开到函数参数列表
function sum(a, b, c) {
return a + b + c;
}
const nums = [10, 20, 30];
console.log(sum(...nums)); // 输出 60
对象场景下的展开
对象展开是ES2018正式纳入规范的语法，会把对象的所有可枚举属性复制到新的对象中。
const obj1 = { name: '张三', age: 20 };
const obj2 = { ...obj1, gender: '男' };
console.log(obj2); // 输出 { name: '张三', age: 20, gender: '男' }
展开运算符的核心应用场景
1. 数组的复制与合并
传统的数组复制需要通过slice方法或者循环实现，使用展开运算符可以更直观地完成浅拷贝，也可以快速合并多个数组。
// 数组浅拷贝
const originalArr = [1, 2, { id: 1 }];
const copiedArr = [...originalArr];
copiedArr[2].id = 2;
console.log(originalArr[2].id); // 输出 2，说明是浅拷贝
// 数组合并
const arrA = ['a', 'b'];
const arrB = ['c', 'd'];
const mergedArr = [...arrA, ...arrB];
console.log(mergedArr); // 输出 ['a', 'b', 'c', 'd']
2. 对象的复制与合并
对象展开可以实现对象的浅拷贝，也可以快速合并多个对象，后面的属性会覆盖前面的同名属性。
// 对象浅拷贝
const originalObj = { x: 1, y: { z: 2 } };
const copiedObj = { ...originalObj };
copiedObj.y.z = 3;
console.log(originalObj.y.z); // 输出 3，属于浅拷贝
// 对象合并，同名属性覆盖
const baseConfig = { port: 3000, host: '127.0.0.1' };
const customConfig = { port: 8080, debug: true };
const finalConfig = { ...baseConfig, ...customConfig };
console.log(finalConfig); // 输出 { port: 8080, host: '127.0.0.1', debug: true }
3. 函数参数传递
当函数需要接收多个参数，而参数存储在数组中时，可以直接用展开运算符把数组展开为参数列表，不需要使用apply方法。
function multiply(x, y, z) {
return x * y * z;
}
const params = [2, 3, 4];
// 传统方式
console.log(multiply.apply(null, params)); // 输出 24
// 展开运算符方式
console.log(multiply(...params)); // 输出 24，更简洁直观
4. 字符串转数组
展开运算符可以把字符串的每个字符依次展开，快速转换为字符数组，比split('')方法更简洁。
const str = 'hello'; const strArr = [...str]; console.log(strArr); // 输出 ['h', 'e', 'l', 'l', 'o']
5. 类数组对象转数组
像arguments对象、DOM获取的节点集合这类类数组对象，没有数组的原生方法，用展开运算符可以快速转换为真正的数组。
function test() {
// arguments是类数组对象
const argsArr = [...arguments];
console.log(Array.isArray(argsArr)); // 输出 true
console.log(argsArr); // 输出传入的所有参数组成的数组
}
test(1, 2, 3);
注意事项
- 展开运算符执行的是浅拷贝，如果展开的是引用类型数据，拷贝的是引用地址，修改拷贝后的值会影响原数据。
- 对象展开只会复制可枚举的自有属性，不会复制原型链上的属性。
- 展开运算符和剩余参数都用
...表示，但使用场景不同：剩余参数是把多个参数收集为一个数组，展开运算符是把数组或对象展开为多个元素或属性。
展开运算符是javascript中非常实用的语法糖，熟练掌握它的用法可以大幅简化日常开发的代码逻辑，提升代码的可读性。
javascript展开运算符spread_operatorES6语法修改时间：2026-06-10 03:57:15