ES9新特性

1、对象的剩余参数与扩展运算符

//剩余参数
let obj = {
    name: "twj",
    age: 100,
    location: "changsha"
}
let { name, ...other } = obj
console.log(name, other) //{age: 100, location: 'changsha'}
function test(name, ...other) {
    console.log(name, other) //{name: 'twj', age: 100, location: 'changsha'}
}
test(obj)
//...扩展运算符
let obj1 = {
    name: "twj",
    location: "changsha"
}
let obj2 = {
    name: "xiaoming",
    age: 100
}
let obj3 = { ...obj1, ...obj2 } //后来者居上
console.log(obj3) //{name: 'xiaoming', location: 'changsha', age: 100}
//浅拷贝
let obj5 = {
    name: "twj",
    age: 200
}
let obj6 = { ...obj5 }
console.log(obj6) //{name: 'twj', age: 200}

2、正则表达式命名捕获组

JS正则表达式可以返回一个匹配的对象，一个包含匹配字符串的类数组，比如:以YY-MM-DD的格式解析日期，
 
这样的代码可读性很差，并且在改变正则表达式的结构的时候很有可能就会改变匹配对象的索引。
 
ES9允许使用命名捕获?<name>，在打开捕获括号后立即命名。

let str = "今天是2023-04-12"
let reg = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/
let { year, month, day } = reg.exec(str).groups
console.log(year, month, day) //2023 04 12

3、Promise.finally()

无论是成功还是失败，都运行同样的代码，比如隐藏对话框，关闭数据连接等。

function ajax() {
    return new Promise((resolve, reject) => {
        resolve("data-111")
    })
}
//显示loading
ajax().then(data => {
    console.log(data)
}).catch(err => {
    console.log(err)
}).finally(() => {
    console.log("finally")
    //finally不管成功还是失败都会执行
    //这里做一些隐藏loading，关闭缓存，关闭对话框等等
})

4、异步遍历器

Iterator 接口是一种数据遍历的协议，只要调用遍历器对象的next方法，就会得到一个对象，表示当前遍历指针所在的那个位置的信息。
 
这里隐含着一个规定，next方法必须是同步的，只要调用就必须立刻返回值。
 
目前的解决方法是，Generator 函数里面的异步操作，返回一个 Thunk 函数或者Promise对象，即value属性是一个Thunk函数或者Promise对象，等待以后返回真正的值，而done属性则还是同步产生的。
 
ES2018 引入了“异步遍历器”（Async Iterator），为异步操作提供原生的遍历器接口，即value和done这两个属性都是异步产生。
 
异步遍历器的最大的语法特点：调用遍历器的next方法，返回的是一个Promise对象

function timer(t) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve("data-" + t)
        }, t)
    })
}
//实际开发中，可以把timer替换成真实的异步任务，实现js的任务调度功能
async function* gen() {
    yield timer(1000)
    yield timer(2000)
    yield timer(3000)
}
async function test() {
    let g = gen()
    let arr = [g.next(), g.next(), g.next()]
    //for await里面循环的是异步遍历器生成的对象，将异步任务按照串联的形式执行
    for await (let item of arr) {
        console.log("start-", Date.now())
        console.log(item)
        console.log("end-", Date.now())
    }
}
test()

---

上一篇文章	下一篇文章
ES8新特性	ES10新特性