ES7-13

最新推荐文章于 2025-06-13 08:24:12 发布

csdn_nevermore

最新推荐文章于 2025-06-13 08:24:12 发布

阅读量175

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/csdn_nevermore/article/details/128811463

版权

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属性
在这里插入图片描述