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 = `



    
    
    
    


    
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' // 双问号判断如果前面条件不成立则使用后面的值，类似 ||