【前端】ES9：ES9新特性

子非鱼9212024-09-28 22:38

文章目录

[1 对象的剩余参数](#1 对象的剩余参数)
[2 扩展运算符](#2 扩展运算符)
[3 正则表达式命名捕获组](#3 正则表达式命名捕获组)
[4 Promise.finally()](#4 Promise.finally())

1 对象的剩余参数

js 复制代码

let obj = {
    name:"kerwin",
    age:100,
    location:"dalian"
}

let {name, ...other} = obj
console.log(name) //kerwin
console.log(other) //{age: 100, location: 'dalian'}

2 扩展运算符

js 复制代码

//...
let obj1 = {
	name: "tiechui",
	location: "dalian"
}

let obj2 = {
	name: "xiaoming",
	age: 18
}
        
let obj3 = {...obj1, ...obj2}
console.log(obj3)

function ajax(options){
	const defaultOptions = {
		methods: "get",
		async: true
	}
	options = {...defaultOptions, ...options}
	console.log(options)
}

ajax({
	url: "/api",
	methods: "post"
})

let obj5 = {
	name: "kerwin",
	age: 100
}
let obj6 = {...obj5}
console.log(obj6)

3 正则表达式命名捕获组

JS正则表达式可以返回一个匹配的对象，一个包含匹配字符串的类数组，比如：以 YYYY-MM-DD的格式解析日期。

javascript 复制代码

let str = "今天是2022-11-10"
//let reg = /[0 - 9]{4} - [0 - 9]{2} - [0 - 9]{2}/ // 2022-11-10
let reg = /([0 - 9]{4}) - ([0 - 9]{2}) - ([0 - 9]{2})/g // ()分组，2022-11-10、2022、11、10

let res = reg.exec(str)
console.log(res)

这样的代码可读性很差，并且在改变正则表达式的结构的时候很有可能就会改变匹配对象的索引。

ES9允许使用命名捕获 ?< name >，在打开捕获括号后立即命名。

js 复制代码

let str = "今天是2022-10-10"
let reg = /(?<year>[0 - 9]{4}) - (?<month>[0 - 9]{2}) - (?<day>[0 - 9]{2})/g

let res = reg.exec(str)
let {year, month, day} = res.groups
console.log(year, month, day)

4 Promise.finally()

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

js 复制代码

function ajax(){
    return new Promise((resolve,reject)=>{
        reject(1111)
    })
}
//显示loading
ajax().then(res=>{

}).catch(err=>{

}).finally(()=>{
    //隐藏loading
    console.log("finally") // 成功/失败都执行
})