ES13新特性

ES13新特性

      • 1、类新增特性
        • 1.1、私有属性和方法
        • 1.2、静态代码块
      • 2、支持在最外层写await
      • 3、at函数来索引元素
      • 4、正则匹配的开始和结束索引
      • 5、其它特性
        • 5.1、findLast() & findLastIndex()
        • 5.2、Error对象的Cause属性

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,就没法处理加载了。






<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 = /(?[0-9]{4})-(?[0-9]{2})-(?[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新特性

你可能感兴趣的:(ES6~13新特性详解,javascript,开发语言,ecmascript,es13)