前端基础知识-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,一经查实,立即删除!

相关文章

Spring整合Junit(单元测试)

在软件开发过程中,单元测试是保证代码质量和功能完整性的重要手段之一。Spring框架提供了便捷的方式来管理和执行单元测试,并且与JUnit框架的整合非常简单。本文将介绍如何在Spring应用程序中整合JUnit进行单元测试,并提供一个简单的示例来演…

快速查看字符对应的ASCII码

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

【原创】尽量使用标准 json 格式替换 jsonl 以避免 datasets 包引入数据时处理报错

文章目录 问题发现问题解决问题回看 问题发现 使用 LLaMA-Factory 以 ORPO 方式训练模型,数据集习惯性按照 jsonl 的格式组织。 突然在读取数据阶段报错,且是很少见的 TypeError。对照官方模板没发现问题出在哪,又从内容层面做了初步排除&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 …

生产车间PDA应用的规划

作为IT经理,在规划生产车间的PDA应用时,需要考虑的IT基础设施方面的前提条件。以下是一些关键的考虑因素,包括要点、实例和参考数据: 01、Infra 的前提条件 1. **网络基础设施**: - **无线覆盖**:确保车间有全面的无线信号覆盖,比如使用Wi-Fi 6技术,提供至少1Gbps的…

GPRS与4G网络的技术差异与应用选择

在移动通信的发展历程中&#xff0c;GPRS&#xff08;General Packet Radio Service&#xff09;和4G&#xff08;Fourth-Generation&#xff09;技术都扮演着举足轻重的角色。虽然两者都旨在提供无线数据传输服务&#xff0c;但在数据传输速率、延迟和覆盖范围等方面&#xff…

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

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

spark自定义函数实现

场景:由于系统函数无法满足实际开发需求,需要通过自定义函数来实现 示例: package sparkimport org.apache.spark.sql.{Row, SparkSession} import org.apache.spark.sql.expressions.{MutableAggregationBuffer, UserDefinedAggregateFunction} import org.apache.spark.sql.…

Helm安装集群整理

这里写目录标题 1.添加nfs存储2.安装redis集群3.安装neo4j集群4.安装clickhouse集群5. 安装zookeeper集群6. 安装es集群7. 安装openebs8.安装radondb 1.添加nfs存储 项目地址&#xff1a;https://github.com/kubernetes-sigs/nfs-subdir-external-provisioner helm install nfs…

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

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

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

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

P6023 走路

走路 题目背景 小 W 下载了一款运动软件。 题目描述 小 W 准备在接下来的 m m m 天中锻炼&#xff0c;由于他不能走得太多以至于累死&#xff08;怎么可能呢&#xff09;&#xff0c;所以他这 m m m 天最多一共只能走 n n n 步。 这个运动软件为了激励小 W 走路&#xf…

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

校园生活小程序 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设…

vscode-调试js文件

vscode 调试时报错&#xff1a; "launch.json" 找不到 Node.js 二进制文件“node”: 路径不存在。请确保 Node.js 已安装且位于你的路径中&#xff0c;或者在 launch.json 中设置 "runtimeExecutable" 在launch.json中加入即可 "runtimeExecutable&q…

Rust 标准库的结构及其模块路径

在 Rust 中&#xff0c;标准库提供了一组核心功能&#xff0c;以帮助开发者执行常见的编程任务。当使用这些功能时&#xff0c;我们需要通过特定的模块路径来引用它们。下面&#xff0c;我们将详细介绍 Rust 标准库的结构&#xff0c;并提供相应的 use 路径。 Rust 标准库模块…

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 的主机没有开放端…