ES13新特性

1、类新增特性

1.1、私有属性和方法

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

//加#号代表私有属性或私有方法
class Cache {
    static #count = 0
    static getCount() {
        return this.#count
    }
    #obj = {}
    get(key) {
        return this.#obj[key]
    }
    set(key, value) {
        this.#obj[key] = value
    }
    #prstore() {
    }
    has() { //判断#obj是不是当前类的属性
        return #obj in this
    }
}

let store = new Cache()
store.set("name", "twj")
store.set("age", 100)

console.log(store)
console.log(store.get("name")) //twj
//console.log(store.#obj) //直接报错
//console.log(Cache.#count) //直接报错
console.log(Cache.getCount()) //0

let s = new Cache()
console.log(s.has()) //true

1.2、静态代码块

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

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

2、支持在最外层写await

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

<!-- 三种使用await异步加载模块的的示例，第三种最优，因为它不会卡住整个代码块 -->
<!-- <script type="module">
    function ajax() {
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve("data-111")
            }, 2000)
        })
    }
    let res = await ajax()
    console.log(res)
</script> -->

<!-- <script type="module">
    console.log("开始")
    import moduleA from './1.js'
    console.log(moduleA)
</script> -->

<script type="module">
    console.log("开始")
    let moduleA = await import('./1.js')
    console.log(moduleA)
</script>


//1.js文件内容：
function ajax() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("data-111")
        }, 2000)
    })
}
let data = await ajax()

export default{
    name:"moduleA",
    data
}

3、at函数来索引元素

let arr = ["twj", "tiechui", "gangdan"]
console.log(arr[0]) //twj
console.log(arr[arr.length - 1]) //tiechui
console.log(arr[arr.length - 2]) //gangdan

console.log(arr.at(0)) //twj
console.log(arr.at(-1)) //tiechui
console.log(arr.at(-2)) //gangdan
//在字符串中也适用

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

let str = "今天是2023-04-12"
let reg = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/d
let res = reg.exec(str)
console.log(res)
//加上d，返回结果就会封装一个indices属性，属性里面就是每次匹配的结果的索引开始和结束索引

5、其它特性

5.1、findLast() & findLastIndex()

let arr = [11, 12, 13, 14, 15]
//从前面开始查找
let res1 = arr.find(value => value > 13)
let res2 = arr.findIndex(value => value > 13)
//从后面开始查找
let res3 = arr.findLast(value => value > 13)
let res4 = arr.findLastIndex(value => value > 13)
console.log(res1, res2, res3, res4) //13 3 15 4
//找第一个偶数
let res5 = arr.find(value => value % 2 === 0)
let res6 = arr.findLast(value => value % 2 === 0)
console.log(res5, res6) //12 14

5.2、Error对象的Cause属性

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

function getData() {
    try {
        console.log(aaaa)
    } catch {
        //console.log("err")
        throw new Error("传入的参数不符合规则", { cause: "少传入了a参数" })
    }
}
//getData()
try {
    getData()
} catch (error) {
    console.log(error, error.cause)
}

---

上一篇文章	下一篇文章
ES12新特性	无