【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 }
四、注意事项和最佳实践
尽管展开运算符非常强大,但在使用时需要注意以下几点:
- 浅拷贝的局限性
展开运算符只进行浅拷贝,对于嵌套对象或数组的深层次数据,需要额外处理。
- 避免重复键名
在合并对象时,如果有重复的键名,后面的值会覆盖前面的值:
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 }
- 性能考虑
在处理大数据量时,频繁使用展开运算符可能会影响性能,需根据具体场景优化。

相关文章:
【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)) #窗口是正方形ÿ…...
函数式编程范式
文章目录 函数式编程范式不可变性(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
大模型有一个显著的特点,那就是不确定性——对于特定输入,相同的LLM在不同解码配置下可能生成显著不同的输出。 比如问一问chatgpt“今天开心吗?”,可以得到两种不同的回答。 常用的解码策略有两种,一个是贪婪解码&am…...
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下: struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
python打卡day49
知识点回顾: 通道注意力模块复习空间注意力模块CBAM的定义 作业:尝试对今天的模型检查参数数目,并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...
3.3.1_1 检错编码(奇偶校验码)
从这节课开始,我们会探讨数据链路层的差错控制功能,差错控制功能的主要目标是要发现并且解决一个帧内部的位错误,我们需要使用特殊的编码技术去发现帧内部的位错误,当我们发现位错误之后,通常来说有两种解决方案。第一…...
服务器硬防的应用场景都有哪些?
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式,避免服务器受到各种恶意攻击和网络威胁,那么,服务器硬防通常都会应用在哪些场景当中呢? 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...
令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结: 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析: 实际业务去理解体会统一注…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
leetcodeSQL解题:3564. 季节性销售分析
leetcodeSQL解题:3564. 季节性销售分析 题目: 表:sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...
IT供电系统绝缘监测及故障定位解决方案
随着新能源的快速发展,光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域,IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选,但在长期运行中,例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...
IP如何挑?2025年海外专线IP如何购买?
你花了时间和预算买了IP,结果IP质量不佳,项目效率低下不说,还可能带来莫名的网络问题,是不是太闹心了?尤其是在面对海外专线IP时,到底怎么才能买到适合自己的呢?所以,挑IP绝对是个技…...
QT3D学习笔记——圆台、圆锥
类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体(对象或容器)QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质(定义颜色、反光等)QFirstPersonC…...
