17370845950

JavaScript展开运算符（...）是ES6引入的解构工具，用于在数组字面量、对象字面量或函数调用中将可迭代对象摊开为独立元素，支持合并数组/对象、函数传参、浅拷贝及字符串转数组等场景。

JavaScript 展开运算符（...）是 ES6 引入的语法，作用是把一个可迭代对象（比如数组、字符串、对象、Set、Map 等）“摊开”成独立的元素。它不是万能的魔法符号，而是一个明确的解构工具——只在特定上下文中生效，比如数组字面量 []、对象字面量 {} 或函数调用 () 中。

合并数组和对象

这是最直观的用途。不用再写 concat() 或手动遍历拼接：

• 合并两个数组：const newArr = [...arr1, ...arr2];
• 在中间插入值：const result = [...arr1, 'new', ...arr2];
• 合并对象：const newObj = { ...obj1, ...obj2 }; 后者属性会覆盖前者同名属性
• 添加/覆盖单个字段：const updated = { ...user, age: 27 };

函数调用传参

当参数已经在一个数组里，直接展开就能按位置传入：

• Math.max(...[1, 5, 3]); // 5，替代 Math.max.apply(null, arr)
• console.log(...['a', 'b']); // a b
• 配合动态参数：func(1, ...middleArgs, 10);

浅拷贝数组和对象

快速创建新引用，避免意外修改原数据（注意：只拷贝第一层）：

• 数组拷贝：const copy = [...originalArr];
• 对象拷贝：const copy = { ...originalObj };
• 适用于简单结构；含嵌套对象时，内部仍共享引用

其他实用场景

它还能处理一些看似不相关但很常见的需求：

• 字符串转字符数组：[...'hello'] → ['h','e','l','l','o']
• 将类数组转真数组：[...document.querySelectorAll('p')]，之后可用 map、filter 等
• 在 push 中批量添加：arr1.push(...arr2);
• 配合解构提取剩余项：const [first, ...rest] = [1,2,3,4];