当前位置: 首页 > 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;_、_非空&…...

Python爬虫实战:研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

九天毕昇深度学习平台 | 如何安装库?

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...