javascript展开运算符是什么_有哪些应用场景【教程】

展开运算符（...）是JavaScript中将可迭代对象解包为独立值的底层能力，用于数组合并、函数传参、浅拷贝、类数组转换等，但不支持深拷贝、null/undefined展开及原型属性继承。

展开运算符（...）不是语法糖，是 JavaScript 中

真正改变数据操作方式的底层能力——它把“可迭代对象”转成一串独立值，不是复制，而是解包。

展开运算符在数组中怎么用？

最常见用途：替代 Array.prototype.concat() 或 Array.prototype.push.apply()。它不修改原数组，只生成新结构。

• [...arr1, ...arr2] 合并数组比 arr1.concat(arr2) 更直观，且支持多个源、中间插入字面量（如 [...a, 0, ...b]）
• 函数调用时传参：Math.max(...numbers) 可直接展开，避免写 Math.max.apply(null, numbers)
• 浅拷贝数组：const copy = [...original]，但注意嵌套对象仍共享引用
• 转换类数组对象（如 arguments、NodeList）为真数组：[...document.querySelectorAll('div')]

对象展开有哪些限制和陷阱？

对象展开只处理**自身可枚举属性**，且按声明顺序覆盖——后写的同名键会覆盖前面的。

• 合并对象：{ ...a, ...b } 等价于 Object.assign({}, a, b)，但不能展开 null 或 undefined（会报 TypeError: Cannot spread non-iterable instance）
• 无法展开原型链上的属性，也不能展开 symbol 键（除非显式用 Object.getOwnPropertySymbols() 配合）
• 深拷贝？不行。例如 const obj = { x: { y: 1 } }; const copy = { ...obj };，修改 copy.x.y 仍会影响 obj.x.y

为什么函数参数里用 ...rest 和展开运算符不是一回事？

虽然都用 ... 符号，但语义相反：一个是「收」（rest 参数），一个是「放」（展开）。混淆会导致常见错误。

• rest 参数用于函数定义：function f(a, ...rest) { }，rest 是数组；展开用于调用或字面量：f(...arr)
• rest 只能出现在参数列表末尾；展开可以出现在任意位置（如 [first, ...middle, last]）
• rest 不接受空位（function(...[]) {} 报错），但展开允许空数组：[...[], 1] → [1]

哪些地方不能用展开运算符？

不是所有“看起来像集合”的东西都能展开，关键看是否实现了 Symbol.iterator。

• 普通对象默认不可展开（会报错），必须是可迭代对象（Array、String、Map、Set、生成器函数返回值等）
• arguments 在非箭头函数中可用，但箭头函数没有 arguments，得靠 rest 参数代替
• DOM 元素集合（如 HTMLCollection）在较老浏览器（如 IE）中不支持展开，需先转成数组
• 展开 undefined 或 null 直接抛错，建议加判断：...(arr ?? [])

真正容易被忽略的是：展开运算符的执行时机是**运行时解包**，不是编译期宏替换。这意味着它依赖目标值的实际类型和迭代器实现，动态性高，但也意味着出错往往在数据进入时才暴露，而不是写代码时。