JavaScript展开运算符...用法详解

JavaScript的展开运算符（...）是现代前端开发中高效处理数组和对象的利器，它能轻松实现数组合并、浅拷贝、函数参数展开、对象属性覆盖与解构、类数组转换等高频操作，既大幅简化代码（如替代concat、apply、Array.from），又提升可读性与表达力；但需注意其仅支持单层展开，且对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)

对象展开与解构组合

对象展开用于复制属性、合并对象或提取默认值，常和解构赋值配合使用。

• 浅拷贝对象：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，会报错。实际使用中注意数据类型和边界情况即可。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~