javascript扩展运算符(...)用于将可迭代对象元素平铺到当前上下文:实现数组合并、浅拷贝、set去重转换、函数参数展开等功能,但不自动去重或深层扁平化。

JavaScript 中的扩展运算符(...)不是“万能点”,而是有明确语义的语法工具:它把可迭代对象(如数组、Set、字符串等)的每个元素“拆出来”,平铺到当前上下文中。用在数组和集合上,核心价值是避免手动循环、减少 API 依赖,让合并、复制、转换更直观。
数组合并与拼接
替代 concat(),一行搞定多数组组合,顺序即写法顺序:
const a = [1, 2]; const b = [3]; const c = [4, 5, 6]; const all = [...a, ...b, ...c]; // [1, 2, 3, 4, 5, 6]- 支持混合字面量:
[...a, 0, ...b, 'end']直接插入原始值或其它结构 - 注意:不会去重,也不会扁平化嵌套数组(
[...[1, [2, 3]]]得到[1, [2, 3]],不是[1, 2, 3])
数组浅拷贝与解构配合
创建新数组引用,避免意外修改原数组;结合解构还能灵活提取部分元素:
const original = [1, 2, 3]; const copy = [...original]; // 独立副本const [first, ...rest] = [10, 20, 30, 40]; // first=10, rest=[20, 30, 40]- ⚠️ 浅拷贝只作用于第一层:若原数组含对象或子数组,内部引用仍共享
Set 去重转数组与反向操作
利用 Set 自动去重特性,配合扩展运算符实现一行去重或数组→Set 转换:
const arr = [1, 2, 2, 3, 3]; const unique = [...new Set(arr)]; // [1, 2, 3]const set = new Set(['a', 'b']); const arrFromSet = [...set]; // ['a', 'b']- 也可用于 Map 的键或值遍历:
[...myMap.keys()]、[...myMap.values()]
函数调用时展开参数
把数组变成独立实参,替代老旧的 apply(),尤其适合 Math 等内置函数:
Math.max(...[7, 2, 9]); // 9(等价于 Math.max(7, 2, 9))console.log(...['hello', 'world']); // 输出两个独立参数,非一个数组- 适用于任意接受多个参数的函数,包括自定义函数和 DOM 方法(如
element.classList.add(...classes))
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











