【前端】ES9:ES9新特性

文章目录

  • [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") // 成功/失败都执行
})
相关推荐
轻口味1 小时前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王1 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发1 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀2 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪2 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
ekskef_sef4 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
sunshine6414 小时前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻5 小时前
Vue(四)
前端·javascript·vue.js
蜜獾云5 小时前
npm淘宝镜像
前端·npm·node.js