es6-es11系列6 ES10-ES11

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()) //81129638414606681695789005144064

ES11 新增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' // 双问号判断如果前面条件不成立则使用后面的值,类似 ||
本站文章如未注明均为原创 | 文章作者:刘晓帆 | 转载请注明来自:前端印象

发表评论

邮箱地址不会被公开。 必填项已用*标注

浏览量:103 次浏览