ES7 -- ES13

news2024/9/22 13:49:13

1. ES7 – 2016

1. 数组的includes方法

  • 数组中是否包含某个元素，返回值为boolean
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.includes(5); // true

2. ** 幂次方

let res = 2 ** 3; // 8

2. ES8 --2017

1. 字符串补全

  • 基本使用
let str = '123';

str.padStart(5, 'A'); // AA123 
str.padEnd(5, 'A'); // 123AA

str.padStart(5, 'ABCD'); // AB123
str.padEnd(5, 'ABCD'); // 123AB

str.padStart(10, 'ABC'); // ABCABCA123
str.padEnd(10, 'ABC'); // 123ABCABCA
  • 指定位置补全

2. Object.values和Object.entries

  • 类似于map.values(),map.entries(),map.keys()
let obj = { name: "zhangsan", age: 18, sex: "male" }

let keys = Object.keys(obj)      //  [ 'name', 'age','sex' ]
// 获取对象的value，并转换为数组
let values = Object.values(obj)    //  [ 'zhangsan', 18,'male' ]
// 将对象转换为二维数组
let entries = Object.entries(obj)   //  [ [ 'name', 'zhangsan' ], [ 'age', 18 ], ['sex','male' ] ]

// 转换为map结构
let map = new Map(Object.entries(obj))
console.log(map);  // Map(3) { 'name' => 'zhangsan', 'age' => 18,'sex' =>'male' }

3. async…await

  • async...await与Promise紧密相连
  1. async定义的函数为异步函数，如有返回值，则返回值一定是Promise
async function myAsyncFunction() {
    return "Hello, world!"
}

console.log(myAsyncFunction())  // Promise {<fulfilled>: 'Hello, world!'}

  1. await ：等待，在await之后的代码需要等待await代码有结果后继续执行

  2. await定义Promise：等待Promise状态发生改变

    • 如果状态变为成功，返回Promise的结果；
    • 如果状态变为失败，则由catch捕获错误
function getPromise() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // reject('Promise rejected!');
            resolve('Promise resolved!');
        },1000);
    });
}
async function myAsyncFunction() {
    try {
    	// result接收promise成功后的返回值
        const result = await getPromise()
        console.log("必须等待await完成，并且promise状态为fulfilled，才能执行下面的代码")
        console.log(result);
    } catch (error) {
        console.error(error);
    }
}

myAsyncFunction();
  1. promise.then
function getPromise() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // reject('Promise rejected!');
            resolve('Promise resolved!');
        },1000);
    });
}
async function myAsyncFunction() {
    try {
        const result = await getPromise().then(value => {
            console.log("Inside then:", value);	// Inside then: Promise resolved!
            return value+"then处理后返回的数据";
        });
        console.log("After then:", result);	//After then: Promise resolved!then处理后返回的数据
    } catch (error) {
        console.error(error);
    }
}

myAsyncFunction();

3. ES9 – 2018

1. promise的catch

作用：当promise状态变为fulfilled，then执行成功的回调，但是在回调中产生的异常没有处理方式

  • catch可以捕获所有的异常,无论是promise还是then里面产生的
  • 如果没有错误的回调，catch也能接收rejected状态
let promise = new Promise((resolve, reject) => {
    // throw new Error("错误")
    // resolve("成功")
    reject("失败")
});
promise.then(value => {
    throw new Error("错误")
    console.log(value)  // 成功 
})
.catch(err => {
    console.log("catch:",err)    // 失败
})

2. promise的finally

  • 最后总会执行的代码
promise.then(value => {
    console.log(value)  // 成功 
}).finally(() => {
    console.log("finally")
})

3. await 和 for…of

  1. 一起开始，按数组的顺序返回
// await 和 for...of
function getData(setTime) {
    return new Promise((resolve, reject) => {
        console.log(setTime+"开始");
        setTimeout(() => {
            resolve(setTime);
        }, setTime);
    });
}

async function fun(){
    // 一起开始执行，返回时按数组的顺序
    for await(let item of [getData(2000),getData(5000),getData(1000)]){
        console.log(item);
    }
}

fun();

在这里插入图片描述

  • 按数组顺序前面的结束才开始后面的，等全部执行完毕后同时返回
  • 像Promise.all方法
async function fun(){
    // 一起开始执行，返回时按数组的顺序
    for (let item of [await getData(2000),await getData(3000),await getData(1000)]){
        console.log(item);
    }
}

在这里插入图片描述

  • 不使用await：一起开始，谁先完成谁先返回
async function fun(){
    // 一起开始执行，返回时按数组的顺序
    for (let item of [ getData(2000), getData(3000), getData(1000)]){
        item.then((res)=>{
            console.log(res);
        });
    }
}

在这里插入图片描述

4.ES10 – 2019

1. 字符串去前或后空格

let str = "    hello world   "
// 去除字符串前后空格
str.trim() // "hello world"
// 去除字符串前空格
str.trimStart() // "hello world   "
// 去除字符串后空格
str.trimEnd() // "    hello world"

2. 转化为对象形式Object.fromEntries()

// 二位数组转对象
let arr = [["name", '张三'], ["age", 18], ["sex", '男']]
let obj = Object.fromEntries(arr)
console.log(obj) // {name: '张三', age: 18, sex: '男'}

// Map 转对象

let map = new Map([["name", '张三'], ["age", 18], ["sex", '男']])
let obj = Object.fromEntries(map)
console.log(obj)  // {name: '张三', age: 18, sex: '男'}

let queryParams = "?name=张三&age=18&sex=男"
let params = new URLSearchParams(queryParams)
let obj = Object.fromEntries(params)
console.log(obj) // {name: '张三', age: '18', sex: '男'}

3. 扁平化数组flat

let arr = [1,[2,3],[4,[5]]]
// 默认只能扁平化二维数组
console.log(arr.flat()) // [1,2,3,4,[5]]
// 参数：扁平化的层数
console.log(arr.flat(2)) // [1,2,3,4,5]
// 不管是几维数组，都可以扁平化为一维数组
console.log(arr.flat(Infinity)) // [1,2,3,4,5]
  • 可以去除数组中的空元素
let arr = [1,2,,4,,6,,8,9,10]
console.log(arr.flat()) // [1,2,4,6,8,9,10]

4. 扁平化并遍历元素flatMap

  • 最多二维数组，
let arr = [1,2,3,[4],5]
let arr1 = arr.flatMap(item => item%2==0?item:[])    
console.log(arr1);  // [2, 4]

5. ES11 – 2020

1. 字符串查找，返回迭代器

let str = `
<ul>
    <li>第一条新闻</li>
    <li>第二条新闻</li>
    <li>第三条新闻</li>
</ul>
`
let reg = /<li>(.*)<\/li>/g;
let res = str.matchAll(reg);

for (let item of res) {
    console.log(item[1]);
}
/*
第一条新闻
第二条新闻
第三条新闻
*/

2. Promise.allSettled

  • 无论成功失败都会执行then的成功回调
let p1 = new Promise((resolve,  reject)=>{
    setTimeout(resolve,2000,"P1")
})
let p2 = new Promise((resolve,  reject)=>{
    setTimeout(resolve,1000,"P2")
})
let p3 = new Promise((resolve,  reject)=>{
    setTimeout(resolve,3000,"P3")
})
Promise.allSettled([p1,p2,p3]).then(res=>{
    console.log(res)	
})

在这里插入图片描述

3. 动态导入import()

// 在需要时导入，import返回promise
    import('./module.js').then(res => {
        console.log(res.var1)
    })

    let res = await import('./module.js')
    console.log(res.var1)

6. ES12 – 2011

1. 字符串中字符替换（全部替换）

let str = 'aabbcc'
let str1 = str.replaceAll('b', 'MM')   
console.log(str1)   // aaMMMMcc

2. Null 赋值运算符 ？？

let id = 1
let x = id ?? 101
console.log(x)	// 1

let id = null
let x = id ?? 101
console.log(x)	// 101

3. 数字分隔符，提高可读性

let num1 = 111222333444
let num2 = 111_222_333_444
console.log(num1 === num2);

4. Promise.any

  • 谁先成功，执行then的成功回调
let p1 = new Promise((resolve,  reject)=>{
    setTimeout(resolve,2000,"P1")
})
let p2 = new Promise((resolve,  reject)=>{
    setTimeout(resolve,1000,"P2")
})
let p3 = new Promise((resolve,  reject)=>{
    setTimeout(resolve,3000,"P3")
})
Promise.any([p1,p2,p3]).then(res=>{
    console.log(res)	// P2
},err=>{
    console.log(err)    
})
  • 全部失败，执行then的失败回调
let p1 = new Promise((resolve,  reject)=>{
    setTimeout(reject,2000,"P1")
})
let p2 = new Promise((resolve,  reject)=>{
    setTimeout(reject,1000,"P2")
})
let p3 = new Promise((resolve,  reject)=>{
    setTimeout(reject,3000,"P3")
})
Promise.any([p1,p2,p3]).then(res=>{
    console.log(res)	
},err=>{
    console.log(err)    // AggregateError: All promises were rejected
})

7. ES13 – 2022

1. 数组的at方法

  • at的参数可以为负数
let arr = [a,b,c,d,e];
arr.at(-2) // d

2. Object.hasOwn()对象中是否包含某个属性

let obj = {
    name: "Rahul",
    age: 23,
    gender: "male"
}
console.log(Object.hasOwn(obj, "name"));

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

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

相关文章

Django 请求配置

Django 请求配置

http请求配置 请求流程 urls.py配置 from first_app import viewsurlpatterns [path(admin/, admin.site.urls),path(test/,views.first_test), ] views.py配置 from django.shortcuts import render,HttpResponse# Create your views here. def first_test(request):prin…
阅读更多...
Kubernetes 安装网络插件flannel报错Init:ImagePullBackOff，flannel下载镜像报错问题解决

Kubernetes 安装网络插件flannel报错Init:ImagePullBackOff，flannel下载镜像报错问题解决

Kubernetes1.28安装网络插件flannel&#xff0c;报错Init:ImagePullBackOff &#xff0c;flannel安装下载镜像失败 问题 1.安装flannel kubectl apply -f https://github.com/flannel-io/flannel/releases/latest/download/kube-flannel.yml 2.flannel报错信息 执行查看安装…
阅读更多...
Flutter 约束布局

Flutter 约束布局

配置插件依赖 设置组件大小 通过属性 childConstraints 实现 分别设置 约束布局一 和 约束布局二 大大小为：160 和 200 点击查看代码文件 class SummaryPageState extends State<SummaryPage1> {ConstraintId constraintId_1 = ConstraintId(ConstraintId_1);Constrain…
阅读更多...
【GUI设计】基于Matlab的图像处理GUI系统（1），用matlab实现

【GUI设计】基于Matlab的图像处理GUI系统（1），用matlab实现

博主简介&#xff1a;matlab图像代码项目合作&#xff08;扣扣&#xff1a;3249726188&#xff09; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 本次案例是基于Matlab的图像处理GUI系统&#xff0c;用matlab实现。 本次内容主要分为两部分&a…
阅读更多...
专题七_分治_快排_归并_算法专题详细总结

专题七_分治_快排_归并_算法专题详细总结

目录 分治 一、分治思想的概念 二、分治思想的步骤 1. 颜⾊分类&#xff08;medium&#xff09; 解析&#xff1a; 2. 快速排序&#xff08;medium&#xff09; 解析&#xff1a; 总结&#xff1a; 3. 快速选择算法&#xff08;medium&#xff09; 解析&#xff1a; …
阅读更多...
【BurpSuite】Cross-site scripting (XSS 学徒部分:1-9）

【BurpSuite】Cross-site scripting (XSS 学徒部分:1-9）

&#x1f3d8;️个人主页&#xff1a; 点燃银河尽头的篝火(●’◡’●) 如果文章有帮到你的话记得点赞&#x1f44d;收藏&#x1f497;支持一下哦 【BurpSuite】Cross-site scripting (XSS 学徒部分:1-9&#xff09; 实验一 Lab: Reflected XSS into HTML context with nothing…
阅读更多...
maven手动导入本地仓库

maven手动导入本地仓库

maven手动导入本地仓库 1.在maven仓库下载对应的依赖 一定要把jar包下载到maven仓库的bin下 2.找到自己仓库的maven仓库下的bin目录cmd进去 在cmd窗口中输入以下命令&#xff1a;&#xff08;这里根据你的groupId、artifactId、version修改即可&#xff09; <!-- https:…
阅读更多...
乱弹篇（53）丹桂未飘香

乱弹篇（53）丹桂未飘香

今天是2024年“秋分”节气&#xff0c;也是第7个中国“农民丰收节”&#xff0c;本“人民体验官”推广人民日报官方微博文化产品《文化中国行看丰收之美》。 截图&#xff1a;来源“人民体验官”推广平台 人民微博说&#xff1a;“春华秋实&#xff0c;岁物丰成。”又说&#…
阅读更多...
dhtmlxGantt 甘特图 一行展示多条任务类型

dhtmlxGantt 甘特图 一行展示多条任务类型

效果如图: 后台拿到数据 处理之后如图: 含义: 如上图所示, 如果一行需要展示多个 需要给父数据的那条添加render:split属性, 子数据的parent为父数据的Id即可 切记 父数据的id 别为0 为0 时 会出现错乱 因为有些小伙伴提出分段展示的数据结构还是有点问题,下面展示一个完整…
阅读更多...
机器人时代的“触觉革命”：一块小传感器如何颠覆你的认知？

机器人时代的“触觉革命”：一块小传感器如何颠覆你的认知？

你是否曾经想过，机器人也能像人类一样有“触觉”？不再是简单的机械操作，而是具备真正的感知能力，能够学会精细的任务。今天我想和你聊聊一种让机器人“长出触觉”的技术：一种小巧的触觉传感器，它的名字叫“AnySkin”。别看它小，它的潜力可一点都不小，或许能彻底改变我们…
阅读更多...
Windows下如何定时执行自定义任务

Windows下如何定时执行自定义任务

目录 一.前言二.设置定时自动执行自定义任务 一.前言 本文环境是Windows11系统。 有时候我们希望能够在Windows下定时自动执行自定义任务&#xff0c;比如检测数据库服务的状态。那在Windows下怎么定时自动执行自定义任务&#xff0c;这篇文章介绍一种方法。 二.设置定时自动…
阅读更多...
NLP 主流应用方向

NLP 主流应用方向

主流应用 文本分类文本匹配序列标注生成式任务 应用细分 文本纠错话者分离 本质为文本分类任务数字归一化 实现数字映射&#xff0c;提高内容可读性 如将一九九九转1999
阅读更多...
AI基础 L26 Introduction to Automated Planning - II

AI基础 L26 Introduction to Automated Planning - II

ADL Action Description Language (ADL) is a richer language than STRIPS. It allows for • Positive and negative literals in states • The open world assumption • Quantified variables in goals as well as conjunctions and disjunctions • Conditional effects …
阅读更多...
Web_php_include 攻防世界

Web_php_include 攻防世界

<?php show_source(__FILE__); echo $_GET[hello]; $page$_GET[page]; while (strstr($page, "php://")) { 以是否检测到php://为判断执行循环$pagestr_replace("php://", "", $page);//传入空值&#xff0c;替换 } include($page); ?&g…
阅读更多...
226. 翻转二叉树之多种解法(递归法、深度优先（迭代法）、广度优先【层序遍历】）

226. 翻转二叉树之多种解法(递归法、深度优先（迭代法）、广度优先【层序遍历】）

文章目录 226. 翻转二叉树题外话思路递归法迭代法:深度优先遍历层序遍历&#xff1a;广度优先遍历拓展总结 226. 翻转二叉树 226. 翻转二叉树 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a;r…
阅读更多...
【JAVA开源】基于Vue和SpringBoot的在线文档管理系统

【JAVA开源】基于Vue和SpringBoot的在线文档管理系统

本文项目编号 T 038 &#xff0c;文末自助获取源码 \color{red}{T038&#xff0c;文末自助获取源码} T038&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析 六、核心代码6.1 查…
阅读更多...
单片机原理及应用详解

单片机原理及应用详解

目录 1. 什么是单片机&#xff1f; 2. 单片机的基本组成 3. 单片机的工作原理 4. 常见的单片机分类 5. 单片机的应用领域 6. 单片机开发流程 7. 单片机开发中的常见问题及解决方案 8. 单片机的未来发展趋势 9. 总结 1. 什么是单片机&#xff1f; 单片机&#xff08;Mi…
阅读更多...
美食共享圈：Spring Boot校园周边美食平台

美食共享圈：Spring Boot校园周边美食平台

第二章 系统分析 2.1 可行性分析 可行性分析的目的是确定一个系统是否有必要开发、确定系统是否能以最小的代价实现。其工作主要有三个方面&#xff0c;分别是技术、经济和社会三方面的可行性。我会从这三个方面对网上校园周边美食探索及分享平台进行详细的分析。 2.1.1技术可行…
阅读更多...
springboot实战学习笔记（5）(用户登录接口的主逻辑)

springboot实战学习笔记（5）(用户登录接口的主逻辑)

接着上篇博客学习。上篇博客是已经基本完成用户模块的注册接口的开发以及注册时的参数合法性校验。具体往回看了解的链接如下。 springboot实训学习笔记&#xff08;4&#xff09;(Spring Validation参数校验框架、全局异常处理器)-CSDN博客文章浏览阅读576次&#xff0c;点赞7…
阅读更多...
[云服务器13] 如何正确选择云服务器？

[云服务器13] 如何正确选择云服务器？

【非广告&#xff0c;仅提供建议&#xff0c;没有强制消费引导】 这期我们不讲搭建教程了&#xff0c;因为我想到前面12篇的教程&#xff0c;有关套餐配置的教程好像都有点敷衍…… 所以这期我们主要来说一说服务器的配置选择和不同配置的应用场景。 网站: 雨云 打开后&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023