🚀 扩展运算符在JavaScript中的作用

📅 发布于 2026年1月 | 👤 作者：博主 | 🏷️ 标签：扩展运算符, JavaScript, ES6, Web开发, 前端, 面试

欢迎来到我的博客文章！所有文章都是满满的前端干货，文章简明扼要。

它的核心作用是将可迭代对象（如数组、字符串、Set、Map 等）"展开"为单个元素，或将对象的自有可枚举属性"展开"为键值对。

二、主要用途

1. 数组操作

✅ 数组合并

替代 arr1.concat(arr2)

✅ 数组复制（浅拷贝）

替代 original.slice() 或 Array.from(original)

✅ 将类数组转为真数组

可用于 arguments、NodeList 等

✅ 在任意位置插入元素

2. 函数调用

✅ 展开数组作为参数

替代 Math.max.apply(null, numbers)

✅ 与普通参数混合

3. 对象操作（ES2018+）

✅ 对象合并

替代 Object.assign

✅ 对象浅拷贝

✅ 新增/覆盖属性

✅ 提取部分属性（配合解构）

4. 字符串操作

三、扩展运算符 vs 剩余参数（Rest Parameters）

它们语法相同（...）但用途相反：

特性 扩展运算符（Spread） 剩余参数（Rest）
位置 函数调用、数组/对象字面量中 函数参数列表最后
作用 展开 可迭代对象 收集 多余参数为数组

五、典型应用场景

场景 代码示例
React 更新状态 setItems([...items, newItem])
Redux reducer return {...state, count: state.count + 1}
去重数组 [...new Set([1, 2, 2, 3])]
连接多个数组 const all = [...arr1, ...arr2, ...arr3]
← 返回首页