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属性