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

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)不需要参数可写可不写

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【MATLAB源码-第184期】基于matlab的FNN预测人民币美元汇率 输出预测图误差图RMSE R2 MAE MBE等指标

操作环境&#xff1a; MATLAB 2022a 1、算法描述 前馈神经网络&#xff08;Feedforward Neural Network, FNN&#xff09;是最简单也是应用最广泛的人工神经网络之一。在许多领域&#xff0c;尤其是数据预测方面&#xff0c;FNN已经展现出了卓越的性能和强大的适应性。 一、…

贪心算法|406.根据身高重建队列

力扣题目链接 class Solution { public:static bool cmp(const vector<int>& a, const vector<int>& b) {if (a[0] b[0]) return a[1] < b[1];return a[0] > b[0];}vector<vector<int>> reconstructQueue(vector<vector<int>…

鸿蒙应用开发之图案密码锁组件

前面学习了导航组件,现在来学习另一个密码设置和验证组件,这种组件比较常用。因为当用触屏手机之后,屏幕上就可以滑动操作,比普通PC电脑要多一些功能了。早前的密码都是输入数字,没有滑动输入九宫格的密码。 大体如下面的界面: 采用这种密码,一般情况下是不用记住数字,…

Vue - 你知道Vue中key的工作原理吗

难度级别:中级及以上 提问概率:80% 在Vue项目开发中,并不推荐使用索引做为key,以为key必须是唯一的,可以使用服务端下发的唯一ID值,也不推荐使用随机值做为key,因为如果每次渲染都监听到不一样的key,那么节点将无法复用,这与Vue节省…

Kotlin:常用标准库函数(let、run、with、apply、also)

一、let 扩展函数 Kotlin标准库函数let可用于范围确定和空检查。当调用对象时&#xff0c;let执行给定的代码块并返回其最后一个表达式的结果。对象可以通过引用(默认情况下)或自定义名称在块中访问。 let扩展函数源码 let.kt文件代码 fun main() {println("isEmpty $is…

企业如何防止内部人员泄密(实用方法分享)

“老干妈配方遭泄露”事件你们一定有所耳闻吧&#xff01; 2016年5月&#xff0c;“老干妈”工作人员发现&#xff0c;本地另一家食品加工企业生产的一款产品与老干妈品牌同款产品相似度极高。 经查&#xff0c;涉嫌窃取此类技术的企业从未涉足该领域&#xff0c;绝无此研发能…

C/S医学检验LIS实验室信息管理系统源码 医院LIS源码

LIS系统即实验室信息管理系统。LIS系统能实现临床检验信息化&#xff0c;检验科信息管理自动化。其主要功能是将检验科的实验仪器传出的检验数据经数据分析后&#xff0c;自动生成打印报告&#xff0c;通过网络存储在数据库中&#xff0c;使医生能够通过医生工作站方便、及时地…

基于Java+SpringBoot+Vue音乐网站(源码+文档+部署+讲解)

一.系统概述 随着我国经济的高速发展与人们生活水平的日益提高&#xff0c;人们对生活质量的追求也多种多样。尤其在人们生活节奏不断加快的当下&#xff0c;人们更趋向于足不出户解决生活上的问题&#xff0c;音乐管理展现了其蓬勃生命力和广阔的前景。与此同时&#xff0c;为…

[【JSON2WEB】 13 基于REST2SQL 和 Amis 的 SQL 查询分析器

【JSON2WEB】01 WEB管理信息系统架构设计 【JSON2WEB】02 JSON2WEB初步UI设计 【JSON2WEB】03 go的模板包html/template的使用 【JSON2WEB】04 amis低代码前端框架介绍 【JSON2WEB】05 前端开发三件套 HTML CSS JavaScript 速成 【JSON2WEB】06 JSON2WEB前端框架搭建 【J…

06 Php学习:字符串

PHP 中的字符串变量 在 PHP 中&#xff0c;字符串是一种常见的数据类型&#xff0c;用于存储文本数据。字符串变量可以包含字母、数字、符号等字符&#xff0c;并且可以进行各种操作和处理。以下是关于 PHP 中字符串变量的一些重要信息&#xff1a; 定义字符串变量&#xff1…

3 突破编程_前端_SVG(rect 矩形)

1 rect 元素的基本属性和用法 在SVG中&#xff0c;<rect> 元素用于创建矩形。 <rect> 元素有一些基本的属性&#xff0c;可以用来定义矩形的形状、位置、颜色等。以下是这些属性的详细解释&#xff1a; x 和 y &#xff1a;这两个属性定义矩形左上角的位置。 x …

Day:005 | Python爬虫:高效数据抓取的编程技术(爬虫效率)

爬虫之多线程-了解 单线程爬虫的问题 因为爬虫多为IO密集型的程序&#xff0c;而IO处理速度并不是很快&#xff0c;因此速度不会太快如果IO卡顿&#xff0c;直接影响速度 解决方案 考虑使用多线程、多进程 原理&#xff1a; 爬虫使用多线程来处理网络请求&#xff0c;使用线程…

服务器云主机进入黑洞了怎么解决

黑洞是指服务器受进犯流量超过本机房黑洞阈值时&#xff0c;云核算服务商屏蔽服务器的外网拜访。当服务器进入黑洞一段时间后&#xff0c;假如体系监控到进犯流量中止&#xff0c;黑洞会主动解封。 1&#xff1a;进入“黑洞”了&#xff0c;该怎么办&#xff1f; 由于黑洞是各…

unable to find a medium containing a live file system解决办法!

背景&#xff1a; 用Ventoy制作U盘系统安装盘&#xff0c;只需要把ISO镜像拷进去就可以&#xff0c;可以放多少个镜像取决于U盘的大小&#xff0c;无需重复制作。Ventoy 将U盘的第一个分区默认格式化为exFAT文件系统来存放ISO文件。 但是&#xff0c;今天鲲鹏920平台安装银河…

第十三届蓝桥杯C/C++大学B组真题题解(一)

1、扫雷 #include <bits/stdc.h> using namespace std; int n,m; const int N110; int g[N][N]; int dx[8]{-1,-1,-1,0,1,1,1,0}; int dy[8]{-1,0,1,1,1,0,-1,-1}; int dfs(int x,int y){int ans0;for(int i0;i<8;i){int axdx[i],bydy[i];if(a<0||a>n-1||b<0…

水牛社:互联网赚钱秘籍,免费项目,你真敢要吗?

免费是最贵的。真正理解并使用这句话的只有少数人&#xff0c;今天在网上分享一下免费项目背后的逻辑&#xff0c;抛开现象&#xff0c; 本质是最重要的。 我从事互联网工作15年。不管是过去还是现在&#xff0c;总有人喜欢问有没有免费项目&#xff1f; 其实我平时懒得回答…

面试经典算法系列之链表2 -- 环形链表

面试经典算法8-环形链表 LeetCode.141 公众号&#xff1a;阿Q技术站 问题描述 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&am…

day7 nest商业项目初探·三(java转ts全栈/3R教室)

背景&#xff1a;从头一点点学起太慢了&#xff0c;直接看几个商业项目吧&#xff0c;看看根据Java的经验&#xff0c;自己能看懂多少&#xff0c;然后再系统学的话也会更有针对性。今天看下一个项目 * 【法国 | 3.75w】Nextjs&#xff1a;小雯工作室创意官网 &#xff08;2023…

C语言进阶|顺序表

✈顺序表的概念及结构 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列。 线性表是一种在实际中广泛使 用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列、字符串.. 线性表在逻辑上是线性结构&#xff0c;也就说是连…

Proxmox VE qm 方式备份虚拟机

前言 使用qm 备份Proxmox VE虚拟机&#xff0c;高效便捷。 登录Proxmox VE shell 执行备份操作 备份建议关闭虚拟机 qm shutdown 虚拟机名称号--compress 备份格式 0(代表vma格式) gzip lzo zstd--storage local&#xff08;备份的位置&#xff09;备份默认位置/var/lib/…