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

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


相关推荐
Predestination王瀞潞11 分钟前
WEB前端技术基础(第四章:JavaScript-网页动态交互语言)
前端·javascript·交互
静西子2 小时前
Vue3路由
前端·javascript·vue.js
J总裁的小芒果2 小时前
vue3 全局定义动态样式
前端·javascript·vue.js
whalekv2 小时前
10月25日
前端·javascript·vue.js
万邦科技Lafite4 小时前
京东按图搜索京东商品(拍立淘) API (.jd.item_search_img)快速抓取数据
开发语言·前端·数据库·python·电商开放平台·京东开放平台
Never_Satisfied6 小时前
在JavaScript / Node.js / 抖音小游戏中,使用tt.request通信
开发语言·javascript·node.js
一只小透明啊啊啊啊7 小时前
Java Web 开发的核心组件:Servlet, JSP,Filter,Listener
java·前端·servlet
你的人类朋友7 小时前
设计模式有哪几类?
前端·后端·设计模式
Yeats_Liao7 小时前
Go Web 编程快速入门 10 - 数据库集成与ORM:连接池、查询优化与事务管理
前端·数据库·后端·golang
啃火龙果的兔子8 小时前
前端八股文react篇
前端·react.js·前端框架