ES7-10:async和await、异步迭代..

news2024/11/25 2:54:40

1-ES7新特性

在这里插入图片描述
indexof如果没有就返回-1,有就返回索引
如果仅仅查找数据是否在数组中,建议使用includes,如果是查找数据的索引位置,建议使用indexOf更好一些

2-ES8-async和await

所有的需要异步处理的Promise对象都写在async中await等待结果

async、await

使异步操作变得更加方便
await后面可以接 非promise对象返回该对象的结果 或者 promise对象返回对应的值
await会等待ajax执行完再执行下一步,

1. async返回值是非promise对象,fulfilled,then
2. async返回的是promise对象,fulfilled or rejected ,then or catch, */

异步编程的成功和失败两种捕获错误方式

Promise、try catch

		function ajax1(){
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    console.log("data-111");
                    resolve("data-111")
                },1000)
            })
        }
        function ajax2(){
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    console.log("data-111");
                    resolve("data-111")
                },1000)
            })
        }
        async function test(){
            // await会等待ajax执行完再执行下一步,如果没有await由于延时器延时1s会先打印出res再打印出ajax里面的
            let res1=await ajax1()
            console.log(res);
            let res2=await ajax2(res1)
            // 渲染页面
        }
        test().then(res=>{
            console.log(res);
            // 渲染页面
        }).catch(err=>{
            console.log("err",err);
            // 处理错误
        })
        
        try{
            let res1=await ajax1()
            console.log(res);
            let res2=await ajax2(res1)
            // 渲染页面
            console.log("渲染页面");
        }catch(error){
        	//处理错误
            console.log("err",error);
        }

3-对象方法扩展

getOwnPropertyDescriptors

不仅能克隆属性,还能克隆get、set这种拦截的东西

		obj ={
            name:"kerwin",
            age:100
        }
        console.log(Object.values(obj));
        console.log(Object.entries(obj));
        let m=new Map(Object.entries(obj))

        let obj1={}
        // Object.assign(obj1,obj)这种复制丢三落四,
        console.log(Object.getOwnPropertyDescriptors(obj));
        // defineProperties可以设置某个对象的所有属性,defineProperty每次只能设置一个
        Object.defineProperties(obj1,Object.getOwnPropertyDescriptors(obj))

4-字符串填充padStart()、padEnd()

padStart()、padEnd()方法可以使得字符串达到固定长度,有两个参数,字符串目标长度和填充内容。

在这里插入图片描述

// 01 02 03 04...12
        let list=[]
        for(let i=1;i<13;i++){
            list.push(String(i).padStart(2,"0"))//i是一个数字,后面添加的0是字符串,i需要转化为字符串
        }

5-ES9-rest与扩展运算符

对象的剩余参数:传参和赋值的时候都可以把剩余的属性和属性值放在一个新的对象中

在这里插入图片描述

function ajax(options){
            // 默认属性
            const defaultOptions={
                methods:"get",
                async:true,
            }
            options={...defaultOptions,...options}//把defaultOptions写前面防止后面加入相同的没法覆盖
        }
        ajax({
            url:"/api",
            methods:"post"
        })
        // 复制克隆
        let obj5={
            name:"kerwin",
            age:100
        }
        let obj6={...obj5}

6-正则表达式命名捕获组

在这里插入图片描述
在这里插入图片描述

7-Promise.finally()

里面写成功和失败以后都想做的一件事

		function ajax(){
            return new Promise((resoLve,reject)=>{
                //resolve("data-1111");
                reject("err-11111")
            })
        }
        //显示loading
        ajax().then((data)=>{
                    console.log(data)
                }).catch(err=>{
                console.log("err",err)
                }).finally(()=>{
                    // 写成功和失败之后都想做的一件事
                console.log("finally");
                    //比如:隐藏1oading
                })

8-异步迭代

异步遍历器生成函数

面试题:几个异步任务放在一个数组中,写一个方法用for循环按照任务顺序依次执行(浏览器中用的少,node,js中用的多)
:先写异步生成器把9个任务放到yield后,再写一个异步方法,里面for循环9次调用g.next()后在for await里按照顺序依次执行
在这里插入图片描述

两种写法:
1…then().then()链式调用
2.async和for await循环配合使用
// 简单理解就是yield返回的是一个遍历器对象,所以用for of遍历的时候由于await,就等元素自己遍历完,再下一个元素,就是异步了

// function timer(t){
        //     return new Promise(resolve=>{
        //         setTimeout(()=>{
        //             resolve("data-"+t)
        //         },t)
        //     })
        // }
        //  function test(){
        //     // 放在数组中,只要for循环一开始就会进行并发任务,同时执行
        //     let arr=[timer(1000),timer(2000),timer(3000)]
        //     // 上一步的end和下一步的start是同时出现的,达不到一个timer(1000)结束timer(2000)再开始的效果
        //     for(let item of test){
        //         console.log("start-",Date.now());
        //         console.log( item);
        //         console.log("end-",Date.now());
        //     }
        // }
        function timer(t){
            return new Promise(resolve=>{
                setTimeout(()=>{
                    resolve("data-"+t)
                },t)
            })
        }
        // 异步生成器
        async function *gen(){
            yield timer(1000)
            yield timer(2000)
            yield timer(3000)
        }
 1.       async function test(){
        // g就是一个异步遍历器
            let g=gen();
            let arr=[g.next(),g.next(),g.next()]
            // for await就是为了异步遍历器依次进行遍历的一种写法
            // 上面写的let arr=[timer(1000),timer(2000),timer(3000)]只是一个普通数组,里面的三个任务是同时开始的
            for await(let item of arr){
                console.log("start-",Date.now());
                console.log( item);
                console.log("end-",Date.now());
            }
        }
 2.       // let g=gen();
        // g.next().then(res=>{
        //     console.log(res);
        //     // 这里必须return下一个才能调用
        //     return g.next();
        // }).then(res=>{
        //     console.log(res);
        // })
        }
        test()

9-ES10

Object.fromEntries

在这里插入图片描述
把对象转换为另一种对象
在这里插入图片描述

trimStart与trimEnd()去首尾空格

在这里插入图片描述

10-其他新增

数组的flat flatMap

Symbol对象 description属性

(取出Symbol里面的值)

let s1=Symbol("name")
console.log(s1.description)

try catch(error){};

(error)不需要参数可写可不写

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

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

相关文章

HEC-HMS水文模型

HEC-HMS是美国陆军工程兵团水文工程中心开发的一款水文模型。HMS能够模拟各种类型的降雨事件对流域水文&#xff0c;河道水动力以及水利设施的影响&#xff0c;在世界范围内得到了广泛的应用。它有着完善的前后处理软件&#xff0c;能有效减轻建模的负担&#xff1b;能够与HEC开…

数据挖掘实战-基于机器学习的垃圾邮件检测模型(文末送书)

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

30.WEB渗透测试-数据传输与加解密(4)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;29.WEB渗透测试-数据传输与加解密&#xff08;3&#xff09;-CSDN博客 加解密需要用到的源…

【linux】sudo 与 su/su -之间的区别

一、区别 二、其他 大概是因为使用 su 命令或直接以 root 用户身份登录有风险&#xff0c;所以&#xff0c;一些 Linux 发行版&#xff08;如 Ubuntu&#xff09;默认禁用 root 用户帐户。鼓励用户在需要 root 权限时使用 sudo 命令。 然而&#xff0c;您还是可以成功执行 su…

4.10作业

//.h文件#ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTimerEvent> //定时器事件类 #include <QTime> //时间类 #include <QString> #include <QPushButton> //按钮类 #include <QLabel> //标签类 #include <QT…

<-泛型->

1.泛型的概念 所谓泛型&#xff0c;就是允许在定义类, 接口 时通过一个"标识"表示类中某个属性的类型或者某个方法的返回值或形参类型.这个类型参数将在使用时确定. 2.举例 (1). 集合类在设计阶段/声明阶段不能确定这个容器到底存的是什么对象&#xff0c;所以在JDK…

蓝桥杯PythonB组练习——矩形面积交

一、题目 问题描述   平面上有两个矩形&#xff0c;它们的边平行于直角坐标系的X轴或Y轴。对于每个矩形&#xff0c;我们给出它的一对相对顶点的坐标&#xff0c;请你编程算出两个矩形的交的面积。 输入格式   输入仅包含两行&#xff0c;每行描述一个矩形。   在每行中…

Python 新手最容易踩的坑

Python新手最容易踩的坑 缩进错误忘记引入模块使用未定义的变量不理解变量作用域字符串格式化错误乱用关键字多余的符号本期图书推荐&#xff1a;Python算法小讲堂---39个算法案例带你玩转Python内容简介获取方式 在学习 Python 的过程中&#xff0c;新手往往会遇到一些常见的陷…

HarmonyOS开发实例:【分布式数据管理】

介绍 本示例展示了在eTS中分布式数据管理的使用&#xff0c;包括KVManager对象实例的创建和KVStore数据流转的使用。 通过设备管理接口[ohos.distributedDeviceManager]&#xff0c;实现设备之间的kvStore对象的数据传输交互&#xff0c;该对象拥有以下能力 ; 1、注册和解除注…

SpringBoot菜品分页查询模块开发(多表连接查询)

需要注意的地方 为什么创建VO类怎么进行多表连接查询分页查询的统一返回结果类PageResult分页查询Mapper的返回结果是Page<目标实体类> 需求分析与设计 一&#xff1a;产品原型 系统中的菜品数据很多的时候&#xff0c;如果在一个页面中全部展示出来会显得比较乱&…

力扣HOT100 - 238. 除自身以外数组的乘积

解题思路&#xff1a; 当前位置的结果就是它左部分的乘积再乘以它右部分的乘积。因此需要进行两次遍历&#xff0c;第一次遍历用于求左部分的乘积&#xff0c;第二次遍历在求右部分的乘积的同时&#xff0c;再将最后的计算结果一起求出来。 class Solution {public int[] prod…

Transformer详解和知识点总结

目录 1. 注意力机制1.1 注意力评分函数1.2 多头注意力&#xff08;Multi-head self-attention&#xff09; 2. Layer norm3. 模型结构4. Attention在Transformer中三种形式的应用 论文&#xff1a;https://arxiv.org/abs/1706.03762 李沐B站视频&#xff1a;https://www.bilibi…

(学习日记)2024.04.05:UCOSIII第三十三节:互斥量

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…

SpringBoot第一个hello world项目

文章目录 前言一、Spring Boot是什么&#xff1f;二、使用步骤1. 创建项目2.书写测试 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 例如&#xff1a;随着人工智能的不断发展&#xff0c;机器学习这门技术也越来越重要&#xff0c;很多人都开启了…

DRL-VWAP算法

摘要 在量化策略的交易端&#xff0c;为了更好的扩大策略的资金容量必须要考虑策略冲击陈本的降低。本文梳理了传统 VWAP 存在的诸多弊端&#xff0c;主要在于对于日内交易信息的缺失与忽略市场行情的影响。本文梳理了传统VWAP 算法存在的主要弊端&#xff0c;并改写了传统 VW…

20240409在全志H3平台的Nano Pi NEO CORE开发板运行的Ubuntu Core更新boot.img(eMMC启动)

20240409在全志H3平台的Nano Pi NEO CORE开发板运行的Ubuntu Core更新zImage内核 2024/4/9 9:21 一、生成zImage: 参考资料&#xff1a; http://wiki.friendlyelec.com/wiki/index.php/NanoPi_NEO_Core/zh#.E7.83.A7.E5.86.99.E5.88.B0eMMC NanoPi NEO Core/zh 6 FriendlyCore…

【leetcode面试经典150题】37. 矩阵置零(C++)

【leetcode面试经典150题】专栏系列将为准备暑期实习生以及秋招的同学们提高在面试时的经典面试算法题的思路和想法。本专栏将以一题多解和精简算法思路为主&#xff0c;题解使用C语言。&#xff08;若有使用其他语言的同学也可了解题解思路&#xff0c;本质上语法内容一致&…

大数据相关组件安装及使用

自学大数据相关组件 持续更新中。。。 一、linux安装docker 1、更新yum sudo yum update2、卸载docker旧版本 sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine3、…

菜鸟IPO折戟背后:估值大幅下降,阿里巴巴为“分拆之痛”买单

撰稿|行星 来源|贝多财经 近日&#xff0c;阿里巴巴集团&#xff08;下称“阿里巴巴”或“阿里”&#xff09;发布公告&#xff0c;称其物流子公司菜鸟&#xff08;同菜鸟物流、菜鸟网络&#xff09;撤回在港交所的首次公开发行及上市申请&#xff0c;并计划收购菜鸟少数股东…

LeetCode31. 下一个排列(Java)

题目&#xff1a; 整数数组的一个 排列 就是将其所有成员以序列或线性顺序排列。 例如&#xff0c;arr [1,2,3] &#xff0c;以下这些都可以视作 arr 的排列&#xff1a;[1,2,3]、[1,3,2]、[3,1,2]、[2,3,1] 。 整数数组的 下一个排列 是指其整数的下一个字典序更大的排列…