JavaScript展开运算符(...)用于将可迭代对象或对象展开为独立元素或属性,支持数组合并与浅拷贝、函数传参、对象合并与解构、类数组转换等,但仅浅层展开且不支持null/undefined。

JavaScript 展开运算符(Spread Operator)用三个点 ... 表示,它的核心作用是将可迭代对象(如数组、字符串、类数组、Map/Set 等)或对象“展开”成独立的元素或属性,从而在需要多个参数、多个值或多个键值对的上下文中使用。
数组合并与浅拷贝
展开运算符最直观的用途是替代 concat() 或 slice() 实现数组操作。
- 合并多个数组:
const arr = [...arr1, ...arr2, ...arr3]; - 快速浅拷贝数组:
const copy = [...original];(比original.slice()更简洁) - 向数组开头/中间插入元素:
const newArr = [0, ...arr, 99];
函数调用传参
当函数接收多个独立参数,而你手头是一个数组时,展开运算符能直接把数组“打散”为参数列表。
- 替代
apply():Math.max(...numbers)可直接求最大值,而不用写Math.max.apply(null, numbers) - 构造新实例时传参:
new Date(...[2023, 0, 1])相当于new Date(2023, 0, 1)
对象展开与解构组合
对象展开用于复制属性、合并对象或提取默认值,常和解构赋值配合使用。
立即学习“Java免费学习笔记(深入)”;
- 浅拷贝对象:
const clone = { ...obj }; - 合并对象(后者覆盖前者同名属性):
const merged = { ...a, ...b }; - 添加/覆盖属性:
const updated = { ...obj, id: 123, name: 'new' }; - 与解构结合提取剩余属性:
const { id, ...rest } = obj;(rest是不含id的新对象)
替代 Array.from() 和处理类数组
对类数组对象(如 arguments、NodeList)可直接展开转为真数组,便于使用数组方法。
-
const args = [...arguments];(ES6+ 中更推荐用剩余参数...args) const buttons = [...document.querySelectorAll('button')].map(btn => btn.textContent);- 字符串展开为字符数组:
[...'hello'] → ['h','e','l','l','o']
不复杂但容易忽略:展开运算符只做一层浅展开,嵌套数组或对象不会递归处理;它也不能直接展开 null 或 undefined,会报错。实际使用中注意数据类型和边界情况即可。











