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

【JavaScript】展开运算符详解

文章目录

    • 一、展开运算符的基本用法
      • 1. 展开数组
      • 2. 展开对象
    • 二、展开运算符的实际应用
      • 1. 合并数组
      • 2. 数组的浅拷贝
      • 3. 合并对象
      • 4. 对象的浅拷贝
      • 5. 更新对象属性
    • 三、展开运算符的高级用法
      • 1. 在函数参数中使用
      • 2. 嵌套数组的展开
      • 3. 深拷贝对象
      • 4. 动态属性名
    • 四、注意事项和最佳实践

在现代JavaScript编程中,展开运算符(Spread Operator)是一种非常强大且灵活的语法糖。它使用三个连续的点(...)表示,广泛应用于数组和对象操作中。本文将详细介绍展开运算符的基本用法、实际应用以及一些高级技巧,帮助你全面掌握这一重要特性。

一、展开运算符的基本用法

展开运算符最初在ES6(ECMAScript 2015)中引入,主要用于数组,但在ES9(ECMAScript 2018)中扩展到了对象。它可以将一个数组或对象展开成单独的元素或属性,具体用法如下:

1. 展开数组

展开运算符可以将一个数组展开成单独的元素,用于创建新的数组或函数调用。

示例

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];console.log(arr2); // 输出: [1, 2, 3, 4, 5, 6]

在函数调用中使用:

function sum(a, b, c) {return a + b + c;
}const numbers = [1, 2, 3];console.log(sum(...numbers)); // 输出: 6

2. 展开对象

展开运算符可以将一个对象的所有可枚举属性展开到另一个对象中,便于对象的合并和浅拷贝。

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };console.log(obj2); // 输出: { a: 1, b: 2, c: 3 }

二、展开运算符的实际应用

展开运算符在日常开发中非常实用,以下是一些常见的应用场景:

1. 合并数组

使用展开运算符可以方便地合并多个数组:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];console.log(arr3); // 输出: [1, 2, 3, 4, 5, 6]

2. 数组的浅拷贝

展开运算符可以用于创建数组的浅拷贝:

const arr = [1, 2, 3];
const arrCopy = [...arr];console.log(arrCopy); // 输出: [1, 2, 3]

3. 合并对象

可以使用展开运算符来合并多个对象:

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = { ...obj1, ...obj2 };console.log(obj3); // 输出: { a: 1, b: 2, c: 3, d: 4 }

4. 对象的浅拷贝

展开运算符也可以用于对象的浅拷贝:

const obj = { a: 1, b: 2 };
const objCopy = { ...obj };console.log(objCopy); // 输出: { a: 1, b: 2 }

5. 更新对象属性

使用展开运算符可以方便地更新对象的属性,而不改变原对象:

const obj = { a: 1, b: 2 };
const updatedObj = { ...obj, b: 3 };console.log(updatedObj); // 输出: { a: 1, b: 3 }

三、展开运算符的高级用法

展开运算符除了基本的数组和对象操作外,还可以在许多高级场景中使用,例如函数参数处理和嵌套结构的展开。

1. 在函数参数中使用

展开运算符可以用于函数参数,特别是处理不定数量的参数时非常方便:

function sum(...args) {return args.reduce((acc, val) => acc + val, 0);
}console.log(sum(1, 2, 3, 4)); // 输出: 10

2. 嵌套数组的展开

对于嵌套数组,可以使用展开运算符展开其中的一层或多层:

const nestedArr = [1, [2, 3], [4, 5]];
const flatArr = [...nestedArr];console.log(flatArr); // 输出: [1, [2, 3], [4, 5]]

要完全展开嵌套数组,可以结合其他方法,如 Array.prototype.flat

const nestedArr = [1, [2, 3], [4, 5]];
const flatArr = nestedArr.flat();console.log(flatArr); // 输出: [1, 2, 3, 4, 5]

3. 深拷贝对象

展开运算符只能做浅拷贝,要进行深拷贝,可以结合其他方法使用:

const obj = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(obj));console.log(deepCopy); // 输出: { a: 1, b: { c: 2 } }

4. 动态属性名

在展开对象时,结合计算属性名语法,可以动态设置属性名。计算属性名语法允许我们在定义对象时使用表达式计算出属性的键名。展开运算符则用于将一个对象的所有属性展开到另一个对象中。将这两者结合,可以实现非常灵活的对象构建方式。

动态属性名的基本用法

在对象字面量中,方括号 [] 内的表达式会被计算,其结果将作为属性名。这在需要根据变量值或运行时动态确定属性名时特别有用。

示例详解

以下示例展示了如何使用计算属性名和展开运算符动态设置对象的属性名:

const key = 'name';  // 动态键名
const value = 'Alice';  // 动态键值const obj = {[key]: value,  // 使用计算属性名语法,将变量key的值作为属性名,value的值作为属性值...{ age: 25 }  // 展开另一个对象,将其属性添加到当前对象中
};console.log(obj); // 输出: { name: 'Alice', age: 25 }

四、注意事项和最佳实践

尽管展开运算符非常强大,但在使用时需要注意以下几点:

  1. 浅拷贝的局限性

展开运算符只进行浅拷贝,对于嵌套对象或数组的深层次数据,需要额外处理。

  1. 避免重复键名

在合并对象时,如果有重复的键名,后面的值会覆盖前面的值:

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = { ...obj1, ...obj2 };console.log(mergedObj); // 输出: { a: 1, b: 3, c: 4 }
  1. 性能考虑

在处理大数据量时,频繁使用展开运算符可能会影响性能,需根据具体场景优化。


在这里插入图片描述

相关文章:

【JavaScript】展开运算符详解

文章目录 一、展开运算符的基本用法1. 展开数组2. 展开对象 二、展开运算符的实际应用1. 合并数组2. 数组的浅拷贝3. 合并对象4. 对象的浅拷贝5. 更新对象属性 三、展开运算符的高级用法1. 在函数参数中使用2. 嵌套数组的展开3. 深拷贝对象4. 动态属性名 四、注意事项和最佳实践…...

麒麟V10系统统一认证子系统国际化

在适配麒麟V10系统统一认证子系统国际化过程中, 遇到了很多的问题,关键是麒麟官方的文档对这部分也是粗略带过,遇到的问题有: (1)xgettext无法提取C源文件中目标待翻译的字符串。 (2)使用msgf…...

C语言进阶 13. 文件

C语言进阶 13. 文件 文章目录 C语言进阶 13. 文件13.1. 格式化输入输出13.2. 文件输入输出13.3. 二进制文件13.4. 按位运算13.5. 移位运算13.6. 位运算例子13.7. 位段 13.1. 格式化输入输出 格式化输入输出: printf %[flags][width][.prec][hlL]type scanf %[flags]type %[fl…...

LinuxCentos中ELK日志分析系统的部署(详细教程8K字)附图片

🏡作者主页:点击! 🐧Linux基础知识(初学):点击! 🐧Linux高级管理防护和群集专栏:点击! 🔐Linux中firewalld防火墙:点击! ⏰️创作…...

Vscode ssh Could not establish connection to

错误表现 上午还能正常用vs code连接服务器看代码,中午吃个饭关闭vscode再重新打开输入密码后就提示 Could not establish connection to xxxx 然后我用终端敲ssh的命令连接,结果是能正常连接。 解决方法 踩坑1 网上直接搜Could not establish con…...

数字陷波器的设计和仿真(Matlab+C)

目录 一、数字陷波器的模型 二、Matlab仿真 1. 示例1 2. 示例2 三、C语言仿真 1. 由系统函数计算差分方程 2. 示例代码 一、数字陷波器的模型 二、Matlab仿真 1. 示例1 clear clc f0=100;%滤掉的100Hz fs=1000;%大于两倍的信号最高频率 r=0.9; w0=2*pi*f0/fs;%转换到…...

[玄机]流量特征分析-常见攻击事件 tomcat

题目网址【玄机】:https://xj.edisec.net/ Tomcat是一个开源的Java Servlet容器,它实现了Java Servlet和JavaServer Pages (JSP) 技术,提供了一个运行这些应用程序的Web服务器环境。Tomcat由Apache软件基金会的Jakarta项目开发,是…...

【TOOLS】Project 2 Maven Central

发布自己的项目到maven中央仓库 Maven Central Account 访问:https://central.sonatype.com/,点击右上角,根据提示注册账号 构建User token ,用于访问中央仓库的API: 点击右上角,查看账户点击Generate Us…...

【Opencv】模糊

消除噪声 用该像素周围的平均值代替该像素值 4个函数 blur():最经典的 import os import cv2 img cv2.imread(os.path.join(.,dog.jpg)) k_size 7 #窗口大小,数字越大,模糊越强 img_blur cv2.blur(img,(k_size,k_size)) #窗口是正方形&#xff…...

函数式编程范式

文章目录 函数式编程范式不可变性(Immutable)纯函数(Pure Functions)函数作为一等公民(First-Class Functions)高阶函数(Higher-Order Functions函数组合(Function Composition&…...

特征缩放的秘籍:sklearn中的数据标准化技术

特征缩放的秘籍:sklearn中的数据标准化技术 在机器学习中,特征缩放(Feature Scaling)是数据预处理的重要步骤,它确保了不同量纲和范围的特征在模型训练中具有相同的重要性。Scikit-learn(简称sklearn&…...

hdfs文件系统

简述什么是HDFS,以及HDFS作用 ? HDFS在Hadoop中的作用是为海量的数据提供了存储,能提供高吞吐量的数据访问,HDFS有高容错性的 特点,并且设计用来部署在低廉的硬件上;而且它提供高吞吐量来访问应用程序的数…...

基于STM32设计的个人健康检测仪(华为云IOT)(191)

基于STM32设计的个人健康检测仪(华为云IOT)(191) 文章目录 一、设计需求1.1 设计需求总结1.2 设计思路【1】整体设计思路【2】整体构架【3】ESP8266模块配置【4】上位机开发思路【5】供电方式1.3 项目开发背景【1】选题的意义【2】可行性分析【3】参考文献【4】课题研究的意义【…...

面试:CUDA Tiling 和 CPU tiling 技术详解

目录 一、CUDA Tiling 和 CPU Tiling 技术概述 (一)技术原理 (二)应用场景 (三)优势和劣势 二、Tiling 技术在深度学习中的应用 三、Tiling 技术的缺点 一、CUDA Tiling 和 CPU Tiling 技术概述 Til…...

SQL语句中,`TRUNCATE` 和 `DELETE`的区别

TRUNCATE 和 DELETE 是 SQL 中用于删除表中数据的两种命令,它们有一些关键区别: 1. 基本区别 DELETE: 删除表中的数据,但不会删除表结构和索引。可以使用 WHERE 子句来删除特定的记录,也可以不使用 WHERE 子句来删除所有记录。会…...

【Git】.gitignore全局配置与忽略匹配规则详解

设置全局配置 1)在C:/Users/用户名/目录下创建.gitignore文件,在里面添加忽略规则。 如何创建 .gitignore 文件? 新建一个.txt文件,重命名(包括后缀.txt)为 .gitignore 即可。 2)将.gitignore设…...

基于 YOLO V10 Fine-Tuning 训练自定义的目标检测模型

一、YOLO V10 在本专栏的前面几篇文章中,我们使用 ultralytics 公司开源发布的 YOLO-V8 模型,分别 Fine-Tuning 实验了 目标检测、关键点检测、分类 任务,实验后发现效果都非常的不错,但它已经不是最强的了。最新的 YOLO-V10 已经…...

Java学习2

1 如果要使用Long类型的变量,在数据值的后面加上L为后缀(可以是大写也可以是小写),例如 Long i9999999L; 2 如果要使用float类型的变量,在数据值的后面加上F为后缀(可以是大写也可以是小写)&a…...

CSS、less、 Sass、

1 CSS 1.1 css中.a.b 与 .a .b(中间有空格)的区别 区别: .a.b是获取同时含有a和b的元素.a .b(中间有空格),是获取.a元素下的所有.b元素<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name=&quo…...

北京大学:利用好不确定性,8B小模型也能超越GPT-4

大模型有一个显著的特点&#xff0c;那就是不确定性——对于特定输入&#xff0c;相同的LLM在不同解码配置下可能生成显著不同的输出。 比如问一问chatgpt“今天开心吗&#xff1f;”&#xff0c;可以得到两种不同的回答。 常用的解码策略有两种&#xff0c;一个是贪婪解码&am…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案

在移动互联网营销竞争白热化的当下&#xff0c;推客小程序系统凭借其裂变传播、精准营销等特性&#xff0c;成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径&#xff0c;助力开发者打造具有市场竞争力的营销工具。​ 一、系统核心功能架构&…...

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录 需求分析解决第 1 步:前置条件,启用 OLE 自动化方式 1:使用 SQL 实现启用 OLE 自动化方式 2:Sql Server 2005启动OLE自动化方式 3:Sql Server 2008启动OLE自动化第 2 步:创建存储过程第 3 步:创建触发器扩展 - 如何调试?第 1 步:登录 SQL Server 2008第 2 步…...

Linux安全加固:从攻防视角构建系统免疫

Linux安全加固:从攻防视角构建系统免疫 构建坚不可摧的数字堡垒 引言:攻防对抗的新纪元 在日益复杂的网络威胁环境中,Linux系统安全已从被动防御转向主动免疫。2023年全球网络安全报告显示,高级持续性威胁(APT)攻击同比增长65%,平均入侵停留时间缩短至48小时。本章将从…...

JDK 17 序列化是怎么回事

如何序列化&#xff1f;其实很简单&#xff0c;就是根据每个类型&#xff0c;用工厂类调用。逐个完成。 没什么漂亮的代码&#xff0c;只有有效、稳定的代码。 代码中调用toJson toJson 代码 mapper.writeValueAsString ObjectMapper DefaultSerializerProvider 一堆实…...

Django RBAC项目后端实战 - 03 DRF权限控制实现

项目背景 在上一篇文章中&#xff0c;我们完成了JWT认证系统的集成。本篇文章将实现基于Redis的RBAC权限控制系统&#xff0c;为系统提供细粒度的权限控制。 开发目标 实现基于Redis的权限缓存机制开发DRF权限控制类实现权限管理API配置权限白名单 前置配置 在开始开发权限…...