展开运算符怎么用？常见使用场景有哪些

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《展开运算符怎么用？常见使用场景有哪些》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

展开运算符（...）是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(...[2023, 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 必须出现在数组字面量、对象字面量或函数调用中，不能独立成句

到这里，我们也就讲完了《展开运算符怎么用？常见使用场景有哪些》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！