展开运算符(...)是JavaScript中将可迭代对象或对象展开为独立元素的语言特性,用于数组复制拼接、对象合并解构、函数参数传递等,但不可展开null/undefined,且仅浅拷贝。

展开运算符(Spread Operator)是 JavaScript 中的 ...,它能把可迭代对象(如数组、字符串、类数组)或对象“展开”成独立的元素,常用于复制、合并、解构等场景。它不是语法糖,而是有明确语义和运行时行为的语言特性。
数组展开:快速复制与拼接
用 [...arr] 可以浅拷贝数组,避免引用污染;多个数组还能直接拼接,比 concat() 更直观。
-
复制数组:
const newArr = [...oldArr];(注意:只深拷贝第一层) -
合并数组:
const all = [...a, ...b, 100];—— 支持在任意位置插入值 -
转类数组为真数组:
[...document.querySelectorAll('div')]或[...arguments](ES5 中常用)
对象展开:解构赋值与属性覆盖
对象展开写法是 {...obj},常用于创建新对象、默认值填充、状态更新等,顺序决定属性是否被覆盖。
-
合并对象:
const user = {...defaults, ...overrides};—— 后面的同名属性会覆盖前面的 -
剔除指定属性:
const {id, ...rest} = user;配合展开,轻松实现“除某字段外全部保留” -
函数参数默认值兜底:
function create({name = 'anonymous', ...opts} = {}) { ... }
函数调用:替代 apply 的简洁写法
把数组“打散”传给函数,尤其适合 Math 方法、构造函数或需要多参数的 API。
技术上面应用了三层结构,AJAX框架,URL重写等基础的开发。并用了动软的代码生成器及数据访问类,加进了一些自己用到的小功能,算是整理了一些自己的操作类。系统设计上面说不出用什么模式,大体设计是后台分两级分类,设置好一级之后,再设置二级并选择栏目类型,如内容,列表,上传文件,新窗口等。这样就可以生成无限多个二级分类,也就是网站栏目。对于扩展性来说,如果有新的需求可以直接加一个栏目类型并新加功能操作
立即学习“Java免费学习笔记(深入)”;
-
找数组最大值:
Math.max(...numbers)(Math.max.apply(null, numbers)的现代写法) -
动态 new 实例:
new Date(...[2023, 0, 1])(需确保参数个数和类型匹配) -
批量传参给函数:
someFn(...argsArray),比循环 push 再 call 清晰得多
常见陷阱与注意事项
展开运算符方便但不万能,理解边界才能少踩坑。
-
不能展开 null/undefined —— 会直接报错
TypeError,建议先做存在性判断或提供默认空数组/对象 -
只做浅拷贝 —— 嵌套对象或数组仍共享引用,深层结构需用递归或结构化克隆(如
structuredClone) -
对象展开不支持动态键表达式 ——
{...obj, [key]: value}是合法的,但{...obj, key: value}中的key是字面量,不是变量










