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

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


相关推荐
cypking5 分钟前
electron中IPC 渲染进程与主进程通信方法解析
前端·javascript·electron
西陵12 分钟前
Nx带来极致的前端开发体验——借助playground开发提效
前端·javascript·架构
江城开朗的豌豆27 分钟前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js
float_六七1 小时前
JavaScript:现代Web开发的核心动力
开发语言·前端·javascript
zhaoyang03011 小时前
vue3笔记(2)自用
前端·javascript·笔记
UrbanJazzerati1 小时前
JavaScript Promise完整指南
javascript
德育处主任Pro2 小时前
# JsSIP 从入门到实战:构建你的第一个 Web 电话
前端
拾光拾趣录2 小时前
setTimeout(1) 和 setTimeout(2) 的区别
前端·v8
拾光拾趣录2 小时前
内存泄漏的“隐形杀手”
前端·性能优化
摸鱼仙人~2 小时前
HttpServletRequest深度解析:Java Web开发的核心组件
java·开发语言·前端