类的私有属性

class Person {
    // 公有属性
    name
    // 私有属性
    #age
    #weight
    // 构造方法
    constructor(name, age, weight) {
        this.name = name
        this.#age = age
        this.#weight = weight
    }

    // 通过方法来暴露私有属性
    intro() {
        console.log(this.name)
        console.log(this.#age)
        console.log(this.#weight)
    }
}

// 实例化
const girl = new Person('晓红', 18, '45kg')

console.log(girl.name) // 晓红
// console.log(girl.#age) // 报错
// Private field '#age' must be declared in an enclosing class
// console.log(girl.#weight) // 报错
// Private field '#weight' must be declared in an enclosing class

girl.intro()
/*
晓红
18
45kg
*/

Promise.allSettled()方法

每个异步任务都想得到结果就使用Promise.allSettled()方法
要求每个异步任务都成功才能往下执行则使用Promise.all()方法

// 声明两个promise对象
const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        // resolve('商品数据1')
        reject('出错了1')
    }, 1000)
})

const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('商品数据2')
        // reject('出错了2')
    }, 1000)
})

/*
调用 allsettled 方法：不管括号里的Promise成功与否，都会返回成功的Promise，
结果值为一个数组，数组的每一项都是一个对象，每个对象对应每个Promise的状态与结果。
*/
const result = Promise.allSettled([p1, p2])
console.log(result)

/*
调用 all 方法：都成功返回的Promise才成功，
结果值为一个数组，数组的每一项对应每个Promise的结果；
有一个失败的Promise返回的都是失败的状态，
结果为靠前的失败的那个Promise的结果值。
*/
const res = Promise.all([p1, p2])
console.log(res)

结果：

字符串新增方法：matchAll()

对数据的批量提取十分方便（可用于爬虫）
配合正则使用

let str =
    `<ul>
        <li>
            <a>肖生克的救赎</a>
            <p>上映日期: 1994-09-10</p>
        </li>
        <li>
            <a>阿甘正传</a>
            <p>上映日期: 1994-07-06</p>
        </li>
    </ul>`

// 声明正则
const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg

// 调用方法
const result = str.matchAll(reg)
console.log(result)

const arr = [...result]
console.log(arr)

结果：

可选链操作符〔?.〕

?.用于判断对象的链式参数是否传递

function main(config) {
    // const dbHost = config && config.db && config.db.host
    // 等价于
    const dbHost = config?.db?.host

    console.log(dbHost) // 192.168.1.100
}

main({
    db: {
        host: '192.168.1.100',
        username: 'root'
    },
    cache: {
        host: '192.168.1.200',
        username: 'admin'
    }
})

动态 import

懒加载，只有用模块的时候才加载模块，不用则不加载

index.html：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">点击</button>
    <script src="./js/app.js" type="module"></script>
</body>

</html>

app.js：

const btn = document.getElementById('btn')

btn.onclick = function () {
	// 动态 import
    import('./hello.js').then(module => {
        module.hello()
    })
}

hello.js：

export function hello() {
    alert('Hello')
}

新增的数据类型：BigInt（大整型）

在普通整型数后面加上字母n就成了大整型数据

// 大整形
let n = 521n
console.log(n, typeof (n)) // 521n 'bigint'

// 函数BigInt():将普通整型数据转为大整型
console.log(BigInt(123)) // 123n
// console.log(BigInt(1.2)) // 浮点数会报错

// 大数值运算
let max = Number.MAX_SAFE_INTEGER // 最大安全整数
console.log(max) // 9007199254740991
console.log(max + 1) // 9007199254740992
console.log(max + 2) // 9007199254740992 // 无法再加

console.log(BigInt(max)) // 9007199254740991n
console.log(BigInt(max) + BigInt(1)) // 9007199254740992n
console.log(BigInt(max) + 2n) // 9007199254740993n