JavaScript 函数进阶之:Rest 参数与 Spread 语法(二)

烛阴2025-03-14 23:00

一、Spread语法是什么？

Spread语法（扩展语法）是JavaScript中由三个点...表示的语法糖，核心功能是将可迭代对象（如数组、字符串、对象等）展开为独立的元素或属性。

其底层逻辑是"拆解再组合"。例如，[...arr]会将数组arr的每个元素拆解后按顺序填充到新数组中，等价于[arr[0], arr[1], arr[2]]。

二、Spread语法的四大核心应用场景

函数调用：简化参数传递
javascript 复制代码
```
function calculate(a, b, c) { return a + b * c; }  
const params = [2, 3, 4];  
console.log(calculate(...params)); // 输出：14  
```
Spread语法可将数组元素拆解为独立的函数参数，替代繁琐的apply()方法。

数组合并与克隆：告别concat()

javascript 复制代码

const arr1 = [1, 2];  
const arr2 = [3, 4];  
const merged = [...arr1, ...arr2]; // [1, 2, 3, 4]  
const cloned = [...arr1];          // 浅拷贝

合并数组时无需嵌套结构，且浅拷贝操作更直观。

对象合并与属性覆盖：灵活构建数据

javascript 复制代码

const user = { name: 'Alice', age: 25 };  
const job = { role: 'Engineer', age: 26 };  
const profile = { ...user, ...job };  
// 输出：{ name: 'Alice', age: 26, role: 'Engineer' }

后展开的对象属性会覆盖前者，适合配置合并或状态更新。

解构赋值：精准提取数据

javascript 复制代码

const [first, ...rest] = [1, 2, 3, 4];  
// first=1, rest=[2, 3, 4]  
const { name, ...details } = { name: 'Bob', age: 30, role: 'Designer' };  
// details={ age:30, role:'Designer' }

结合解构语法，可快速分离目标数据和剩余部分。