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

一、Spread语法是什么?

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

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


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

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

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

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

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

    javascript 复制代码
    const arr1 = [1, 2];  
    const arr2 = [3, 4];  
    const merged = [...arr1, ...arr2]; // [1, 2, 3, 4]  
    const cloned = [...arr1];          // 浅拷贝  

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

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

    javascript 复制代码
    const user = { name: 'Alice', age: 25 };  
    const job = { role: 'Engineer', age: 26 };  
    const profile = { ...user, ...job };  
    // 输出:{ name: 'Alice', age: 26, role: 'Engineer' }  

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

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

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

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


相关推荐
kura_tsuki28 分钟前
[Web网页] Web 基础
前端
鱼樱前端2 小时前
uni-app快速入门章法(二)
前端·uni-app
silent_missile2 小时前
vue3父组件和子组件之间传递数据
前端·javascript·vue.js
克里斯蒂亚诺更新3 小时前
微信小程序app.js中每30秒调用一次wx.getLocation
javascript·微信小程序·小程序
IT_陈寒3 小时前
Vue 3.4 实战:这7个Composition API技巧让我的开发效率飙升50%
前端·人工智能·后端
鄃鳕3 小时前
C++坑系列,C++ std::atomic 拷贝构造函数问题分析与解决方案
java·javascript·c++
少年阿闯~~4 小时前
HTML——1px问题
前端·html
Never_Satisfied4 小时前
在JavaScript / HTML中,实现`<iframe>` 自适应高度
开发语言·javascript·html
Mike_jia4 小时前
SafeLine:自托管WAF颠覆者!一键部署守护Web安全的雷池防线
前端
brzhang4 小时前
把网页的“好句子”都装进侧边栏:我做了个叫 Markbox 的收藏器,开源!
前端·后端·架构