ES10 对对象的扩展 Object.fromEntries
Object.fromEntries和Object.entries作用正好相反
比较常用的场景就是把Map结构转换为普通对象,例如
const obj = Object.fromEntries(new Map())
还有,比如我们要对对象进行过滤的时候,可以先把对象转为键值对的数组,使用数组的各种方法后再转回对象,例如:
const course = { math: 80, english: 85, chinese: 90 } const resArr = Object.entries(course).filter(([key, val]) => val >80) const resObj = Object.fromEntries(resArr) console.log(resObj)
ES10 对字符串新增扩展trimStart、trimEnd
顾名思义去掉字符串前面的空格可以使用str.trimStart,同时废除之前的标准trimLeft
trimEnd同理,前后都去使用tirm()
ES10 数组增加flat和flatMap方法
let arr = [1, 2, [3, [4]]] // 这是一个多维数组 arr.flat(1) // 1代表拍平的深度,如果不确定层级深度值可以传入Infinity
使用flatMap可以拍平 arr.map()后的结果
ES10 对Function.prototyp.toString()进行了修订
可以输出注释和空行空格了
例如:
function foo (){ // es10可以打印注释了 console.log(1) } console.log(foo.toString())
ES10 的try…catch可以省略catch的参数了
之前的catch后面必须要写(e),现在可以省略了,例如
try{…}catch{…}
ES10对JSON扩展superset和stringifiy增强
JSON的superSet就是超集的意思,其实就是支持了字符串里面的特殊字符例如:\u2029,例如下面的代码es10之前会报错
eval('var str="xx"; \u2029 function foo(){return str}') foo()
eval函数是用来执行一段字符串格式的js代码
之前的JSON.stringify()的取值范围是0xD800~0xDfff
现在针对特殊字符不会出现乱码的bug了
ES10 Symbol的扩展Symbol.prototype.description
const s = Symbol('abc') console.log(s.description) // adc s.description = 'foo' // 无效,因为是只读属性
ES11 字符串增加String.prototype.matchAll()
比如有一个场景,我们要从一段html字符串中匹配所有div内的内容放到一个组数里面,
可以使用如下几种方式
const str = `Document div1的内容div2的内容div3的内容` // 最基本的方式使用exec function selectDiv (regExp, str){ let matches = [] while(true){ const match = regExp.exec(str) if(!match){ break } // exec方法会把正则中小括号内匹配的内容放到下标为1的key中 matches.push(match[1]) } return matches } const regExp = /(.*)<\/div>/g console.log(selectDiv(regExp, str)) // ['div1的内容', 'div2的内容', 'div3的内容'] // 2 使用match的方式,但是结果不是我们想要的 console.log(str.match(regExp)) // ['div1的内容', 'div2的内容', 'div3的内容'] // 3 使用replace实现 function selectDivWithReplace (regExp, str){ let matches = [] // replace 的第2个参数可以是个函数,函数的第2个参数和exec类似会返回第1个字表达式的匹配结果 str.replace(regExp, (all, first) =>{ matches.push(first) }) return matches } console.log(selectDivWithReplace(regExp, str)) // 4 使用matchAll的方式 function selectDivWhitMatchAll(regExp, str){ let matches = [] for(let match of str.matchAll(regExp)){ matches.push(match[1]) } return matches } console.log(selectDivWhitMatchAll(regExp, str))ES11新特性 动态导入或者叫按需导入 Dynamic import()
我们可以根据需要的时候再import模块,例如这样:
document.querySelector('#btn').addEventListener('click', () => { // 按钮被点击后再引入ajax模块 import('./ajax').then(m => { // 因为模块默认导出到了default上,所以这样写 m.default('api/getList').then(res => { console.log(res.data) }) }) })vue的路由懒加载也是同样的道理
const UserDetails = () => import('./views/UserDetails') const router = createRouter({ routes: [{ path: '/users/:id', component: UserDetails }], })ES11新增数据类型 bigInt
以后大数之间的运算更方便了,看一下例子:
定义大数的两种方式const bigInt = 9007199254740992n // 直接在数字后面写n const bigInt2 = BigInt(9007199254740992n) // 使用BigInt方法然后再把2个相乘
// 如果不用大数类型结果是这样,科学计数法不直观 console.log(9007199254740992 * 9007199254740992) // 8.112963841460668e+31 // 使用大数类型后可以正常显示结果了 console.log(9007199254740992n * 9007199254740992n) // 81129638414606681695789005144064n // 把n去掉可以直接转换为字符串方法toString console.log(81129638414606681695789005144064n.toString()) //81129638414606681695789005144064ES11 新增Promise.allSettled()
settled – 稳定的,固定的
与all的主要区别就是allSettled可以在就算有一个promise失败了也能够得到返回结果,然后在then方法里面去写业务逻辑ES11新增globalThis
获取不同环境下的全局对象
node 环境的全局对象是 global浏览器环境的全局对象是
window 窗口
self 窗口本身
现在可以使用globalThis自动判断当前环境的全局对象了,无需在自己写函数判断了。ES11 可选链 ?. 和 空值合并运算符 ?? Nullish coalescing Operator
const street = user && user.address && user.address.street // 旧 const street = user ?. address ?. street // 可选链 cosnt street =user ?. address ?? 'default' // 双问号判断如果前面条件不成立则使用后面的值,类似 ||浏览量:379 次浏览