前端基础知识-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.mzph.cn/bicheng/13185.shtml

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

相关文章

快速查看字符对应的ASCII码

1、借助gdb查看 打印字符串用双引号括起来打印单个字符用单引号括起来x 表示十六机制d 表示十进制t 表示二进制 2、借助二进制查看软件 第一步:把要查看的字符保存到文本文件中第二步:借助二进制查看工具(比如:Hex Editor Neo&am…

网络安全护网行动:形式主义还是真有价值?

中国每年都投入大量人力物力进行护网行动,如网络攻防演练、黑客技术研究等。有人质疑这些行动是否只是形式主义,缺乏真正的价值。然而,本文将深入解释这些护网行动的原因,并阐明其对信息安全发展的真实价值。 网络信息安全问题的…

自养号测评实战指南:Shopee、Lazada销量翻倍不再是难题

对于速卖通、亚马逊、eBay、敦煌网、SHEIN、Lazada、虾皮等平台的卖家而言,提高店铺流量并转化为实际销量是共同追求的目标。在这个过程中,自养号进行产品测评显得尤为重要。通过精心策划和执行的测评活动,卖家不仅能够显著增加产品的销量&am…

Google Chrome 设备工具栏原理

1.不同预览模式 2.计算出缩放比 3.固定滚动偏移 关键代码&#xff1a; overview&#xff1a; ratioW getChildRect().width / getParentRect().width ratioH getChildRect().height / getParentRect().height maxRatio max(ratioW, ratioH) if(maxRatio < 1) return 1 …

计算机网络实验3:路由器安全防控配置

实验目的和要求 理解标准IP访问控制列表的原理及功能理解CHAP、DHCP配置原理了解家用式无线路由配置方法实验项目内容 标准IP访问控制列表配置 CHAP验证路由器上配置DHCP网络地址转换NAT配置无线路由实现实验环境 1. 硬件&#xff1a;PC机&#xff1b; 2. 软件&#xff1a;W…

【35分钟掌握金融风控策略29】贷中模型调额调价策略

目录 贷中客户风险管理和客户运营体系 用信审批策略 用信审批策略决策流与策略类型 贷中预警策略 对存量客户进行风险评级 基于客户的风险评级为客户匹配相应的风险缓释措施和建议 调额策略 基于定额策略的调额策略 基于客户在贷中的风险表现的调额策略 调价策略 存…

【计算机毕业设计】springboot城市公交运营管理系统

二十一世纪我们的社会进入了信息时代&#xff0c; 信息管理系统的建立&#xff0c;大大提高了人们信息化水平。传统的管理方式对时间、地点的限制太多&#xff0c;而在线管理系统刚好能满足这些需求&#xff0c;在线管理系统突破了传统管理方式的局限性。于是本文针对这一需求设…

【校园生活小程序_超详细部署】

校园生活小程序 1 完整小程序源码2 运行环境3 初次运行3.1 启动后端程序3.1.1 导入项目&#xff0c;找到项目的pom.xml文件&#xff0c;点击ok进行打开。3.1.2 创建数据库并插入内容 3.1.3 配置项目结构信息3.1.4 配置Tomcat服务器3.1.5 正式启动后端项目3.1.6出现BUG3.1.7 解决…

Android实践:查看Activity信息

问题&#xff1a;本地Android SDK的monitor无法正常运行&#xff0c;看不了进程相关信息&#xff0c;确认当前显示Activity十分不便 解决办法&#xff1a;使用adb shell指令可以快速查看 命令&#xff1a; adb shell dumpsys activity activities 这个命令用于获取Android设…

Linux的常用指令 和 基础知识穿插巩固(巩固知识必看)

目录 前言 ls ls 扩展知识 ls -l ls -a ls -al cd cd 目录名 cd .. cd ~ cd - pwd 扩展知识 路径 / cp [选项] “源文件名” “目标文件名” mv [选项] “源文件名” “目标文件名” rm 作用 用法 ./"可执行程序名" mkdir rmdir touch m…

【YashanDB知识库】ycm纳管主机安装YCM-AGENT时报错“任务提交失败,无法连接主机”

问题现象 执行安装 ycm-agent 命令纳管主机时报错 问题的风险及影响 会导致 ycm-agent 纳管不成功&#xff0c;YCM 无法监控主机和数据库 问题影响的版本 yashandb-cloud-manager-23.2.1.100-linux-aarch64.tar 问题发生原因 因为 10.149.223.121 对 ycm 的主机没有开放端…

串,数组和广义表

2.1.求next和nextval的实现 代码&#xff1a; int next_one(char *str, int len) {int result 1;if(len 1 || len 0) return len;for (size_t i 1; i < len; i){ if(compare(str, strlen-i, i)) {result i1;//break;}}return result; }int next(char *str, int *…

nodeJs用ffmpeg直播推流到rtmp服务器上

总结 最近在写直播项目 目前比较重要的点就是推拉流 自己也去了解了一下 ffmpeg FFmpeg 是一个开源项目&#xff0c;它提供了一个跨平台的命令行工具&#xff0c;以及一系列用于处理音频和视频数据的库。FFmpeg 能够执行多种任务&#xff0c;包括解封装、转封装、视频和音频…

国际化日期(inti)

我们可以使用国际化API自动的格式化数字或者日期&#xff0c;并且格式化日期或数字的时候是按照各个国家的习惯来进行格式化的&#xff0c;非常的简单&#xff1b; const now new Date(); labelDate.textContent new Intl.DateTimeFormat(zh-CN).format(now);比如说这是按照…

DC-DC转换效率的影响因素和优化方向

一. 定义 DC-DC转换效率的定义是输入与输出功率之比&#xff1a; η P O U T P I N P O U T P O U T P L O S S η\frac{P_{OUT}}{P_{IN}}\frac{P_{OUT}}{P_{OUT}P_{LOSS}} ηPIN​POUT​​POUT​PLOSS​POUT​​ 其中POUT代表输出功率&#xff0c;PIN代表输入功率&#x…

ADS FEM 仿真设置

1、EM Simulator 选择FEM。 2、在layout界面打开的EM功能&#xff0c;这里不需要操作。 3、Partitioning 不需要操作。 4、没有叠层的话需要新建&#xff0c;过孔可以在叠层处右键添加。 5、端口需要设置GND layer。 6、设置仿真频率。 7、Output plan。 8、Options 设置 介质…

ITSS认证流程详解!

ITSS,是Information Technology Service Standards的缩写&#xff0c;中文意思是信息技术服务标准&#xff0c;是在工业和信息化部、国家标准化委的领导和支持下&#xff0c;由ITSS工作组研制的一套IT服务领域的标准库和一套提供IT服务的方法论。 国家标准化委的领导和支持下&…

你好 GPT-4o!

你好 GPT-4o&#xff01; OpenAI公司宣布推出 GPT-4o&#xff0c;这是OpenAI的新旗舰模型&#xff0c;可以实时对音频、视觉和文本进行推理。 GPT-4o&#xff08;“o”代表“o​​mni”&#xff09;是迈向更自然的人机交互的一步——它接受文本、音频、图像和视频的任意组合作…

[AI]-(第1期):OpenAI-API调用

文章目录 一、OpenAI API中使用GPT-3.5-turbo模型充值方式使用模型计费方式价格说明相关限制和条款 二、接入一个OpenAI API流程1. 获取OpenAI API 密钥2. 集成ChatGPT到小程序3. 处理用户输入4. 调用OpenAI API5. 返回回复至小程序6. 持续优化7. Postman请求示例 三、通用AI客…

43k Star!推荐一款功能强大的开源笔记软件!

程序员的公众号&#xff1a;源1024&#xff0c;获取更多资料&#xff0c;无加密无套路&#xff01; 最近整理了一份大厂面试资料《史上最全大厂面试题》&#xff0c;Springboot、微服务、算法、数据结构、Zookeeper、Mybatis、Dubbo、linux、Kafka、Elasticsearch、数据库等等 …