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

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


相关推荐
abigale032 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者2 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile2 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639972 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊2 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火2 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月6 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀6 小时前
html初学者第一天
前端·html
脑袋大大的7 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络9 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码