当前位置: 首页 > news >正文

【ES6.0】- 扩展运算符(...)

【ES6.0】- 扩展运算符...

文章目录

  • 【ES6.0】- 扩展运算符`...`
    • 一、概述
    • 二、拷贝数组对象
    • 三、合并操作
    • 四、参数传递
    • 五、数组去重
    • 六、字符串转字符数组
    • 七、NodeList转数组
    • 八、解构变量
    • 九、打印日志
    • 十、总结

一、概述

**扩展运算符(...)**允许一个表达式在期望多个参数(用于函数调用)或多个元素(用于数字字面量)或多个变量(用于解构赋值)的位置扩展。扩展运算符是ES6中引入的,将可迭代对象展开到其单独的元素中,所谓的可迭代对象就是任何能用for of循环进行遍历的对象。如:数组(数组常用方法)、字符串、Map、Set、DOM节点等。

二、拷贝数组对象

使用扩展符拷贝数组是ES6中常用的操作:

const arr_01=[100,200,300,400,'hello']
let arr_02 = [...arr_01]
let arr_03 = arr_01
arr_02.push('E01','E02')
console.log(arr_02)  //[100,200,300,400,'hello','E01','E02']
console.log(arr_01)  //[100,200,300,400,'hello']
arr_03.push('C01')
console.log(arr_01)  //[100,200,300,400,'hello','C01']

扩展运算符拷贝数组,只有第一层是深拷贝,既对一维数组使用扩展符拷贝就属于深拷贝。

三、合并操作

合并对象,在合并对象时,如果一个键已经存在,它会被具有相同键的最后一个对象给替换。

const halfMonths1 = [101,102,103,104]
const halfMonths2 = [201,202,203,204]
const halfMonths3 = [...halfMonths1,...halfMonths2] //[101,102,103,104,201,202,203,204]
console.log(halfMonths3)

四、参数传递

const sum = (num1,num2)=>num1+num2
console.log(sum(16,17)) //13
console.log(sum(...[16,17])) //13
console.log(sum(...[16,17,18])) //13

从上面的代码看,函数定义了多少个参数,扩展运算符传入的值就是多少个

五、数组去重

const param = ['a','b','c','b','b','c']
const param_01 = [...new Set(param)]
console.log(param_01) //['a','b','c']

与Set一起使用消除数组的重复项。

六、字符串转字符数组

String也是一个可迭代对象,所以也可以使用扩展运算符... 将其转为字符数组。

const title = 'goyeer'
const arr_title = [...title]
console.log(arr_title)

进而可以简单进行字符串截取。

const title = 'goyeer'
const arr_title = [...title]
arr_title.length = 2
console.log(arr_title.join("")) //go

七、NodeList转数组

NodeList对象是节点的集合,通常是由属性和方法返回的

NodeList类似于数组,但不是数组,没有Array的所有方法如:findmapfilter等,但是可以使用 forEach()来迭代。

const nodelist = document.querySelectorAll(".row")
const nodeArray = [...nodelist]
console.log(nodelist)
console.log(nodeArray)

八、解构变量

解构数组,下面演示:

const [first,second,...others] = [100,101,102,103,104]
console.log(first)
console.log(second)
console.log(others)

解构对象,如:

const userInfo = {name:"goyeer",province:"jiangsu",city:"suzhou"}
const {name,..loaction} = userinfo
console.log(name)  //goyeer
console.log(location) //{province:"jiangsu",city:"suzhou"}

九、打印日志

在打印可迭代对象的时候,需要打印每一项可以使用扩展符:

const years = [2018,2019,2020,2021]
console.log(...years) //2018,2019,2020,2021

十、总结

扩展运算符...让代码变的简洁,而且是ES6中非常使用受欢迎的内容

相关文章:

【ES6.0】- 扩展运算符(...)

【ES6.0】- 扩展运算符... 文章目录 【ES6.0】- 扩展运算符...一、概述二、拷贝数组对象三、合并操作四、参数传递五、数组去重六、字符串转字符数组七、NodeList转数组八、解构变量九、打印日志十、总结 一、概述 **扩展运算符(...)**允许一个表达式在期望多个参数&#xff0…...

关于Java中的深拷贝与浅拷贝

Java中的深拷贝和浅拷贝是针对对象和数组等引用数据类型的复制操作。 浅拷贝(Shallow Copy): 对于基本数据类型,浅拷贝直接复制其值。对于引用数据类型,浅拷贝只复制对原对象的引用,而不是复制对象本身。因…...

13.真刀实枪做项目---博客系统(页面设计)

文章目录 1.预期效果1.1博客列表页效果1.2博客详情页效果1.3博客登陆页效果1.4博客编辑页效果 2.实现博客列表页2.1实现导航栏2.2实现版心2.3实现个人信息2.4实现博客列表2.5博客列表页完整代码 3.实现博客正文页3.1引入导航栏3.2引入版心3.3引入个人信息3.4实现博客正文3.5博客…...

VScode 配置用户片段

文件->首选项->配置用户片段->新建全局用户片段 后续就可以通过vv3来直接生成下面的代码 {// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and // description. Add comma separated ids of the l…...

Fedora 项目近日发布了 Fedora Linux 39

导读几经推迟之后,Fedora 项目近日发布了 Fedora Linux 39,这是红帽公司赞助的面向大众的 GNU/Linux 发行版的最新稳定版本,采用了最新的技术和开源应用程序。 Fedora Linux 39 由 Linux 内核 6.5 支持,并提供了一些最新的桌面环境…...

Uniapp连接iBeacon设备——实现无线定位与互动体验(理论篇)

目录 前言: 一、什么是iBeacon技术 二、Uniapp连接iBeacon设备的准备工作 硬件设备: 三、Uniapp连接iBeacon设备的实现步骤 创建Uniapp项目: 四、Uniapp连接iBeacon设备的应用场景 室内导航: 五、Uniapp连接iBeacon设备的未来…...

GCD:异步同步?串行并发?一文轻松拿捏!

GCD 文章目录 GCD进程线程进程与线程的关系进程与线程的区别 任务(执行的代码)队列线程与队列的关系 队列任务**同步执行任务(sync)**辅助方法**异步执行任务(async)**总结栅栏任务迭代任务 队列详细属性QoSAttributes…...

学习c#的第十七天

目录 C# 异常处理 异常的原因 System.Exception 类 如何处理异常 常见的异常类 throw 语句 throw 表达式 try 语句 try-catch 语句 try-finally 语句 try-catch-finally 语句 when 异常筛选器 异步和迭代器方法中的异常 C# 异常处理 C # 中的异常提供了结构化、统…...

龙芯 操作系统选择和安装

龙芯3a5000及之后的cpu底层架构已经从mips64el改为了loongarch64 所以这里分了2种来说明,分别对应3a4000之前的和3a5000之后的 龙芯的系统安装难点在于操作系统的选取和引导 一、烧录工具 制作安装盘使用常规的烧录工具是不行滴,会提示没有\boot\initrd…...

【开源】基于JAVA的智能停车场管理系统

项目编号: S 005 ,文末获取源码。 \color{red}{项目编号:S005,文末获取源码。} 项目编号:S005,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容A. 车主端功能B. 停车工作人员功能C. 系…...

使用IDEA 将Eclipse java工程转为maven格式

使用IDEA 将Eclipse java工程转为maven格式 ①使用idea打开项目,在项目根目录下右键选择 Add Framework Support 选择 maven ,引入maven ②找到项目中的.classpath文件或者lib目录 根据.classpath文件或者lib目录中列举的jar包名,将其依次手…...

CCF CSP认证 历年题目自练Day47

题目 试题编号: 201712-3 试题名称: Crontab 时间限制: 10.0s 内存限制: 256.0MB 样例输入 3 201711170032 201711222352 0 7 * * 1,3-5 get_up 30 23 * * Sat,Sun go_to_bed 15 12,18 * * * have_dinner 样例输出 201711170…...

LeetCode Hot100之十:239.滑动窗口最大值

题目 给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 提示&#xff1a; 1 < nums.length < 10^5 -10^4 < nums[i…...

x264、x265、OpenH264 简要对比

一&#xff1a; x264、x265、OpenH264&#xff0c;都是开源代码库&#xff1b;二&#xff1a; H264(MPEG-4/AVC)、H265(HEVC)&#xff0c;是视频编码格式。是视频标准&#xff1b; H264(MPEG-4/AVC) 简称: H264 或 AVC&#xff1b; H265(HEVC) 简称: H265 …...

二维码智慧门牌管理系统升级解决方案:门牌聚合,让管理更便捷!

文章目录 前言一、传统门牌管理系统的瓶颈二、地图门牌聚合展示的优势三、地图门牌聚合展示的实现方法四、智慧门牌管理系统的未来发展 前言 随着城市的发展和建设&#xff0c;对于地址信息的管理变得越来越重要。而智慧门牌管理系统作为管理地址信息的重要工具&#xff0c;其…...

物联网AI MicroPython学习之语法UART通用异步通信

学物联网&#xff0c;来万物简单IoT物联网&#xff01;&#xff01; UART 介绍 模块功能: UART通过串行异步收发通信 接口说明 UART - 构建UART对象 函数原型&#xff1a;UART(id, baudrate&#xff0c;bits, parity&#xff0c;stop, tx, rx)参数说明&#xff1a; 参数类…...

Git企业开发级讲解(四)

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、理解分⽀二、创建分支三、切换分⽀四、合并分⽀五、删除分⽀六、合并冲突七、分⽀管理策略…...

pytorch 安装 2023年

pytorch网址&#xff1a;https://pytorch.org/get-started/locally/ conda install pytorch torchvision torchaudio pytorch-cuda11.8 -c pytorch -c nvidia我在自己电脑上用这个pip命令完全安装不了&#xff0c;只能用conda安装。复制上面提供的命令&#xff0c;在cmd中直接运…...

人工智能基础_机器学习040_Sigmoid函数详解_单位阶跃函数与对数几率函数_伯努利分布---人工智能工作笔记0080

然后我们再来详细说一下Sigmoid函数,上面的函数的公式 我们要知道这里的,Sigmoid函数的意义,这逻辑斯蒂回归的意义就是,在多元线性回归的基础上,把 多元线性回归的结果,缩放到0到1之间对吧,根据中间的0.5为分类,小于0.5的一类,大于的一类, 这里的h theta(x) 就是概率函数 然…...

Scala---迭代器模式+Trait特质特性

Scala迭代器模式处理数据 scala中创建集合需要内存&#xff0c;集合与集合之间的转换时&#xff0c;每次转换生成新的集合时&#xff0c;新的集合也需要内存。如果有一个非常大的初始集合&#xff0c;需要经过多次转换&#xff0c;每次转换都生成一个新的集合&#xff0c;才能…...

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

Mysql8 忘记密码重置,以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

【C++特殊工具与技术】优化内存分配(一):C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...