【前端】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") // 成功/失败都执行
})
相关推荐
孤水寒月2 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
脑袋大大的3 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络4 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘4 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way4 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽7 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头7 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github