当前位置: 首页 > news >正文

聊聊前端 JavaScript 的扩展运算符 “...“ 的使用场景

image

前言

在 JavaScript 中,... 被称为 “扩展运算符” 或 “剩余参数运算符”。

扩展运算符是在 ES6(ECMAScript 2015)中被引入的,目的是为了提高语言的表达能力和代码的可读性。

根据上下文不同,它主要用在数组、对象以及函数调用中,帮助我们更灵活地处理数据结构。

下文说一下它的使用场景。

数组操作

  1. 合并数组

    let array1 = [1, 2];
    let array2 = [3, 4];
    let combinedArray = [...array1, ...array2]; // 结果为 [1, 2, 3, 4]
    
  2. 复制数组

    let originalArray = [1, 2, 3];
    let copiedArray = [...originalArray]; 
    // 结果为 [1, 2, 3]
    
  3. 扩展数组

    function logElements(...elements) {elements.forEach(element => console.log(element));
    }let numbers = [1, 2, 3];
    logElements(...numbers); 
    // 输出 1 2 3
    
  4. 解构数组

    const arr = [1, 2, 3, 4, 5];
    const [first, second, ...rest] = arr;
    console.log(first); // 输出: 1
    console.log(second); // 输出: 2
    console.log(rest); // 输出: [3, 4, 5]
    

对象操作

  1. 合并对象

    let obj1 = { a: 1 };
    let obj2 = { b: 2 };
    let combinedObj = { ...obj1, ...obj2 }; 
    // 结果为 { a: 1, b: 2 }
    
  2. 复制对象

    let originalObj = { a: 1, b: 2 };
    let copiedObj = { ...originalObj }; 
    // 结果为 { a: 1, b: 2 }
    
  3. 扩展对象

    function logProperties(obj) {for (let key in obj) {console.log(key + ': ' + obj[key]);}
    }let user = { name: 'John', age: 30 };
    logProperties({ ...user }); 
    // 输出 name: John 和 age: 30
    

函数调用

函数调用主要是 扩展参数


// 当不确定传入函数的参数数量时,利用扩展运算符将这些参数作为一个数组
function sum(...numbers) {return numbers.reduce((acc, curr) => acc + curr, 0);
}let numbers = [1, 2, 3];
let total = sum(...numbers); 
// 结果为 6

或者

function sum(x, y, z) {return x + y + z;
}//将数组元素作为多个参数传递给函数
const numbers = [1, 2, 3];

总结

... 运算符在 JavaScript 中非常强大且实用。

它使得处理数组和对象的操作更加简洁和直观,尤其是在函数参数、数组或对象的合并和解构时。

不过也要注意这两点:

  • 扩展运算符的复制是浅拷贝,如果对象或数组中含有引用类型的数据,那么拷贝的还是原始对象的引用。
  • 在合并对象时,如果有相同的属性名,后面的属性会覆盖前面的属性。

我是老杨,一个执着于编程乐趣、至今奋斗在一线的 10年+ 资深研发老鸟,是软件项目管理师,也是快乐的程序猿,持续免费分享全栈实用编程技巧、项目管理经验和职场成长心得。欢迎关注老杨的公众号,相互交流,共同进步!

相关文章:

聊聊前端 JavaScript 的扩展运算符 “...“ 的使用场景

前言 在 JavaScript 中,... 被称为 “扩展运算符” 或 “剩余参数运算符”。 扩展运算符是在 ES6(ECMAScript 2015)中被引入的,目的是为了提高语言的表达能力和代码的可读性。 根据上下文不同,它主要用在数组、对象…...

华为续签了,但我准备离职了

离职华为 今天在牛客网看到一篇帖子,名为《华为续签了,但我准备离职了》。 讲得挺真诚,可能也是一类毕业进华为的同学的心声。 贴主提到,当年自己还是应届毕业的时候,手握多个 offer,最终选的华为&#xff…...

RocketMQ 的认证与授权机制

Apache RocketMQ 是一个高性能、高吞吐量、分布式的消息中间件,广泛应用于异步通信、应用解耦、流量削峰等场景。在企业级应用中,消息安全尤为重要,本文将深入探讨 RocketMQ 的认证与授权机制,帮助开发者和系统管理员更好地理解和…...

【设计模式】六大原则-上

首先什么是设计模式? 相信刚上大学的你和我一样,在学习这门课的时候根本不了解这些设计原则和模式有什么用处,反而不如隔壁的C更有意思,至少还能弹出一个小黑框,给我个hello world。 如何你和我一样也是这么想&#xf…...

CRC16循环冗余校验

代码&#xff1a; #include<stdio.h> #include <stdint.h>#define uchar unsigned char #define uint unsigned int static const uint8_t auchCRCHi[] { 0x00, 0xC1, 0x81, 0x40, 0x01, 0xC0, 0x80, 0x41, 0x01, 0xC0, 0x80, 0x41, 0x00, 0xC1, 0x81, 0x40, 0x0…...

Mysql80主从复制搭建;遇到问题 Slave_IO_Running: Connecting和Slave_SQL_Running以及解决过程

总结主要步骤 1.配置一个提供复制的账号&#xff1b; 创建用户 CREATE USER replication% IDENTIFIED BY your_password; GRANT REPLICATION SLAVE ON *.* TO replication%; FLUSH PRIVILEGES;2.修改配置 选择模式 主库配置&#xff1b; windows的得话是my.ini文件 默认这个目…...

Yarn网络代理配置指南:在受限网络环境中优化依赖管理

Yarn是一个现代的包管理器&#xff0c;用于JavaScript项目&#xff0c;它提供了快速、可靠和安全的依赖管理方式。然而&#xff0c;在某些受限的网络环境中&#xff0c;例如公司内网或某些国家地区&#xff0c;直接连接到公共npm仓库可能不可行或效率低下。这时&#xff0c;配置…...

AOE网及其求解关键路径

全称 Activity on Edge Network 边活动网 特点 仅存在 有向无环图 作用 用于记录完成整个工程至少花费的时间 > 哪条路径最耗时&#xff1f;也就是“ 关键路径 ” AOE网元素介绍 关键活动 关键路径上的活动称为关键活动 &#xff0c; 关键活动是不允许拖延的&#x…...

【FPGA】modelsim编译verilog代码产生错误集合

错误1&#xff1a; LHS in procedural continuous assignment may not be a net 可能是一些变量不能放在一些begin和end中&#xff0c;改下assign的位置 新手求助 LHS in procedural continuous assignment may not be a net - 数字IC设计讨论(IC前端|FPGA|ASIC) - EETOP 创…...

Rabbitmq的持久化机制

我们通过手动应答处理了在消费者出故障消息丢失的情况&#xff0c;但是如何保障当 RabbitMQ 服务停掉以后消息生产者发送过来的消息不丢失。默认情况下 RabbitMQ 退出或由于某种原因崩溃时&#xff0c;它会清空队列和消息&#xff0c;除非告知它不要这样做。确保消息不会丢失可…...

Unity UnityWebRequest封装类

简化api调用流程&#xff0c;非常奈斯。 RestWebClient.cs using System; using System.Collections; using UnityEngine; using UnityEngine.Networking;namespace MYTOOL.RestClient {/// <summary>/// UnityWebRequest封装类/// </summary>public class RestW…...

JVM内存划分

Java虚拟机&#xff08;JVM&#xff09;的内存划分是指JVM在运行时所使用的内存区域的组织和管理方式。JVM内存主要分为以下几个区域&#xff1a; 堆区&#xff08;Heap&#xff09;&#xff1a; 用途&#xff1a;用于存储所有对象实例和数组&#xff0c;是JVM中最大的一块内存…...

c++ 全排列

在C中&#xff0c;全排列&#xff08;permutation&#xff09;可以使用递归算法或标准库函数来实现。以下是使用递归和STL库std::next_permutation来生成一个集合的全排列的两种方法。 方法一&#xff1a;递归算法 递归方法通过交换元素来生成所有可能的排列组合。 #include…...

未授权访问漏洞系列详解⑤!

Kubernetes Api Server未授权访问漏洞 Kubernetes 的服务在正常启动后会开启两个端口:Localhost Port(默认8080)Secure Port(默认6443)。这两个端口都是提供 Api Server 服务的&#xff0c;一个可以直接通过Web 访问&#xff0c;另一个可以通过 kubectl 客户端进行调用。如果运…...

【CONDA】库冲突解决办法

如今&#xff0c;使用PYTHON作为开发语言时&#xff0c;或多或少都会使用到conda。安装Annaconda时一般都会选择在启动终端时进入conda的base环境。该操作&#xff0c;实际上是在~/.bashrc中添加如下脚本&#xff1a; # >>> conda initialize >>> # !! Cont…...

【网络世界】数据链路层

目录 &#x1f308;前言&#x1f308; &#x1f4c1; 初识数据链路层 &#x1f4c2; 概念 &#x1f4c2; 协议格式 &#x1f4c1; MAC地址 &#x1f4c2; 概念 &#x1f4c2; 与IP地址的区别 &#x1f4c1; MTU &#x1f4c2; 对IP协议的影响 &#x1f4c2; 对UDP协议的影响…...

AllReduce通信库;Reduce+LayerNorm+Broadcast 算子;LayerNorm(层归一化)和Broadcast(广播)操作;

目录 AllReduce通信库 一、定义与作用 二、常见AllReduce通信库 三、AllReduce通信算法 四、总结 Reduce+LayerNorm+Broadcast 算子 1. Reduce 算子 2. LayerNorm 算子 3. Broadcast 算子 组合作用 LayerNorm(层归一化)和Broadcast(广播)操作 提出的创新方案解析 优点与潜在…...

2024.8.5 作业

使用有名管道实现&#xff0c;一个进程用于给另一个进程发消息&#xff0c;另一个进程收到消息后&#xff0c;展示到终端上&#xff0c;并且将消息保存到文件上一份 代码&#xff1a; /*******************************************/ 文件名&#xff1a;create.c /********…...

MySQL数据库——数据库的基本操作

目录 三、数据库的基本操作 1.数据库中库的操作 ①创建数据库 ②字符集和校验规则 ③操纵数据库 ④备份与恢复 2.数据库中表的操作 ①创建表 ②查看表 1> 查看表位于的数据库 2>查看所有表 3>查看表中的数据 4>查看创建表的时候的详细信息 ③修改表 …...

SQL数据库语句练习

1、mysql常用的数据类型是_整数&#xff08;int&#xff09;__、_小数&#xff08;decimal&#xff09;__、_字符串&#xff08;varchar&#xff09;__、_日期时间&#xff08;datetime&#xff09;___。 2、mysql的约束有__主键&#xff08;primary key&#xff09;_、_非空&…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

uniapp 集成腾讯云 IM 富媒体消息(地理位置/文件)

UniApp 集成腾讯云 IM 富媒体消息全攻略&#xff08;地理位置/文件&#xff09; 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型&#xff0c;核心实现方式&#xff1a; 标准消息类型&#xff1a;直接使用 SDK 内置类型&#xff08;文件、图片等&#xff09;自…...