怎样使用展开运算符_它有哪些应用场景

展开运算符（...）是JavaScript中用于展开可迭代对象的语法，支持数组复制合并、函数传参、对象浅合并与解构，但仅限浅拷贝、不可单独使用、不适用于null/undefined。

展开运算符（...）是 JavaScript 中用于“展开”可迭代对象（如数组、字符串、类数组对象，或对象的键值对）的语法。它不是函数也不是方法，而是一种解构和组合数据的简洁写法。

数组中的展开：合并、复制与传参

在数组上下文中，... 可以把一个数组“打散”成独立元素，方便拼接或传入函数。

• 复制数组：const newArr = [...oldArr]; —— 浅拷贝，比 slice() 或 Array.from() 更直观
• 合并数组：const combined = [...arr1, ...arr2, 4, 5]; —— 不修改原数组，支持插入字面量
• 函数调用传参：Math.max(...numbers); —— 替代 apply()，直接展开为参数列表

对象中的展开：浅合并与解构赋值

对象展开只适用于普通对象（非 null/undefined），会按属性顺序依次覆盖同名键。

• 合并对象：const user = { ...defaults, ...overrides }; —— 后者属性优先，适合配置合并
• 提取并保留剩余属性：const { id, ...rest } = user; —— rest 是不含 id 的新对象
• 注意：不能展开 null 或 undefined，否则报错；可配合空值合并操作符：{ ...(obj ?? {}) }

替代 apply 和 arguments 的常见场景

过去需用 func.apply(this, args) 的地方，现在可直接用展开运算符简化。

• 构造实例：new Date(...[2025, 0, 1]); —— 展开数组作为构造函数参数
• 处理类数组对象：const arr = [...document.querySelectorAll('div')]; —— 转为真数组后使用 map/filter
• 函数参数收集（配合剩余参数）：function sum(...nums) { return nums.reduce((a,b) => a+b, 0); }

注意事项与常见误区

展开运算符功能强大，但有明确限制，误用易引发错误。

• 仅支持可迭代对象（数组、字符串、Map、Set 等），Object 本身不可迭代，所以对象展开是语法特例，非通用迭代行为
• 深度克隆不适用：展开只做一层浅拷贝，嵌套对象仍共享引用
• 性能考虑：对超大数组展开可能触发栈溢出或影响性能，此时应改用循环或 push.apply 等替代方案
• 不能单独使用：...arr 必须出现在数组字面量、对象字面量或函数调用中，不能独立成句