持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第24天，点击查看活动详情

ES9语法

异步迭代

 async function uploadImg(array) {
    for await (let i of array) {
        	doSomething(i);
     }
}

Promise.finally()

一个Promise调用链要么成功到达最后一个.then()，要么失败触发.catch()，finally无论成功还是失败都会执行里面的代码。

ES10语法

flat flatMap

flat方法会按照一个可指定的深度递归遍历数组，并且将所有元素遍历到子数组中的元素合并为一个新数组返回

flat(args)//args参数表示合并的深度。

flatMap()方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。

注意的是这个方法是先进行map操作，在做flat操作。

flatMap的中的flat相当于深度为1

// [1, 2, 3, 4]
let arr1 = [1,2, [3,4]];
console.log('arr1: ', arr1.flat());

// [1, 2, 3, 4, [5, 6]]
let arr2 = [1,2, [3, 4, [5, 6]]];
console.log('arr2: ', arr2.flat());

// [1, 2, 3, 4, 5, 6]
let arr3 = [1,2, [3,4, [5,6]]];
console.log('arr3: ', arr3.flat(2));




let arr = [10, 20, 30, 50, 40]
let a = arr.flatMap(x => {
    return [[x]]
})
console.log(a); // [[10], [20], [30], [50], [40]]

// 增加元素
const msgArr = ["it's Sunny in", "California"];
const newArr = msgArr.flatMap(i => i.split(' '))
console.log(newArr); //   ["it's", "Sunny", "in", "California"]

Object fromEntries

这个方法主要entries转换成对象。

const queryParams="name=jojo&age=22"
const searchParams = new URLSearchParams(queryParams)
for (const param of searchParams){
    console.log('param: ', param);
}
const searchObj=Object.fromEntries(searchParams)
console.log('searchObj: ', searchObj);//{name: 'jojo', age: '22'}

trimStart trimEnd

去除一个字符串首尾的空格，这里提供2个方法用做单独去掉前面和后面

const message = "  hello  "
console.log('trim: ', message.trim());
console.log('trimStart: ', message.trimStart());
console.log('trimEnd: ', message.trimEnd());

ES11语法

BigInt

用于表示大的整数，写的时候需要在数值的后面加上n

const big = 9000000000000000n
console.log('big: ', big+1n);//big:  9000000000000001n

空值合并操作符

const aa = ""
const result1=aa || "默认值"
console.log('result1: ', result1);//默认值
const result2=aa ?? "默认值"
console.log('result2: ', result2);//""

可选链操作

这个主要是让我们的代码在进行null和undefined判断时更加清晰简洁

const obj = {
    name:"jojo",
    age:22,
    foo:{
        name:'dd'
    }
}
console.log('obj: ', obj.foo?.name);

for...in标准

用来遍历对象的key

const obj = {
    name:"jojo",
    age:22,
    foo:{
        name:'dd'
    }
}
for(const key in obj){
    console.log('key: ', key);//name,age,foo

}

ES12语法

FinalizationRegistry

这是清理器注册表功能 FinalizationRegistry，用来指定目标对象被垃圾回收机制清除以后，所要执行的回调函数。

let obj={name:'as'}
const registry = new FinalizationRegistry(heldValue => {
     console.log('对象被销毁了',heldValue)
});
registry.register(obj,"obj")

obj=null

WeakRefs

弱引用某一个对象

let obj={name:'weak'}
let info = new WeakRef(obj)

ES13语法总结

method.at()

字符串、数组常用,表示第几个元素，下标0开始


const names=["go","java","JS"]
console.log('names: ', names.at(1));//java
console.log('names: ', names.at(-1));//JS
const str= "hello jojo"
console.log('str: ', str.at(1));//e
console.log('str: ', str.at(-1));//o

Object.hasOwn(obj,propKey)

Object新增的一个静态方法，用于判断一个对象中是否有某个自己的属性。它与Object.prototype.OwnProperty的区别如下

防止对象内部有重写hasOwnProperty。

对于隐式原型指向null的对象，hasOwnProperty无法进行判断。

总结

这一篇主要列举ES9-ES13的一些语法，可能也不是很全，以后碰到一些常用到的可以继续补充。

ES9到ES13常用语法总结