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

news2024/12/24 8:11:58

前言:

扩展运算符又称为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.coloradmin.cn/o/1658490.html

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

相关文章

猿匹配,一款使用环信实现的一个开源聊天应用含服务器

前言 之前写了一篇Android开发集成聊天环信SDK3.x简单开始,然后最近得空开发了一款使用环信实现的实时聊天应用,包含简单的服务器端,并开源给大家,有兴趣的同学可以一起搞一下,详细介绍看下边吧 上代码 服务器&#…

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

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

攻击者正在利用AI,对保险公司发起大规模欺诈

保险欺诈一直是保险行业面临的重要挑战之一,尤其随着技术的进步,欺诈者也在不断更新其手段,利用AI技术,包括生成式模型、机器学习和数据分析工具等欺骗保险公司,而AI技术的应用正成为他们的新工具,使其犯罪…

VSCode(安装)

前言 VSCode(全称:Visual Studio Code)是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全(又称 IntelliSense)、代码重构、查看定义功能,并且内置了命令行工具和 Git …

韩顺平0基础学Java——第7天

p110-p154 控制结构(第四章) 多分支 if-elseif-else import java.util.Scanner; public class day7{public static void main(String[] args) {Scanner myscanner new Scanner(System.in);System.out.println("input your score?");int s…

[windows系统安装/重装系统][step-2]BIOS设置UEFI引导、磁盘分区GPT分区、安装系统[含完整操作拍照图片]

背景 先准备U盘启动盘和系统镜像: [windows系统安装/重装系统][step-1]U盘启动盘制作,微软官方纯净系统镜像下载 前言(略长,建议可跳过) 我的笔记本升级了CPU升级了内存后出现了一个小问题, 每次启动徽标显示后会…

ETL工具kettle(PDI)入门教程,Transform,Mysql->Mysql,Csv->Excel

什么是kettle,kettle的下载,安装和配置:ETL免费工具kettle(PDI),安装和配置-CSDN博客 mysql安装配置:Linux Centos8 Mysql8.3.0安装_linux安装mysql8.3-CSDN博客 1 mysql -> mysql 1.1 mysql CREATE TABLE user_…

JAVA二叉树相关习题5

1. 二叉树前序非递归遍历实现 。 . - 力扣&#xff08;LeetCode&#xff09; 递归的实现 public List<TreeNode> preOrder1(TreeNode root){List<TreeNode> retnew ArrayList<>();if(root null)return ret;ret.add(root);List<TreeNode> leftTree …

C#获取当前激活网卡的速度 - 开源研究系列文章

以前用C#编写过一个网络速度计&#xff0c;用于监控计算机当前网卡的上传和下载速度。不过当时这个小应用没有完成&#xff0c;主要是那个获取网络速度的类库没有完成。这次趁有空&#xff0c;就把这个小应用进行了编写。其中涉及到的获取网络速度的代码整理出来了&#xff0c;…

使用nvm安装node.js过程

今天Jade尝试安装nvm&#xff0c;并使用命令安装node.js但是碰到了一些问题&#xff0c;在此作为学习记录分享出来。希望可以留下深刻的印象&#xff1a; 1、概念了解 nvm----- (Node.js version manager)是一个命令行应用&#xff0c;可以协助您快速地 更新、安装、使用、卸载…

游戏工作室如何利用惯性动作捕捉技术制作动画?

随着动捕设备不断进步和游戏行业的发展&#xff0c;惯性动作捕捉技术在游戏开发领域逐渐普及。惯性动作捕捉技术&#xff0c;可以精准捕捉现实世界中的真人动作&#xff0c;并将其精准应用于虚拟角色上&#xff0c;使游戏中的角色动作可以呈现出更写实、逼真和沉浸感&#xff0…

ESP32引脚入门指南(三):从理论到实践(Touch Pin)

引言 ESP32作为物联网领域的明星微控制器&#xff0c;不仅以其强大的网络通信能力著称&#xff0c;还内置了丰富的外设资源&#xff0c;其中就包括电容式触摸传感&#xff08;Capacitive Touch&#xff09;功能。本文旨在深入浅出地介绍ESP32的Touch引脚&#xff0c;带你了解其…

数据分析处理的步骤是什么?制造业企业如何挑选数据分析处理软件?看这篇就够了

随着工业4.0的深入实施以及国家对制造业高质量发展战略的日益强调&#xff0c;工业数据已经崭露头角&#xff0c;成为生产经营活动中至关重要的核心要素。不仅如此&#xff0c;工业数据还作为优质的生产要素&#xff0c;为新兴生产力的形成提供了强有力的支撑&#xff0c;从而推…

《编译原理》阅读笔记:p4-p17

《编译原理》学习第 2 天&#xff0c;p4-p17总结&#xff0c;总计 14 页。 一、技术总结 1.structure of compiler 编译器组成包括&#xff1a;Lexical Analyzer -> Syntax Analazer -> Semantic tree -> Intermediate Code Generator -> Machine-Independent C…

Linux学习笔记1---Windows上运行Linux

在正点原子的教程中学习linux需要安装虚拟机或者在电脑上安装一个Ubuntu系统&#xff0c;但个人觉得太麻烦了&#xff0c;现在linux之父加入了微软&#xff0c;因此在Windows上也可以运行linux 了。具体方法如下&#xff1a; 一、 在Windows上的设置 在window的搜索框内&#…

Bert 在 OCNLI 训练微调

目录 0 资料1 预训练权重2 wandb3 Bert-OCNLI3.1 目录结构3.2 导入的库3.3 数据集自然语言推断数据集路径读取数据集数据集样例展示数据集类别统计数据集类加载数据 3.4 Bert3.4 训练 4 训练微调结果3k10k50k 0 资料 【数据集微调】 阿里天池比赛 微调BERT的数据集&#xff0…

LeetCode HOT 100刷题总结

文章目录 1 哈希1.1 1-1.两数之和&#x1f7e2;1.2 2-49.字母异位词分组&#x1f7e1;1.3 3-128.最长连续序列&#x1f7e1; 2 双指针2.1 4-283.移动零&#x1f7e2;2.2 6-15.三数之和&#x1f7e1;2.3 7-11.盛最多水的容器&#x1f7e1;2.4 8-42.接雨水&#x1f534; 3 滑动窗…

一、计算机基础(Java零基础一)

&#x1f33b;&#x1f33b;目录 一、&#x1f33b;&#x1f33b;剖析学习Java前的疑问&#x1f33b;&#x1f33b;1.1 零基础学习编程1.2 英语不好能学吗&#xff1f;1.3 理解慢能学好吗&#xff1f;1.4 现在学Java晚吗&#xff1f;1.5 Java 和 Python 还有 Go 的选择1.6 Java…

WINDOWS下zookeeper突然无法启动但是端口未占用的解决办法(用了WSL)

windows下用着用着时候突然zookeeper启动不了了。netstat查也没有找到端口占用&#xff0c;就是起不来。控制台报错 java.lang.reflect.UndeclaredThrowableException: nullat org.springframework.util.ReflectionUtils.rethrowRuntimeException(ReflectionUtils.java:147) ~…

Semaphore

文章目录 基本使用Semaphore 应用-改进数据库连接池Semaphore 原理1. 加锁解锁流程2. 源码分析 基本使用 信号量&#xff0c;用来限制能同时访问共享资源的线程上限。 public static void main(String[] args) {// 1. 创建 semaphore 对象Semaphore semaphore new Semaphore(…