【前端】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") // 成功/失败都执行
})
相关推荐
yanyu-yaya4 分钟前
@progress/kendo-react-dropdowns <ComboBox>组件报错,解决
前端·javascript·react.js
小破孩呦9 分钟前
动态循环表单+动态判断表单类型+动态判断表单是否必填方法
前端·javascript·html
ElasticPDF-新国产PDF编辑器26 分钟前
React PDF Annotation plugin library online API examples
前端·react.js·pdf
爱看书的小沐1 小时前
【小沐学Web3D】three.js 加载三维模型(React Three Fiber)
javascript·react.js·webgl·three.js·opengl·web3d·reactthreefiber
Bruce_Liuxiaowei2 小时前
构建macOS命令速查手册:基于Flask的轻量级Web应用实践
前端·macos·flask
Python私教2 小时前
安装electron项目是为什么要执行postinstall script
前端·javascript·electron
shmily_yyA2 小时前
Nextjs15 实战 - React Notes之SidebarNoteList优化和Suspense的使用
前端·react.js·前端框架
知识分享小能手2 小时前
CSS3学习教程,从入门到精通, 化妆品网站 HTML5 + CSS3 完整项目(26)
前端·javascript·css·学习·css3·html5·媒体
了不起的码农3 小时前
ES6对函数参数的新设计
前端·ecmascript·es6
XH2763 小时前
Android 通知用法详解
前端