深入探索JavaScript中实用而高级的Rest参数和Spread语法

2024-01-12 16:04

本文主要是介绍深入探索JavaScript中实用而高级的Rest参数和Spread语法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

🧑‍🎓 个人主页:《爱蹦跶的大A阿》

🔥当前正在更新专栏:《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

​ 

✨ 前言

        函数是JavaScript这个语言的核心,而如何处理函数的参数是函数编程中非常关键的问题。传统的JavaScript在处理不定参数以及数组的时候需要些枯燥乏味的代码。好在ES6给了我们两个光明的武器:Rest参数和Spread语法。 hoje我们一起来看看这两种语法糖独特的魅力所在。

✨ 正文

一、Rest参数

  • Rest参数语法

Rest参数语法允许我们将一个不定数量的参数表示为一个数组:

function(...args) {// ...
}
  • Rest参数的使用场景
  1. 将多个参数合并成数组
  2. 获取函数的多余参数
  3. 实现多个参数与数组的转换
  • Rest参数的使用示例
    // 将参数合并成数组
    function concat(...args) {return args;
    }concat(1, 2, 3); // [1, 2, 3]// 获取函数多余参数
    function max(first, ...nums) {let maxValue = first;for (let n of nums) {if (n > maxValue) {maxValue = n;}}return maxValue;
    }// 实现参数和数组转换
    function f(a, b, ...args) {// ...
    }const args = [1, 2, 3];
    f(...args);

详解: 

  • Rest参数与arguments对象的区别
  1. rest参数将多余的参数放入数组中,而arguments对象是一个类数组对象
  2. rest参数需要用(...args)的语法声明,而arguments对象不需要声明
  3. rest参数显式包含了某个函数的所有参数,arguments对象包含了所有参数但不会在函数签名中反映出来
  • rest参数的长度

rest参数的长度由实参决定,它取决于函数调用时实际传入的参数个数。

function foo(...args) {console.log(args.length);
}foo(1); // 1
foo(1, 2, 3); // 3

二、Spread语法

  • Spread语法概念

Spread语法可以将数组、对象在语法层面展开成多个参数或者元素。

  • Spread语法的使用场景
  1. 将数组转为参数序列
  2. 复制数组
  3. 合并数组
  • Spread语法的使用示例
    // 将数组转为参数序列
    const arr = [1, 2, 3];
    f(...arr);// 复制数组
    const arr1 = [...arr]; // 合并数组
    const arr2 = [...arr1, ...arr];

 详解:

  • 数组展开并不会复制数组

使用Spread语法展开数组时,它产生的是对原数组的引用,而不是数组的副本。

let arr1 = [1, 2];
let arr2 = [...arr1];arr2.push(3);
console.log(arr1); // [1, 2, 3]

 

  • 对象展开进行浅复制

使用扩展运算符复制对象时,它只会进行浅复制。如果对象包含嵌套对象,则只会复制对象的引用。

let obj1 = { foo: { bar: 1 } };
let obj2 = { ...obj1 }; obj2.foo.bar = 2;
console.log(obj1.foo.bar); // 2

✨ 结语

        通过本文的介绍,我们可以看到Rest参数和Spread语法在处理不定参数以及数组操作中具有非常高的表达力。

        Rest参数为我们处理函数的不定参数提供了极大的便利,我们可以非常灵活方便地将参数合并成数组。Spread语法进行数组展开,使我们可以轻松实现数组的复制和合并。

        学习并掌握好这两种语法,可以让我们的代码质量得到极大提升。它们是ES6带来的重要的语法糖,值得我们深入探索应用。

        当然,关于JavaScript的技巧还有很多,我们要保持好奇和探索的心,不断学习,成为优秀的JavaScript开发者!

这篇关于深入探索JavaScript中实用而高级的Rest参数和Spread语法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/598400

相关文章

Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式

《Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式》本文详细介绍如何使用Java通过JDBC连接MySQL数据库,包括下载驱动、配置Eclipse环境、检测数据库连接等关键步骤,... 目录一、下载驱动包二、放jar包三、检测数据库连接JavaJava 如何使用 JDBC 连接 mys

SpringBoot线程池配置使用示例详解

《SpringBoot线程池配置使用示例详解》SpringBoot集成@Async注解,支持线程池参数配置(核心数、队列容量、拒绝策略等)及生命周期管理,结合监控与任务装饰器,提升异步处理效率与系统... 目录一、核心特性二、添加依赖三、参数详解四、配置线程池五、应用实践代码说明拒绝策略(Rejected

一文详解SpringBoot中控制器的动态注册与卸载

《一文详解SpringBoot中控制器的动态注册与卸载》在项目开发中,通过动态注册和卸载控制器功能,可以根据业务场景和项目需要实现功能的动态增加、删除,提高系统的灵活性和可扩展性,下面我们就来看看Sp... 目录项目结构1. 创建 Spring Boot 启动类2. 创建一个测试控制器3. 创建动态控制器注

Java操作Word文档的全面指南

《Java操作Word文档的全面指南》在Java开发中,操作Word文档是常见的业务需求,广泛应用于合同生成、报表输出、通知发布、法律文书生成、病历模板填写等场景,本文将全面介绍Java操作Word文... 目录简介段落页头与页脚页码表格图片批注文本框目录图表简介Word编程最重要的类是org.apach

Spring Boot中WebSocket常用使用方法详解

《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP

SpringBoot+Docker+Graylog 如何让错误自动报警

《SpringBoot+Docker+Graylog如何让错误自动报警》SpringBoot默认使用SLF4J与Logback,支持多日志级别和配置方式,可输出到控制台、文件及远程服务器,集成ELK... 目录01 Spring Boot 默认日志框架解析02 Spring Boot 日志级别详解03 Sp

java中反射Reflection的4个作用详解

《java中反射Reflection的4个作用详解》反射Reflection是Java等编程语言中的一个重要特性,它允许程序在运行时进行自我检查和对内部成员(如字段、方法、类等)的操作,本文将详细介绍... 目录作用1、在运行时判断任意一个对象所属的类作用2、在运行时构造任意一个类的对象作用3、在运行时判断

java如何解压zip压缩包

《java如何解压zip压缩包》:本文主要介绍java如何解压zip压缩包问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java解压zip压缩包实例代码结果如下总结java解压zip压缩包坐在旁边的小伙伴问我怎么用 java 将服务器上的压缩文件解压出来,

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具

Spring WebFlux 与 WebClient 使用指南及最佳实践

《SpringWebFlux与WebClient使用指南及最佳实践》WebClient是SpringWebFlux模块提供的非阻塞、响应式HTTP客户端,基于ProjectReactor实现,... 目录Spring WebFlux 与 WebClient 使用指南1. WebClient 概述2. 核心依