前端基础知识-ES6扩展运算符(快速实现数组添加新元素、字符串转为数组、对象添加新属性)

前言:

扩展运算符又称为Rest运算符,可以实现数组、对象、字符串在语法层面上的展开,达到简化语法的目的,使得我们提高开发效率

主要用法:

在需要解构的变量前加三个点(...xxx)

具体示例:

一、...数组

罗列指定数组的所有元素

情况1:
let arr = ["a", "b", "c"];
console.log(...arr);
console.log(arr[0], arr[1], arr[2]);

控制台输出结果: 

如上图所示,...arr输出的结果和每一项单个输出结果一样

情况2:(主要应用场景)

创建新数组,拥有旧数组元素的同时新增新元素

let arr = ["a", "b", "c"];
let newArr = [...arr, "d", "e"];
console.log(newArr);

控制台输出结果:

如上图所示,‘d’和‘e’与arr数组合成了新数组

二、...字符串

罗列指定字符串的所有字符

情况1:
      let str = "abcd";
      console.log(str.charAt(0), str.charAt(1), str.charAt(2), str.charAt(3));
      console.log(...str);

控制台输出:

情况2:(主要应用场景)

获取指定字符串的字符数组

      let str = "abcd";
      let charArr = [...str];
      console.log(charArr);

控制台输出:

如上图所示,可以快速把一个字符串的所有字符组成一个数组

三、 ...对象

罗列指定对象的所有属性

情况1:(主要应用场景)

给对象增加属性

      let obj = {
        id: 1,
        name: "张三",
        age: 666,
      };
      let newObj = { ...obj, gender: "男" };
      console.log(newObj);

控制台输出:

需要注意的一点:

当拓展运算符出现在函数形参部分,并且是作为该函数的最后一个形参,那么其作用是将实参存储到扩展运算符后面的变量名称数组中

      const demo = (...test) => {
        console.log(test);
      };
      demo(1, 2, 3, 4, 5, 6);

控制台输出:

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

大数据毕业设计Python+Django地铁客流量预测 时间序列 深度学习 机器学习 人工智能 Python爬虫 计算机毕业设计

​ 博主介绍:全网粉丝100W,前互联网大厂软件研发、集结硕博英豪成立工作室。专注于计算机相关专业毕业设计项目实战6年之久,选择我们就是选择放心、选择安心毕业感兴趣的可以先收藏起来,点赞、关注不迷路 西安工程大学本科毕业设计&#xff…

Xamarin.Android项目网络串口助手怎么通过路由器跟PC网络串口连接

AndroidManifest.xml ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/1ae7cd0d03c84343a62bccfd92e45d2c.png)

Mendix创客访谈录|助力工业领域,Mendix与IIOT相融合

本期创客 汤登揆 太平洋电信股份有限公司 AI 技术支持工程师 大家好,我是汤登揆,帝国理工大学,生态算法专业,主要关注于产品结构分析和产品应用落地。 目前任职于太平洋电信股份有限公司,主要专注于AI大模型的应用落地…

python3.12.0 在Linux 制作镜像包 部署到docker 全过程

项目结构: 比如,在pycharm里需要运行 themain.py 1、上传Linux的目录结构: Dockerfile 文件需要制作: 这里是关键: #基于的基础镜像 FROM python:3.12.0 #代码添加到code文件夹 ADD ./EF_NFCS /code #设置code文…

工厂的隐性成本有哪些?如何应对?

隐性成本是指企业在生产过程中不易被察觉或量化的成本,它们往往隐藏在企业的日常运营中,但同样会对企业的总成本产生影响。 工厂的隐性成本有哪些? 工厂的隐性成本主要包括以下几个方面: 1、停滞资源成本:如闲置的机…

effective python学习笔记_推导与生成

用推导取代map和filter 序列推导可取代map和filter,优越性有:1可读性强2不需要map的函数 控制推导逻辑的子表达式不要超过2个 即推导的for层数最多建议两层,多了可读性会下降,反而用for循环会清晰 一层for内可连接多个if&…

LifeCycle之ProcessLifeCycleOwner

问题:想要知道应用程序当前处在前台、后台、或从后台回到前台,想要知道应用的状态, LifeCycle提供了ProcessLifeCycleOwner的类,方便我们知道整个应用程序的生命周期情况 ProcessLifeCycleOwner 使用方法 1.首先添加依赖 imple…

初学者理解Transformer,本文is all you need

要问现在AI领域哪个概念最热,必然是openAI推出chatGPT之后引发的大模型。然而这项技术的起源,都来自一篇google公司员工的神作“Attention Is All You Need”——本文标题也是一种致敬^_^,目前已有近12万的引用(还在增长)。 在“Attention Is…

【qt】容器的用法

容器目录 一.QVertor1.应用场景2.增加数据3.删除数据4.修改数据5.查询数据6.是否包含7.数据个数8.交换数据9.移动数据10.嵌套使用 二.QList1.应用场景2.QStringList 三.QLinkedList1.应用场景2.特殊点3.用迭代器来变量 四.QStack1.应用场景2.基本用法 五.QQueue1.应用场景2.基本…

【设计模式】JAVA Design Patterns——Abstract-document

🔍 目的 使用动态属性,并在保持类型安全的同时实现非类型化语言的灵活性。 🔍 解释 抽象文档模式使您能够处理其他非静态属性。 此模式使用特征的概念来实现类型安全,并将不同类的属性分离为一组接口 真实世界例子 考虑由多个部…

【Linux】在Linux中执行命令ifconfig, 报错-bash:ifconfig: command not found解决方案

一、报错信息 ifconfig 报错-bash:ifconfig: command not found 同时,通过ip addr查看,也看不到IP信息 二、解决方案 找到ifcfg-ens0文件,此文件的目录在/etc/sysconfig/network-scripts目录下 命令:cd /etc/sysconfig/network…

89C52单片机+ESP8266做的物联网+反馈 e4a手机客户端源程序

资料下载地址:89C52单片机ESP8266做的物联网反馈 e4a手机客户端源程序 MCU是89C52单片机 WiFi模块是ESP8266 其他 8路继电器 电源模块 使用贝壳物联做服务器 还有客户端。 也可以用花生壳做内网穿透,8266做服务器,也可以实现物联以及反馈&a…

vue多选功能

废话不多说&#xff0c;直接上代码&#xff01;&#xff01;&#xff01; <template><div class"duo-xuan-page"><liv-for"(item, index) in list":key"index"click"toggleSelection(item)":class"{ active: sel…

[前后端基础]图片详解

[前后端基础]图片传输与异步-CSDN博客 https://juejin.cn/post/6844903782959022093#heading-3 base64、file和blob用JS进行互转的方法大全【前端】_js base64转blob-CSDN博客 后端存储方式 对于第一种存储方式&#xff0c;我们前端直接将存储路径赋值给 src 属性即可轻松显示。…

react项目中封装一个通用的边界Boundary

# Boundary 通用的边界,同时是一个Suspense 和一个 ErrorBoundary 正常情况不直接用,使用一下几个封装好的: -Boundary.FullSizeLoading: 占满父容器全部高度,居中显示等待动画; -Boundary.Loading: 占满一行,显示一个普通尺寸的等待动画; -Boundary.Blank: 什么都不显示…

Hadoop3:HDFS的Shell操作(常用命令汇总)

一、简介 什么是HDFS的Shell操作&#xff1f; 很简单&#xff0c;就是在Linux的终端&#xff0c;通过命令来操作HDFS。 如果&#xff0c;你们学习过git、docker、k8s&#xff0c;应该会发现&#xff0c;这些命令的特点和shell命令非常相似 二、常用命令 1、准备工作相关命令…

let命令

let 命令 let 与 var 二者区别&#xff1a; 作用域不同&#xff1a;变量提升&#xff08;Hoisting&#xff09;&#xff1a;临时性死区重复声明&#xff1a; 联系&#xff1a;举例说明&#xff1a; 块级作用域 块级作用域的关键字使用 var&#xff08;无块级作用域&#xff09;…

x64dbg中类似于*.exe+地址偏移

在CE和xdb中&#xff0c;形如*.exe数字偏移形式的地址被称为模块地址&#xff0c;CE附加到进程后点击查看内存&#xff0c;显示如下图 这种地址学名叫做模块地址&#xff0c;在x64dbg中显示如下图&#xff1a; CE中可以关闭&#xff0c;从而显示绝对的虚拟地址&#xff0c;如下…

Hive-URL解析函数

Hive-URL解析函数 1.实际工作需求 2.URL的基本组成 3.Hive中的Url解析函数 parse_url函数 parse_url_tuple函数

VScode通过ssh远程连接服务器被拒绝:permission denied, please try again

使用场景&#xff1a; 使用windows系统下的vscode远程连接服务器的linux系统&#xff0c;终端提示permission denied, please try again,但是使用cmd是可以远程登录的。 解决办法&#xff1a; 前提条件windows端的vscode安装了ssh远程连接的相关插件Remote - SSH&#xff0c;…