【前端】ES13：ES13新特性

1 类新增特性

1.1 私有属性和方法

class Cache{
    #obj = {}

    get(key){
        return this.#obj[key]
    }
	set(key, value){
	    this.#obj[key] = value
	}
}

let cache = new Cache()
cache.set("name", "kerwin")

class Person{
	//不需要外部传参进来的，一开始就初始化的，可以在类的最外层作用域声明这个成员
	state = { // es13可以直接提出来写
                a: 1,
               	b: 2
            }
    // a = 1;
    // b = 2;
    constructor(name, age){
    	this.name = name
    	this.age = age
    //	this.state = { // 不需要传参
    //                 	a: 1,
    //                	b: 2
    //             	}
    }
}

1.2 静态成员的私有属性和方法

我们还可以给类定义静态成员和静态私有函数。类的静态方法可以使用this关键字访问其他的私有或者公有静态成员。

class Cache{
	static #count = 0; // Cache.#count访问不到，报错

	static getCount(){
		return this.#count // Cache.#getCount访问不到，报错
	}

    #obj = {}

    get(key){
        return this.#obj[key]
    }
    set(key, value){
        this.#obj[key] = value
    }
}

let cache = new Cache()
cache.set("name", "kerwin")

console.log(Cache.getCount())

1.3 静态代码块

ES13允许在类中通过static关键字定义一系列静态代码块，这些代码块只会在类被创造的时候执行一次。这其实有点像一些其他的如C#和Java等面向对象的编程语言的静态构造函数的用法。

一个类可以定义任意多的静态代码块，这些代码块会和穿插在它们之间的静态成员变量一起按照定义的顺序在类初始化的时候执行一次。我们还可以使用super关键字来访问父类的属性。

 class Cache{
    static obj = new Map()
    static {
        this.obj.set("name","kerwin")
        this.obj.set("age",100)
    }

    static{
        console.log(this.obj)
    }
}

console.log(Cache.obj)

1.4 使用in来判断某个对象是否拥有某个私有属性

class Cache {
    #obj = {}

    get(key) {
        return this.#obj[key]
    }
    set(key, value) {
        this.#obj[key] = value
    }

    hasObj(){
        return #obj in this // in关键字：判断某个属性是不是私有属性
    }
}

let cache = new Cache()
console.log(cache.hasObj()) // true

2 支持在最外层写await

顶层await只能用在ES6模块，不能用在CommonJS模块。这是因为CommonJS模块的require()是同步加载，如果有顶层await，就没法处理加载了。

<script type="module">
    function ajax() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("data-1111");
        }, 1000);
    })
}

let res = await ajax();
console.log(res)
</script>

//1.js
function ajax(){
    return new Promise((resolve)=>{
     setTimeout(()=>{
         resolve("data-11111")
     },2000)
    })
}

let data = await ajax() // 2秒之后模块才会导出

export default {
    name:"moduleA",
    data
}

<script type="module">
	console.log("开始")
	// await写起来是同步，执行是异步的感觉
	let moduleA = await import("./1.js") // 动态导入，导入promise对象
	console.log(moduleA) // 2秒之后拿到结果，不耽误上面代码执行
</script>

3 at函数来索引元素

let arr = ["kerwin","tiechui","gangdan","xiaoming"]

console.log(arr[1])
console.log(arr[arr.length - 1]) 
console.log(arr[arr.length - 2]) 

console.log(arr.at(1))
console.log(arr.at(-1))
console.log(arr.at(-2))

let str = "kerwin"

console.log(str.at(-1))
console.log(str.at(-2))

4 正则匹配的开始和结束索引

let str = "今天是2022-11-10"
// 多了一个属性：indices：0: [3, 13], 1: [3, 7], 2: [8, 10], 3: [11, 13]
let reg = /(?<year>[0 - 9]{4}) - (?<month>[0 - 9]{2}) - (?<day>[0 - 9]{2})/d

//exec
let res = reg.exec(str)
// console.log(res)
let {year, month, day} = res.groups // group -> index = 3
console.log(res) // day: [11, 13], month: [8, 10], year: [3, 7]

5 findLast() 和 findLastIndex() 函数

let arr = [11,12,13,14,15]

// let res = arr.find(function(value){
//   return value % 2 === 0
// })
// let res = arr.findIndex(function(value){
//   return value % 2 === 0
// })
// let res = arr.findLast(function(value){
//   return value % 2 === 0
// })
let res = arr.findLastIndex(function(value){
    return value % 2 === 0
})

let res1 = arr.find(value => value > 13) // 14
let res2 = arr.findIndex(value => value > 13) // 3
let res3 = arr.findLast(value => value > 13) // 15
let res4 = arr.findLastIndex(value => value > 13) // 4
        
let res5= arr.find(value => value % 2 === 0) // 12
let res= arr.findLast(value => value % 2 === 0) // 14
console.log(res)

6 Error对象的Cause属性

Error对象多了一个cause属性来指明错误出现的原因。这个属性可以帮助我们为错误添加更多的上下文信息，从而帮助使用者们更好地定位错误。

function getData(){
    try{
        console.log(kerwin)
    }
    catch(e){
        throw new Error('New error 1111111',{cause:"这是因为,,,,,,,,,"});
    }
}

try{
    getData()
}catch(e){
    console.log(e.cause)
}