ES9学习 -- 对象的剩余参数与扩展运算符 / 正则扩展 / Promise.finally / 异步迭代

文章目录

  • 1. 对象的剩余参数与扩展运算符
    • 1.1 对象的剩余参数
    • 1.2 扩展运算符
  • 2. 正则扩展
  • 3. Promise.finally
  • 4. 异步迭代
    • 4.1 同步遍历器的问题
    • 4.2 异步遍历器使用

1. 对象的剩余参数与扩展运算符

1.1 对象的剩余参数

let obj = {
name:"kerwin",
age:100,
location:"dalian"
}
let {name,...other} = obj
console.log(name,other)
function test({name,...other}){
console.log(name,other)
test(obi)

// kerwin {age:100,location: ‘dalian’}
其中…other 可以拿到对象的剩余参数

1.2 扩展运算符

let obj1= {
name:"tiechui",
location:"dalian"
}
let obj2 = {
name:"xiaoming",
age:18
}
//object.assign
let obj3 = {...obj1,...obj2}
console.log(obj3)

// {name: ‘xiaoming’,location: ‘dalian’,age: 18]

在实际开发中,我们会使用ajax() 封装一些默认的属性和属性值,以备用户忘记或未传入某些参数。

function ajax(options){
const defaultoptions = {
methods:"get",
async:true
}
options = {...defaultoptions,...options}
// 这样写会将用户传入的某些参数值覆盖某些默认参数值
console.log(options)
}
ajax({
url: "/api"
})

// { methods: “get”, async: true, url: “/api”}

2. 正则扩展

正则表达式命名捕获组

JS正则表达式可以返回一个匹配的对象,一个包含匹配字符串的类数组,比如:以Y-MM-DD的格式解析日期,这样的代码可读性很差,并且在改变正则表达式的结构的时候很有可能就会改变匹配对象的索!
ES9允许使用命名捕获 ? ,在打开捕获括号后立即命名

let str= "今天是2022-10-10"
let reg= /[0-9]{4}-[0-9]{2}-[0-9]{2}/
//exec()  捕获
cconsole.log(reg.exec(str))

在这里插入图片描述
如果想要分组单独得到年月日:

let reg= (/[0-9]{4})-([0-9]{2})-([0-9]{2}/)

在这里插入图片描述
使用reg[index] 就可以得到单独的年月日
给各个分组添加 ?<名称> 就可以使得各个分组带有意义,通过名称就可以找到各个分组。

let reg= (/?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2}/)
let {year,month,day} = res.groups
console.log(year,month,day)

// 2022 10 10

3. Promise.finally

我们之前学习Promise 时,当对象调用resolve 时会执行某些程序,调用reject 时会执行某些程序,执行这些程序之前我们要呈现加载中的状态,待到执行了程序之后我们再关闭加载的状态,这时就出现一个问题,我们想在成功或者不成功时都调用某个程序,我们需要怎么写呢?

我们可以使用finally() ,也就是我们可以将这些不论程序执行成功还是失败都要执行的代码,比如隐藏loading 写在finally() 中。

function ajax(){
return new Promise((resolve,reject)=>{
//resolve("data-1111")
reject("err-11111")
})
}
//显示 loading
ajax().then((data)=>{
console.log(data)
// 隐藏 loading
}).catch(err=>{
console.log("err",err)
// 隐藏 loading
}).final1y()=>{
console.log("finally")
//隐藏loading
})

4. 异步迭代

4.1 同步遍历器的问题

现在有一个数组,其中放了几个异步任务,需要它们按照数组任务顺序来执行,也就是上一个执行完了之后再去执行下一个任务。

function timer(t){
return new Promise(resolve=>{
setTimeout(()=>{
resolve("data-"+t)
},t)
})
}
async function test(){
let arr = [timer(1000),timer(2000),timer(3000)]
for(let item of arr){
console.log(await item)
}
test()

在这里插入图片描述
这种将异步任务放在数组中使用循环执行的情况会出现程序并发执行,并不是我们想要的效果。

如果我们将上面for 循环中的代码换成下面的代码,我们会发现第三行和第四行代码是同时出现的,也就是for 循环中的程序只有await 这一行卡住了。

for(let item of arr){
console.log("start-",Date.now())
console.log(await item)
console.log("end-",Date.now())
}

那有没有一种可能我们可以卡住整个for 循环代码快?如果第一个任务不结束,那么整个代码块都不执行;如果第一个任务结束,就让整个代码块就一起执行下来。
异步遍历器就可以实现这种任务调度的情况。

我们先来回顾一下同步遍历器!

let arr = [1,2,3]
// console.log()
let i = arr[Symbol.iterator]()
console.log(i.next())
console.log(i.next())
console.log(i.next())
console.log(i.next())
for(let i of arr){
console.log(i)
}

在这里插入图片描述

4.2 异步遍历器使用

function ajax(data){
return new Promise(resoLve=>{
resolve(data)
})
function *gen(){
yield ajax(111)
yield ajax(222)
}
let g = gen()

我们知道上面的生成器代码可以生成同步遍历器,需要使用next() 进行执行,如果next() 调用次数超过需要的次数还会报错。
这时就需要我们的异步生成器了,但是我们怎样生成异步遍历器呢?
只需要在生成器前面添加async !
异步遍历器需要通过下面的程序顺序进行。
在这里插入图片描述
我们也可以把上面异步遍历器执行代码换成下面的代码

async function test(){
let res1 = await g.next()
console.log(res1)
let res2 = await g.next()
console.log(res2)
let res3 = await g.next()
console.log(res3)
}
async function test(){
let list = [g.next(),g.next(),g.next()]
for await(let i of list){
console.log(i)
}
// 

学习过异步遍历器后,对于一开始学习异步迭代提出的问题我们可以通过下面的代码改进。

function timer(t){
return new Promise(resolve=>{
setTimeout(()=>{
resolve("data-"+t)
},t)
})
}
async function *gen(){
yield timer(1000)
yield timer(2000)
yield timer(3000)
async function test(){
let g = gen()
let arr = [g.next(),g.next(),g.next()]
for await(let item of arr){
console.log("start-",Date.now())
console.log(item)
console.log("end-",Date.now())
test()

在这里插入图片描述
注意使用for await 循环不能去循环普通的数组,会出问题的,我们一般使用这个循环去遍历由异步生成器生成的对象组成的数组。

在node 中使用任务调度使用的较多。

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

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

相关文章

推理端框架简介 高通SNPE 神经网络处理引擎 阿里巴巴 MNN 腾讯 FeatherCNN 端侧推理引擎 卷积计算优化 卷积计算优化

高性能计算(High performance computing, 缩写HPC) 指通常使用很多处理器(作为单个机器的一部分) 或者某一集群中组织的几台计算机(作为单个计 算资源操作)的计算系统和环境。 有许多类型的HPC 系统,其范围从标准计算机的大型集群,到高度专用的硬件。 大多数基于集群的H…

MVCC详细总结

简介 MVCC&#xff08;Multi-Version Concurrency Control&#xff09;是一种多版本并发控制机制&#xff0c;主要用于数据库管理系统中&#xff0c;实现对数据库的并发访问。在编程语言中&#xff0c;MVCC可以实现事务内存。 MVCC的特点是读不加锁&#xff0c;读写不冲突。MVC…

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 视频图像处理基础操作 之 视频捕获/存储/提取/合成/合并

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 视频图像处理基础操作 之 视频捕获/存储/提取/合成/合并 目录 Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 视频图像处理基础操作 之 视频捕获/存储/提取/合成/合并 一、简单介绍 二、视频处理流程和原理 三、视频的捕获…

(表征学习论文阅读)FINITE SCALAR QUANTIZATION: VQ-VAE MADE SIMPLE

1. 前言 向量量化&#xff08;Vector Quantization&#xff09;或称为矢量量化最早在1984年由Gray提出&#xff0c;主要应用于数据压缩、检索领域&#xff0c;具体的阐述可以参考我写的另一篇关于VQ算法的文章。随着基于神经网络的离散表征学习模型的兴起&#xff0c;VQ技术也…

二维动画制作软件 Animate 2024 for mac激活版

Animate 2024 for Mac是一款功能强大的二维动画制作软件&#xff0c;专为Mac用户打造。它提供了丰富的动画编辑功能&#xff0c;使用户能够轻松创建出生动逼真的动画作品。无论是短片、广告还是游戏等应用领域&#xff0c;Animate 2024都能发挥出出色的表现。 软件下载&#xf…

部署k8s客户端,及docker私仓部署

1.部署一个docker私仓 mkdir /opt/docker/registry #配置仓库密码 mkdir /opt/docker/auth cd /opt/docker/auth htpasswd -Bbn admin admin > htpasswd#运行docker私仓服务&#xff0c;下面端口5000:5000 前面的5000对应本机端口可以自定义 docker run -itd \ -v /opt/d…

【Layui】------ layui实现table表格拖拽行、列位置的示例代码

一、完整的示例代码&#xff1a;&#xff08;请使用layui v2.8.3的版本&#xff09;看懂就能用、不要照搬、照搬会出错误、拷贝重要代码改改符合你自己的需求。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><…

学习笔记——C语言基本概念结构体共用体枚举——(10)

1、结构体 定义新的数据类型&#xff1a; 数据类型&#xff1a;char short int long float double 数组 指针 结构体 结构体&#xff1a; 新的自己定义的数据类型 格式&#xff1a; struct 名字{ 成员 1&#xff1b; 成员 2&#xff1b; 。 。 。 …

MapReduce [OSDI‘04] 论文阅读笔记

原论文&#xff1a;MapReduce: Simplified Data Processing on Large Clusters (OSDI’04) 1. Map and Reduce Map&#xff1a;处理键值对&#xff0c;生成一组中间键值对Reduce&#xff1a;合并与同一中间键相关的所有中间值process overview&#xff1a;分割输入数据&#x…

DSO9254A安捷伦DSO9254A示波器

181/2461/8938产品概述&#xff1a; 安捷伦DSO9254A的带宽为2.5 GHz&#xff0c;配备15英寸XGA液晶显示屏&#xff0c;采用静音封装&#xff0c;厚度仅为9英寸&#xff08;23厘米&#xff09;&#xff0c;重量仅为26磅&#xff08;11.8千克&#xff09;。DSO9254A集成了一个功…

UE4_自定义反射和折射和法线图

UE4 自定义反射和折射和法线图 2020-05-22 09:36 将ReflectionVector和反射图像进行ViewAlignedReflection,输出的textrue和相机位置CameraPosition的onePlus进行Dot点乘之后乘以一个float系数反射度&#xff0c;输出给固有色&#xff0c;就有反射效果了。球型反射。 折射&…

Coze工作流介绍(一)

Coze工作流介绍 工作流支持通过可视化的方式&#xff0c;对插件、大语言模型、代码块等功能进行组合&#xff0c;从而实现复杂、稳定的业务流程编排&#xff0c;例如旅行规划、报告分析等。 当目标任务场景包含较多的步骤&#xff0c;且对输出结果的准确性、格式有严格要求时…

JAVAEE—Callable接口,ReentrantLock,synchronized的工作过程

文章目录 Callable接口的用法Callable与FutureTask类 加锁的工作过程什么是偏向锁呢&#xff1f;举个例子 轻量级锁重量级锁 ReentrantLockReentrantLock 的用法: Callable接口的用法 Callable 是一个 interface . 相当于把线程封装了一个 “返回值”. 方便程序猿借助多线程的…

分布式IO模块PLC扩展模拟量模块

BL200是一款结构紧凑、体积小的分布式IO耦合器,支持ModbusTCP协议,采用嵌入式硬件,主频380Mhz,基于LinuxOS,采用独特的MAC层数据交换技术的双网口技术实现级联,中间设备宕机不影响后面设备的数据传输,可支持高达32个AI、DI、DO、热电阻、热电偶、RS485等种类的IO板,广泛应用于工…

Ubuntu20.04使用Neo4j导入CSV数据可视化知识图谱

1.安装JDK&#xff08; Ubuntu20.04 JDK11&#xff09; sudo apt-get install openjdk-11-jdk -y java -version which java ls -l /usr/bin/java ls -l /etc/alternatives/java ls -l /usr/lib/jvm/java-11-openjdk-amd64/bin/java确认安装路径为/usr/lib/jvm/java-11-openjd…

openGauss 基本功能和特性

基本功能和特性 背景信息 openGauss是一个单机数据库&#xff0c;具备关系型数据库的基本功能&#xff0c;以及企业特性的增强功能。 基本功能 标准SQL支持 支持标准的SQL92/SQL99/SQL2003/SQL2011规范&#xff0c;支持GBK、GB18030、GB18030_2022、UTF-8、SQL ASCII以及Lat…

Celery的任务流

Celery的任务流 在之前调用任务的时候只是使用delay()和apply_async()方法。但是有时我们并不想简单的执行单个异步任务&#xff0c;比如说需要将某个异步任务的结果作为另一个异步任务的参数或者需要将多个异步任务并行执行&#xff0c;返回一组返回值&#xff0c;为了实现此…

STL是什么?如何理解STL?

文章目录 1. 什么是STL2. STL的版本3. STL的六大组件4. 如何学习STL5.STL的缺陷 1. 什么是STL STL(standard template libaray-标准模板库)&#xff1a;是C标准库的重要组成部分&#xff0c;不仅是一个可复用的组件库&#xff0c;而且是一个包罗数据结构与算法的软件框架。 2. …

OpenHarmony实战开发-使用一次开发多端部署实现一多设置典型页面

介绍 本示例展示了设置应用的典型页面&#xff0c;其在小窗口和大窗口有不同的显示效果&#xff0c;体现一次开发、多端部署的能力。 1.本示例使用一次开发多端部署中介绍的自适应布局能力和响应式布局能力进行多设备&#xff08;或多窗口尺寸&#xff09;适配&#xff0c;保…

WebGIS 之 vue3+vite+ceisum

1.项目搭建node版本在16以上 1.1创建项目 npm create vite 项目名 1.2选择框架 vuejavaScript 1.3进入项目安装依赖 cd 项目名 npm install 1.4安装cesium依赖 pnpm i cesium vite-plugin-cesium 1.5修改vite.config.js文件 import { defineConfig } from vite import vue fr…