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

一、Spread语法是什么？

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

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

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

1. 函数调用：简化参数传递

   function calculate(a, b, c) { return a + b * c; }  
   const params = [2, 3, 4];  
   console.log(calculate(...params)); // 输出：14  
   

   Spread语法可将数组元素拆解为独立的函数参数，替代繁琐的apply()方法。

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

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

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

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

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

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

4. 解构赋值：精准提取数据

   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' }  
   

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