ES7-13

news/2024/11/24 12:43:32/

ES7-13

  • ES7
  • async和await
  • ES8
  • 字符串填充
  • ES9
    • 新特性
  • 正则拓展
  • Promise.finally
  • 异步迭代
  • ES10-Object.fromEntries
  • trimStart与end
  • ES10 其他新增
  • ES11-Promse.allSettled
  • Moudle新增
    • 2-1动态导入 import()
    • 2-2 import.meta
  • String的matchAll方法
  • bigint
  • 顶层对象globalthis
  • 可选链操作符
  • ES12-新增逻辑操作符
  • 数字分隔符
  • replaceall
  • promise.any
  • WeakRefs
  • FinallizationRegistry(建议少用)
  • ES13类新增特性
  • ES13最外层的await
  • at函数
  • 正则结束索引
  • ES13其他新增

ES7

在这里插入图片描述

async和await

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

ES8

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

字符串填充

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

ES9

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

新特性

1-1对象的剩余参数


let obj ={
name:"kerwin",
age:100,
location:"dalian"
}
let {name,...other} = obj
console.log(name) Wkerwin
console.log(other) //Aage: 100, location: 'dalian'}

1-2对象的扩展运算符

let objl ={
name:"kerwin"
}
let obj2 ={
age:100
}
console. log({..obj1,..obj2})

正则拓展

在这里插入图片描述

Let reg =/(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<dayp[0-9]{2})/

Promise.finally

在这里插入图片描述

异步迭代

在这里插入图片描述
例如:任务1234,for循环里面任务1结束开始任务2,以此类推
错误:会在同一时间执行

function timer(t){
return new Promise(resolve=>{
setTimeout(()=>{
resolve("data-"+t)
},t)
}timer(1000).then(res=>E
console.log(res)
})

正确:

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(await item)
console.log("end-",Date.now())
}
}
test()

ES10-Object.fromEntries

//用处1 列表转化为对象
Let m = new Map()
m.set("name","tiechui")
m.set("age",100)
console.log(Object.fromEntries(m))

在这里插入图片描述

//用处2
Let str = "name=xiaoming&age=18"
Let seatchParams = new URLSearchParams(str)
console.log(0bject.fromEntries(seatchParams))
//用处3
let obj ={
"A":["A1","A2","A3"],
"B":["B1","B1"],
"C":["C1"]
// console.log(obj.map)
Let myarr =Object.entries(obj)
// console.log(myarr)
Let mynewarr = myarr.map([[key,value])=>{
console.log(key,value)
}

trimStart与end

在这里插入图片描述

ES10 其他新增

//2.Symbol对象description 直接拿到
Let s1 = Symbol("name")
console.log(s1.description)

在这里插入图片描述

ES11-Promse.allSettled

在这里插入图片描述

Moudle新增

2-1动态导入 import()

标准用法的import导入的模块是静态的,会使所有被导入的模块,在加载时就被编译(无法做到按需编译,
降低首页加载速度)。有些场景中,你可能希望根据条件导入模块或者按需导入模块,这时你可以使用动态
导入代替静态导入。

<body>
<button>login</button>
<script type="module">
1et rolel="管理员"
let role2="普通用户"
function login(){
return“普通用户"
}
async function render(role){
if(role===rolel){
let res1 = await import("./1.js")
console.log(res1.default)
}else{
let res2 = await import("./2.js")
console.log(res2.default)
}
}

2-2 import.meta

import.meta会返回一个对象,有一个url 属性,返回当前模块的url路径,只能在模块内部使用。

<script type="module">
import obj from'./1.js'
</script>
//1.js
console.log(import.meta)
export default {
}

String的matchAll方法

在这里插入图片描述

bigint

在这里插入图片描述

顶层对象globalthis

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

可选链操作符

在这里插入图片描述

ES12-新增逻辑操作符

在这里插入图片描述

数字分隔符

在这里插入图片描述

replaceall

在这里插入图片描述

promise.any

在这里插入图片描述

WeakRefs

1.只能复杂类型
2.不存在引入计数+1
在这里插入图片描述

FinallizationRegistry(建议少用)

在这里插入图片描述

ES13类新增特性

在这里插入图片描述
可以直接在类的外面直接声明

//private
class Cache{
static #count=0
#obj={}
get(key){
return this.#obj[key]
set(key,value){
this.#obj[key]
= value
Let store = new Cache()
store.set("name","kerwin")
store.set("age",100)
console.log(store)
![在这里插入图片描述](https://img-blog.csdnimg.cn/10994f7f40974a748068aa62c748694f.png)

ES13最外层的await

在这里插入图片描述

at函数

在这里插入图片描述

正则结束索引

在这里插入图片描述

ES13其他新增

1.数组查 findlast findlastindex

//
let res = arr.find(value=>value>13)
let res = arr.findIndex(value=>value>13)
//
let res = arr.findLast(value=>value>13)
//
let res = arr.findLastIndex(value=>value>13)
//
let res= arr.findYvalue=>value%2===0)
//
let res= arr.findLast(value=>value%2===0)
console.log(res)

2.error的cause属性
在这里插入图片描述


http://www.ppmy.cn/news/303418.html

相关文章

2006年数学建模A题 出版社的资源配置思路+代码

2006年数学建模A题 出版社的资源配置思路代码 大体思路解决过程数据处理模型的建立 注意事项摘要单位书号销量的灰预测模型的确立建立及求解各分社实际销售完成比例各分社市场占有率 模型的建立与求解给出版社的建议代码MATLAB灰预测代码LINGO优化模型代码 **提醒&#xff01;此…

有趣的HTML实例(二) 404页面

404 not found&#xff0c;是HTTP对网页错误情况返回的一种状态码 目录 一、前言 二、往期作品回顾 三、作品介绍 四、本期代码介绍 五、效果显示 六、编码实现 index.html style.css 七、获取源码 公众号获取源码 获取源码&#xff1f;私信&#xff1f;关注&#…

NRF52832主机开发速成——一主多从模式(非解析官方例程)

一、前言 因项目需求&#xff0c;需要一个蓝牙设备当主机&#xff0c;去控制其它从机的蓝牙设备。因为想减少开发周期&#xff0c;最先方案是采用信驰达的ND04模块&#xff0c;结果特么的周期反而大大增加了&#xff0c;这里吐槽一下&#xff0c;本来第一批测试模块调试得好好…

微信小程序开发中医药配方小程序药方后台管理系统|前后分离VUE.js

&#x1f496;&#x1f496;更多项目资源&#xff0c;最下方联系我们✨✨✨✨✨✨ 目录 微信小程序项目介绍 资料获取 微信小程序项目介绍 计算机毕业设计java毕设项目之ssm中医药配方小程序-IT实战课堂_哔哩哔哩_bilibili计算机毕业设计java毕设项目之ssm中医药配方小程序-…

基于BP神经网络模型在matlab上实现对中国每年出生人口数量的预测

目录 代码采集数据简要分析结论 代码 1、matlab代码 我借鉴了BP神经网络的实现实例,这个例子数据全部都给好了 %% I.清空环境变量 clear all clc%% II.训练集/测试集的产生 %1.导入数据 x xlsread(人口.xlsx,1,A2:A72); y2 xlsread(人口.xlsx,1,C2:C72); y3 xlsread(人…

2022年五一杯数学建模B题 矿石加工质量控制问题解题全过程及论文和程序

2022年五一杯数学建模B题 矿石加工质量控制问题 多篇论文给您参考 原题再现&#xff1a; 提高矿石加工质量&#xff0c;可以直接或间接地节约不可再生的矿物资源以及加工所需的能源&#xff0c;从而推动节能减排&#xff0c;助力“双碳”目标的实现。矿石加工是一个复杂的过程…

蓝牙模块的分类和对应的属性特点

蓝牙模块的分类&#xff0c;具体的属性特点&#xff0c;蓝牙协议5.0与4.2之间的区别&#xff0c;蓝牙角色 一、蓝牙模块的分类 ESP-WROOM-32 ESP32-WROVER E72-2G4M02S2B E72-2G4M05S1B E104-BT01 E104-BT02 E104-BT10 E73-2G4M04S1A E73-2G4M04S1B E73-2G4M04S1D E73-2G4M0…