深入理解JavaScript展开运算符(附Demo)

目录

  • 1. 基本知识
  • 2. Demo
  • 3. 总结

1. 基本知识

JavaScript ES6中的一个特色

  • 由三个点(...)组成,主要用于数组和对象的操作
  • 可以将数组或对象的元素展开到另外一个数组或对象中

数组中的展开运算符:(将数组中的元素展开为单独的元素)

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

对象中的展开运算符:(将一个对象的所有可枚举属性拷贝到一个新对象中)

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

2. Demo

  • 合并数组
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArray = [...arr1, ...arr2];
console.log(mergedArray); // [1, 2, 3, 4, 5, 6]
  • 拷贝数组
const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];
console.log(copiedArray); // [1, 2, 3]
  • 传递函数参数:(将数组元素作为独立的参数传递给函数
function sum(x, y, z) {return x + y + z;
}const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6
  • 合并对象:(展开运算符,可以合并多个对象)
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const mergedObject = { ...obj1, ...obj2 };
console.log(mergedObject); // { a: 1, b: 2, c: 3, d: 4 }
  • 拷贝对象:(拷贝一个对象)
const originalObject = { a: 1, b: 2 };
const copiedObject = { ...originalObject };
console.log(copiedObject); // { a: 1, b: 2 }
  • 数组合并并添加新元素:(合并数组的同时添加新的元素)
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArray = [0, ...arr1, ...arr2, 7];
console.log(combinedArray); // [0, 1, 2, 3, 4, 5, 6, 7]
  • 对象合并并覆盖属性:(有相同的属性,后面的属性会覆盖前面的)
// obj2的b属性覆盖了obj1的b属性
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const combinedObject = { ...obj1, ...obj2 };
console.log(combinedObject); // { a: 1, b: 3, c: 4 }

3. 总结

优点描述
合并数组和对象可以轻松地合并多个数组或对象。
拷贝数组和对象方便地进行浅拷贝操作,不需要使用Object.assign或其他方法。
传递函数参数将数组元素作为独立的参数传递给函数
缺点描述
浅拷贝只进行浅拷贝,对于嵌套的引用类型(如对象或数组)只拷贝引用,不会深层次地拷贝内容
不可枚举属性只拷贝对象的自身可枚举属性,不会拷贝继承的或不可枚举的属性
顺序问题合并对象时,如果有相同的属性,后面的属性会覆盖前面的属性,可能会导致意外的覆盖

不可枚举属性:

const obj1 = Object.create({ a: 1 });
obj1.b = 2;
const obj2 = { ...obj1 };
console.log(obj2); // { b: 2 }

浅拷贝:

const originalArray = [{ a: 1 }, { b: 2 }];
const copiedArray = [...originalArray];
copiedArray[0].a = 99;
console.log(originalArray[0].a); // 99

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/29995.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

拆分两个单链表

分数 5 作者 李卫明 单位 杭州电子科技大学 1.4 编写程序,输入若干正整数,按从小到大次序建立1个带头结点单链表,设计一个实现单链表分离算法的Split函数,将原单链表中值为偶数的结点分离出来形成一个新单链表,新单…

大型网站优化指南:打造流畅的在线体验

大型网站 大型网站是指具有高并发、大流量、高可用性、海量数据处理能力,并能提供7*24小时不间断服务的网站。 这些网站通常面临用户分布广泛、网络情况复杂、安全环境恶劣等挑战。 同时需要快速适应市场变化和用户需求,通过渐进式的发展策略运营成大型…

深入探索Stable Diffusion:从原理到应用的全面解析

目录 一 Stable Diffusion的基本概念 什么是Stable Diffusion? Stable Diffusion与传统生成模型的区别 二 Stable Diffusion的理论基础 扩散过程的数学描述 马尔可夫链蒙特卡罗方法(MCMC) 三 Stable Diffusion的算法实现 基本步骤 代码实现 四 Stable Diffusion的…

Python类中变量定义详解

✨前言: Python中的类可以定义两种类型的变量:类变量和实例变量。 类变量(Class Variables): 类变量是在类级别上定义的变量,它们是对所有实例共享的。这意味着类变量只有一个副本,无论你创建了…

图形化编程:解锁数字创意的新钥匙

在这个日新月异的数字时代,编程已不再局限于专业人士的小圈子,它正逐渐成为一项基础技能,融入我们的日常生活与工作中。而对于那些对传统代码望而生畏的人来说,6547网认为图形化编程犹如一股清流,以其直观、易学的特点…

【streamlit】将markdown文件,以网页形式打开

1、安装依赖 pip install streamlit 2、创建应用入口 # qucikStart.py import streamlit as stdocs_file "./docs.md"def read_markdown_file(filepath):with open(filepath, r, encodingutf-8) as f:return f.read()text read_markdown_file(docs_file) st.markd…

基础算法--双指针算法

文章目录 什么是双指针算法例题1.移动零2.复写零3.快乐数4.盛最多水的容器5.有效三角形的个数6.三数之和7.四数之和 什么是双指针算法 通常我们讲的双指针就是用两个指针,两个指针可以是快慢指针,解决成环的问题,也可以是指向收尾的两个指针…

短剧app广告变现模式开发

短剧app搭建是一个涉及多个方面的复杂过程,下面将介绍主要的步骤和考虑因素: 明确目标和定位:在开始搭建之前,首先要明确你的目标受众是谁,以及短剧app的主要定位是什么。这有助于在后续的开发过程中更有针对性地进行…

医院运维团队需要具备的关键能力及产品推荐

为了实现医院一体化运维监控,医院运维团队需要具备以下关键能力: 1. 技术能力: 系统监控能力:运维团队需要熟练掌握各种监控工具,能够实时监控系统的运行状态,包括服务器性能、网络状况、应用程序运行情况…

window端口占用情况及state解析

背景: 在电脑使用过程中,经常会开许多项目,慢慢地发现电脑越来越卡,都不知道到底是在跑什么项目导致,于是就想查看一下电脑到底在跑什么软件和项目,以作记录。 常用命令 netstat -tuln : 使用…

Python3发送邮件如何添加附件?怎么配置?

Python3发送邮件的注意事项?如何配置Python3发邮件? Python3发送邮件时添加附件是一项常见的需求。无论是发送报告、图片,还是其他文件,掌握如何在邮件中添加附件至关重要。AokSend将详细介绍Python3发送邮件时如何添加附件&…

前端网站(二)-- 菜单页面【附源码直接可用】

菜单页面 开篇(请大家看完):此网站写给挚爱,后续页面还会慢慢更新,大家敬请期待~ ~ ~ 轻舟所编写这个前端框架的设计初衷,纯粹是为了哄对象开心。除此之外,并无其它任何用途或目的。 此前端框…

JavaScript运行原理和执行过程

参考: https://www.cnblogs.com/hexrui/p/15939592.html 1、执行上下文栈(调用栈) GECGlobal Execution Context(GEC)被放入到ECS(Execution Context Stack,简称ECS)中 GEC开始执…

24面试记录002

文章目录 12、brpc的优化2.1 brpc网络有啥降级? 3、移动语义4、python协程 二、1. mq怎么保障数据的顺序?3.brpc中上下游通信,怎么测评新增字段大小,对耗时的影响? 1 1、brpc和grpc区别,为啥选择brpc? gr…

护眼灯哪些牌子好?一文刨析护眼灯怎么选择!

护眼灯哪些牌子好?护眼台灯作为对抗视力挑战的一种方法,逐渐赢得了众多家长的青睐。这些台灯利用尖端光学技术,发出柔和且无刺激的照明,有助于保护眼睛不受伤害。它们不但可以调节亮度和色温,打造一个舒适且自然的阅读…

2024-06-19 问AI: 在LLM中,RAG是什么?

文心一言 在LLM(大型语言模型)中,RAG全称为Retrieval-Augmented Generation,即检索增强生成。以下是关于RAG的详细解释: 基本概念: RAG是一种通过检索LLMs之外的数据源来支持其生成答案的技术。它结合了搜…

【字符串在Python中的应用】

字符串是Python中非常重要的数据类型,它们是一系列字符的集合。Python提供了丰富的字符串操作方法,可以方便地处理和操作字符串。以下是一些常见的字符串操作及其详细教程。 字符串的基本操作 1. 创建字符串 字符串可以用单引号 或双引号 " 包围…

upload-labs第十三关教程

upload-labs第十三关教程 第十三关一、源代码分析代码审计 二、绕过分析1)0x00绕过a.上传eval.pngb.使用burpsuite进行拦截修改之前:修改之后:进入hex模块: c.放包上传成功: d.使用中国蚁剑进行连接 2)%00绕…

【分布预测】DistPred:回归与预测的无分布概率推理方法

论文题目:DistPred: A Distribution-Free Probabilistic Inference Method for Regression and Forecasting 论文作者:Daojun Liang, Haixia Zhang,Dongfeng Yuan 论文地址:https://arxiv.org/abs/2406.11397 代码地址&#xff1a…

小白学RAG:大模型 RAG 技术实践总结

节前,我们组织了一场算法岗技术&面试讨论会,邀请了一些互联网大厂朋友、今年参加社招和校招面试的同学。 针对大模型技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备面试攻略、面试常考点等热门话题进行了深入的讨论。 汇总合集…