前端基础知识-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.hqwc.cn/news/704799.html

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

相关文章

ubuntu CUDA 驱动更新,版本更新,多CUDA版本管理

1 新版本驱动下载 前面介绍过window CUDA驱动更新,但是对于ubuntu 的驱动更新,没有一键操作。 本人笔记本电脑n年前装的CUDA DRIVER仅支持到cuda10.2,实在无法满足这日新月异的科技更新。 左 旧的驱动版本 右 新下载的硬件支持的驱动版本&…

es 分词器(五)之elasticsearch-analysis-jieba 8.7.0

es 分词器(五)之elasticsearch-analysis-jieba 8.7.0 今天咱们就来讲一下es jieba 8.7.0 分词器的实现,以及8.x其它版本的实现方式,如果想直接使用es 结巴8.x版本,请直接修改pom文件的elasticsearch.version版本号即可…

那些年我与c++的叫板(一)--string类自实现

引子:我们学习了c中的string类,那我们能不能像以前数据结构一样自己实现string类呢?以下是cplusplus下的string类,我们参考参考! 废话不多说,直接代码实现:(注意函数之间的复用&…

Shell之(数组)

目录 一、shell数组 1.数组的定义 2.定义数组的方法 第一种 第二种 第三种 第四种 3.数组分片 4. 数组字符替换 临时替换 永久替换 5.删除数组 删除指定的下标 删除整组 6.数组遍历和重新定义 7.数组追加元素 方式一:指定位置添加 方法二&a…

AnyMP4 Video Converter for Mac/Win - 视频转换的卓越之选

在当今数字化的时代,视频内容无处不在,而拥有一款强大的视频转换器就显得至关重要。AnyMP4 Video Converter for Mac/win 正是这样一款出类拔萃的工具,为您带来高效、便捷的视频转换体验。 这款视频转换器具备令人惊叹的功能。它支持广泛的视…

GAME101-Lecture07学习

前言 今天主要讲shading(着色)。在讲着色前,要先讲图形中三角形出现遮挡问题的方法(深度缓存或缓冲)。 先采样再模糊错误:对信号的频谱进行翻译(在这期间会有频谱的混叠)&#xff…

【ARMv8/v9 系统寄存器 5 -- ARMv8 Cache 控制寄存器 SCTRL_EL1 使用详细介绍】

关于ARM Cache 详细学习推荐专栏: 【ARM Cache 专栏】 【ARM ACE Bus 与 Cache 专栏】 文章目录 ARMv8/v9 Cache 设置寄存器ARMv8 指令 Cache 使能函数测试代码 ARMv8/v9 Cache 设置寄存器 关于寄存器SCTRL_EL1 的详细介绍见文章:【ARMv8/v9 异常模型入…

char x[]---char*---string---sizeof

字符串数组 #include <iostream>int main(){char c_str[]"abcd";char c_str1[]{a,b,c,d};std::cout<<sizeof(c_str)<<std::endl;std::cout<<sizeof(c_str1)<<std::endl;return 0; } char*存储的字符串个数 char*字符串所占字节大小 c…

洛谷P1364 医院设置

P1364 医院设置 题目描述 设有一棵二叉树&#xff0c;如图&#xff1a; 其中&#xff0c;圈中的数字表示结点中居民的人口。圈边上数字表示结点编号&#xff0c;现在要求在某个结点上建立一个医院&#xff0c;使所有居民所走的路程之和为最小&#xff0c;同时约定&#xff0c…

【计算机毕业设计】springboot二手家电管理平台

时代在飞速进步&#xff0c;每个行业都在努力发展现在先进技术&#xff0c;通过这些先进的技术来提高自己的水平和优势&#xff0c;二手家电管理平台当然不能排除在外。二手家电管理平台是在实际应用和 软件工程的开发原理之上&#xff0c;运用java语言以及前台VUE框架&#xf…

【操作系统期末速成】​内存管理|内存的装入模块在装入内存的方式|分配管理方式|页面置换算法|页面置换

&#x1f3a5; 个人主页&#xff1a;深鱼~&#x1f525;收录专栏&#xff1a;操作系统&#x1f304;欢迎 &#x1f44d;点赞✍评论⭐收藏 推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到…

每周一算法:恰好经过K条边的最短路

题目描述 牛站 给定一张由 M M M 条边构成的无向图&#xff0c;点的编号为 1 ∼ 1000 1\sim 1000 1∼1000 之间的整数。 求从起点 S S S 到终点 E E E 恰好经过 K K K 条边&#xff08;可以重复经过&#xff09;的最短路。 注意: 数据保证一定有解。 输入格式 第 1 …