【前端】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") // 成功/失败都执行
})
相关推荐
IT_陈寒4 分钟前
Java并发编程避坑指南:7个常见陷阱与性能提升30%的解决方案
前端·人工智能·后端
HBR666_18 分钟前
AI编辑器(FIM补全,AI扩写)简介
前端·ai·编辑器·fim·tiptap
excel23 分钟前
一文读懂 Vue 组件间通信机制(含 Vue2 / Vue3 区别)
前端·javascript·vue.js
JarvanMo26 分钟前
Flutter 应用生命周期:使用 AppLifecycleListener 阻止应用崩溃
前端
我的xiaodoujiao1 小时前
从 0 到 1 搭建 Python 语言 Web UI自动化测试学习系列 9--基础知识 5--常用函数 3
前端·python·测试工具·ui
李鸿耀3 小时前
Flex 布局下文字省略不生效?原因其实很简单
前端
皮蛋瘦肉粥_1214 小时前
pink老师html5+css3day06
前端·css3·html5
华仔啊9 小时前
前端必看!12个JS神级简写技巧,代码效率直接飙升80%,告别加班!
前端·javascript
excel9 小时前
dep.ts 逐行解读
前端·javascript·vue.js
爱上妖精的尾巴9 小时前
5-20 WPS JS宏 every与some数组的[与或]迭代(数组的逻辑判断)
开发语言·前端·javascript·wps·js宏·jsa