1. 對象的剩余參數(shù)與擴展運算符

1.1 對象的剩余參數(shù)

let obj = {
name:"kerwin",
age:100,
location:"dalian"
}
let {name,...other} = obj
console.log(name,other)
function test({name,...other}){
console.log(name,other)
test(obi)

// kerwin {age:100,location: ‘dalian’}
其中…other 可以拿到對象的剩余參數(shù)

1.2 擴展運算符

let obj1= {
name:"tiechui",
location:"dalian"
}
let obj2 = {
name:"xiaoming",
age:18
}
//object.assign
let obj3 = {...obj1,...obj2}
console.log(obj3)

// {name: ‘xiaoming’,location: ‘dalian’,age: 18]

在實際開發(fā)中，我們會使用ajax() 封裝一些默認的屬性和屬性值，以備用戶忘記或未傳入某些參數(shù)。

function ajax(options){
const defaultoptions = {
methods:"get",
async:true
}
options = {...defaultoptions,...options}
// 這樣寫會將用戶傳入的某些參數(shù)值覆蓋某些默認參數(shù)值
console.log(options)
}
ajax({
url: "/api"
})

// { methods: “get”, async: true, url: “/api”}

2. 正則擴展

正則表達式命名捕獲組

JS正則表達式可以返回一個匹配的對象，一個包含匹配字符串的類數(shù)組，比如：以Y-MM-DD的格式解析日期，這樣的代碼可讀性很差，并且在改變正則表達式的結構的時候很有可能就會改變匹配對象的索！
ES9允許使用命名捕獲 ? ,在打開捕獲括號后立即命名

let str= "今天是2022-10-10"
let reg= /[0-9]{4}-[0-9]{2}-[0-9]{2}/
//exec()  捕獲
cconsole.log(reg.exec(str))

如果想要分組單獨得到年月日：

let reg= (/[0-9]{4})-([0-9]{2})-([0-9]{2}/)

使用reg[index] 就可以得到單獨的年月日
給各個分組添加 ?<名稱> 就可以使得各個分組帶有意義，通過名稱就可以找到各個分組。

let reg= (/?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2}/)
let {year,month,day} = res.groups
console.log(year,month,day)

// 2022 10 10

3. Promise.finally

我們之前學習Promise 時，當對象調用resolve 時會執(zhí)行某些程序，調用reject 時會執(zhí)行某些程序，執(zhí)行這些程序之前我們要呈現(xiàn)加載中的狀態(tài)，待到執(zhí)行了程序之后我們再關閉加載的狀態(tài)，這時就出現(xiàn)一個問題，我們想在成功或者不成功時都調用某個程序，我們需要怎么寫呢？

我們可以使用finally() ，也就是我們可以將這些不論程序執(zhí)行成功還是失敗都要執(zhí)行的代碼，比如隱藏loading 寫在finally() 中。

function ajax(){
return new Promise((resolve,reject)=>{
//resolve("data-1111")
reject("err-11111")
})
}
//顯示 loading
ajax().then((data)=>{
console.log(data)
// 隱藏 loading
}).catch(err=>{
console.log("err",err)
// 隱藏 loading
}).final1y()=>{
console.log("finally")
//隱藏loading
})

4. 異步迭代

4.1 同步遍歷器的問題

現(xiàn)在有一個數(shù)組，其中放了幾個異步任務，需要它們按照數(shù)組任務順序來執(zhí)行，也就是上一個執(zhí)行完了之后再去執(zhí)行下一個任務。

function timer(t){
return new Promise(resolve=>{
setTimeout(()=>{
resolve("data-"+t)
},t)
})
}
async function test(){
let arr = [timer(1000),timer(2000),timer(3000)]
for(let item of arr){
console.log(await item)
}
test()

這種將異步任務放在數(shù)組中使用循環(huán)執(zhí)行的情況會出現(xiàn)程序并發(fā)執(zhí)行，并不是我們想要的效果。

如果我們將上面for 循環(huán)中的代碼換成下面的代碼，我們會發(fā)現(xiàn)第三行和第四行代碼是同時出現(xiàn)的，也就是for 循環(huán)中的程序只有await 這一行卡住了。

for(let item of arr){
console.log("start-",Date.now())
console.log(await item)
console.log("end-",Date.now())
}

那有沒有一種可能我們可以卡住整個for 循環(huán)代碼快？如果第一個任務不結束，那么整個代碼塊都不執(zhí)行；如果第一個任務結束，就讓整個代碼塊就一起執(zhí)行下來。
異步遍歷器就可以實現(xiàn)這種任務調度的情況。

我們先來回顧一下同步遍歷器！

let arr = [1,2,3]
// console.log()
let i = arr[Symbol.iterator]()
console.log(i.next())
console.log(i.next())
console.log(i.next())
console.log(i.next())
for(let i of arr){
console.log(i)
}

4.2 異步遍歷器使用

function ajax(data){
return new Promise(resoLve=>{
resolve(data)
})
function *gen(){
yield ajax(111)
yield ajax(222)
}
let g = gen()

我們知道上面的生成器代碼可以生成同步遍歷器，需要使用next() 進行執(zhí)行，如果next() 調用次數(shù)超過需要的次數(shù)還會報錯。
這時就需要我們的異步生成器了，但是我們怎樣生成異步遍歷器呢？
只需要在生成器前面添加async !
異步遍歷器需要通過下面的程序順序進行。

我們也可以把上面異步遍歷器執(zhí)行代碼換成下面的代碼

async function test(){
let res1 = await g.next()
console.log(res1)
let res2 = await g.next()
console.log(res2)
let res3 = await g.next()
console.log(res3)
}

async function test(){
let list = [g.next(),g.next(),g.next()]
for await(let i of list){
console.log(i)
}
// 

學習過異步遍歷器后，對于一開始學習異步迭代提出的問題我們可以通過下面的代碼改進。

function timer(t){
return new Promise(resolve=>{
setTimeout(()=>{
resolve("data-"+t)
},t)
})
}
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(let item of arr){
console.log("start-",Date.now())
console.log(item)
console.log("end-",Date.now())
test()

注意使用for await 循環(huán)不能去循環(huán)普通的數(shù)組，會出問題的，我們一般使用這個循環(huán)去遍歷由異步生成器生成的對象組成的數(shù)組。

在node 中使用任務調度使用的較多。文章來源地址http://www.zghlxwxcb.cn/news/detail-845460.html

到了這里，關于ES9學習 -- 對象的剩余參數(shù)與擴展運算符 / 正則擴展 / Promise.finally / 異步迭代的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！