ES6扩展运算符

news2025/2/24 21:06:03

1.介绍:
         ... 扩展运算符能将数组转换为逗号分隔的参数序列; 扩展运算符(spread)也是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的 参数序列,对数组进行解包;
2.基本使用:

<!DOCTYPE html> 
<html> 
 
<head> 
 <meta charset="utf-8"> 
 <title>扩展运算符</title> 
</head> 
 
<body> 
 <script> 
 // ... 扩展运算符能将数组转换为逗号分隔的参数序列//声明一个数组 ... 
 const tfboys = ['易烊千玺', '王源', '王俊凯']; 
 // => '易烊千玺','王源','王俊凯' 
 // 声明一个函数 
 function chunwan() { 
 console.log(arguments); 
 } 
 chunwan(...tfboys); // chunwan('易烊千玺','王源','王俊凯')  </script> 
</body> 
 
</html>

应用:

<!DOCTYPE html> 
<html> 
 
<head> 
 <meta charset="utf-8"> 
 <title>扩展运算符应用</title> 
</head> 
 
<body> 
 <div id="d1"></div> 
 <div id="d2"></div> 
 <script> 
 //1. 数组的合并 情圣 误杀 唐探 
 const kuaizi = ['王太利', '肖央']; 
 const fenghuang = ['曾毅', '玲花']; 
 // 传统的合并方式 
 // const zuixuanxiaopingguo = kuaizi.concat(fenghuang); 
 const zuixuanxiaopingguo = [...kuaizi, ...fenghuang]; 
 console.log(zuixuanxiaopingguo); 
 
 //2. 数组的克隆 
 const arr = ['E', 'G', 'M']; 
 const newArr = [...arr]; // ['E','G','M'] 
 console.log(newArr); 
 
 //3. 将伪数组转为真正的数组 
 const divs = document.querySelectorAll('div'); 
 const divArr = [...divs]; 
 console.log(divArr); // arguments 
 </script> 
</body> 
 
</html> 

 

 

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

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

相关文章

IP数据包格式、ICMP封装步骤

IP数据包格式 版本号&#xff1a;占4位&#xff0c;表示IP协议的版本&#xff0c;目前广泛使用的是IPv4&#xff0c;其版本号为4。 首部长度&#xff1a;占4位&#xff0c;表示IP首部的长度&#xff0c;单位为32位字节。首部长度最小为20字节&#xff0c;最大为60字节。 服务…

2.Java--入门程序

一、开发Java程序 步骤&#xff1a; 1.编写代码 其中第一行的HelloWorld叫类名&#xff0c;下面的框架叫main()方法&#xff0c; 类名要和文件名一致&#xff0c; 2.编译代码 用Javac进行编译&#xff0c;将编写的代码保存之后&#xff0c;打开WindowsR输入cmd 用cd文件夹…

40系显卡配置Apollo9.0

文章目录 一、下载安装 Apollo 源码1. 克隆 Apollo 源码 二、 启动Apollo环境容器三、 进入Apollo环境四、编译五、启动 Apollo 进行播包验证5.1 获取数据包5.2 启动 Dreamview5.3 在 Dreamview 中播放数据包5.4 通过命令行播放数据包 宿主机基础环境 系统&#xff1a;ubuntu22…

关键词提取技术:TextRank 详解

1. 什么是 TextRank&#xff1f; TextRank 是一种基于图的排序算法&#xff0c;用于从文本中提取关键词和进行自动摘要。它是受 Google 的 PageRank 算法启发而提出的。与 TF-IDF 不同&#xff0c;TextRank 不依赖外部语料库&#xff0c;也不需要训练数据。它通过构建词语之间的…

JavaWeb合集06-MySQL数据库

六、MySQL数据库 关系型数据库(RDBMS)&#xff1a;建立在关系模型基础上&#xff0c;由多张相互连接的二维表组成的数据库。 特点&#xff1a; 使用表存储数据&#xff0c;格式统一, 便于维护. 使用SQL语言操作&#xff0c;标准统一&#xff0c;使用方便&#xff0c;可用于复杂…

js中map,filter,find,foreach的用法介绍

js中map&#xff0c;filter&#xff0c;find&#xff0c;foreach的用法介绍 在 JavaScript 中&#xff0c;数组提供了一些常用的迭代方法&#xff0c;如 map、filter、find 和 forEach&#xff0c;这些方法允许你对数组中的每个元素进行操作&#xff0c;下面是它们的用法和区别…

用示波器观测RC一阶电路零输入响应是否激励必须是方波信号

概述 RC一阶电路是一种简单但非常重要的电路&#xff0c;广泛应用于滤波、信号处理和时间常数分析等领域。在研究RC电路的动态特性时&#xff0c;零输入响应&#xff08;Natural Response&#xff09;是一项关键内容。本文将详细解析用示波器观测RC一阶电路零输入响应时&#…

基于 MyBatis Plus 分页封装分页方法

一、前言 作为一个 CRUD 工程师&#xff0c;查询必然少不了&#xff0c;分页查询更是常见&#xff0c;市面上也有很多成熟的分页插件&#xff0c;都各有优缺点&#xff0c;这里整理一下&#xff0c;基于 MybatisPlus 的分页插件进一步封装分页的公共方法。 二、对象封装 其实…

elementUI,设置日期,只能选择过去的和今天的日期

在 el-date-picker 组件中加&#xff1a;:picker-options"pickerOptions" <el-form-item label"票据生成日期&#xff1a;"> <el-date-picker v-model"date1" type"daterange" range-separator"至" value-format&…

Webpack 完整指南

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;Webpack篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来webpack篇专栏内容:webpack介绍 目录 介绍 一、webpack 1.1、webpack是什么 1.2 webpack五个核心配置 1.…

学习threejs,拉伸几何体THREE.TubeGeometry管道

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️拉伸几何体THREE.TubeGeome…

医护人员排班|基于springBoot的医护人员排班系统设计与实现(附项目源码+论文+数据库)

私信或留言即免费送开题报告和任务书&#xff08;可指定任意题目&#xff09; 目录 一、摘要 二、相关技术 三、系统设计 四、数据库设计 五、核心代码 六、论文参考 七、源码获取 一、摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息…

js 对网页表格内容进行全选

起因&#xff0c; 目的: 需要从一个数据库&#xff0c;手动选取数据&#xff0c;而且这个网页没有全选按钮&#xff0c;只能一个一个点&#xff0c;很烦。 所以写了一个简单的 js 脚本&#xff0c; 一键全选。 过程: 代码 1 function clickAllBoxes() {const checkboxes do…

HarmonyNext保存Base64文件到Download下

本文介绍如何保存Base64的文件到Download下 参考文档地址&#xff1a; 保存用户文件-Harmony Next 用到的是DOWNLOAD模式保存文件 用户在使用save接口时&#xff0c;可以将pickerMode配置为DOWNLOAD模式&#xff0c;该模式下会拉起授权接口&#xff0c;用户确认后会在公共路径…

ChatGPT丨R语言在生态环境数据统计分析、绘图、模型中的应用

第一单元&#xff1a;生态环境数据统计概述 1.1 生态环境数据特点及统计方法介绍 1&#xff0e;生态环境数据复杂性和多样性 2&#xff0e;生态环境数据类型及分布特点 3&#xff0e;生态环境数据主要统计分析方法及统计检验&#xff08;t-检验、F检验、卡方检验&#xff0…

PostgreSQL Windows系统初始化、登录、创建用户及数据库

文章目录 PostgreSQL初始化PostgreSQL登录 PostgreSQL初始化 initdb 到安装目录下&#xff0c;找到目录E:\postgresql\bin&#xff08;自己的安装目录&#xff09;&#xff0c;在该目录下使用管理员方式打开cmd窗口。 initdb.exe -D "E:\postgresql\bin" E:\postgre…

车载软件架构---软件定义汽车的复杂性

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己,无利益不试图说服别人,是精神上的节…

闹钟、绘制与TCP

闹钟 pro文件&#xff1a; 头文件&#xff1a; #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include<QTimer> #include<QTime> #include<QDebug> #include<QTimerEvent> #include<QDateTime> #include<QTextToSpeech> #i…

sql-labs靶场第十五关测试报告

目录 一、测试环境 1、系统环境 2、使用工具/软件 二、测试目的 三、操作过程 1、寻找注入点 2、注入数据库 ①寻找注入方法 ②爆库&#xff0c;查看数据库名称 ③爆表&#xff0c;查看security库的所有表 ④爆列&#xff0c;查看users表的所有列 ⑤成功获取用户名…

65.DDR3读写控制器的设计与验证(2)

&#xff08;1&#xff09;写FIFO和读FIFO的配置 &#xff08;2&#xff09;AXI接口写入控制代码&#xff1a; module axi_master_write (//全局变量input wire ACLK , //全局时钟input wire ARESETN , …