ES11新特性

ES11新特性

      • 1、Promise.allSettled
      • 2、module新增
        • 2.1、动态导入import()
        • 2.2、import.meta
        • 2.3、export * as obj from 'module'
      • 3、字符串的matchAll方法
      • 4、BigInt
      • 5、globalThis
      • 6、空值合并运算符
      • 7、可选链操作符

1、Promise.allSettled

Promise.allSettled()方法返回一个在所有给定的promise都已经fulfilled或 rejected 后的 promise,并带有一个对象数组,每个对象表示对应的promise结果。

const promises = [ajax("/200接口"), ajax("/401接口")];
Promise.allSettled(promises).then(results => {
    //过滤出成功的请求
    results.filter(item => item.status === "fulfilled");
    //过滤出失败的请求
    results.filter(item => item.status === "rejected");
})

2、module新增

2.1、动态导入import()

标准用法的 import 导入的模块是静态的,会使所有被导入的模块,在加载时就被编译(无法做到按需编译,降低首页加载速度)。有些场景中,你可能希望根据条件导入模块或者按需导入模块,这时你可以使用动态导入代替静态导入。

<body>
    <button id="login">登录button>
    <script>
        function login() {
            return "管理员"
        }
        let obtn = document.querySelector("#login")
        obtn.onclick = function () {
            let role = login()
            console.log(role)
            render(role)
        }
        async function render(role) {
            if (role === "管理员") {
                //加载1.js
                let res1 = await import("./1.js") //返回的是promise对象
                console.log(res1)

            } else {
                //加载2.js
                let res2 = await import("./2.js")
                console.log(res2)
            }
        }

    script>
body>

//1.js内容:
console.log("1.js加载了...",import.meta)
export default{
    name:"管理员模块"
}
export function test(){

}
//2.js内容:
console.log("2.js加载了...")
export default{
    name:"普通用户模块"
}

2.2、import.meta

import.meta会返回一个对象,有一个url属性,返回当前模块的url路径,只能在模块内部使用。

<script type="module">
	import obj from "./1.js'
</script>

//1.js 内容如下:
console.log(import.meta)
export default i
}

2.3、export * as obj from ‘module’

//1.js
export default {
	name : '111111'
}

export function test1({
)
    
//2.js
export default {
	name : "22222"
}
export function test2({
}
//导出1.js的所有内容到2.js,此时外部如果导入了2.js,就能得到1.js+2.js的所有内容了
export * as obj1 from './1.js'
    
//html
<script type="module ">
	import * as obj from './2.js'
	console.log(obj)
</script>

3、字符串的matchAll方法

matchAll()方法返回一个包含所有匹配正则表达式的结果的迭代器。可以使用for…of遍历,或者使用展开运算符(…)或者Array.from转换为数组。

//取出li和里面的内容
let str = `
    
  • 1111
  • 2222
  • 3333
  • 4444
`
let reg = /
  • (.*)<\/li>/g //console.log(str.match(reg)) //1. 使用捕获exec实现 // let match = null // let list = [] // while (match = reg.exec(str)) { // console.log(match[1]) //得到子匹配的值 // list.push(match[1]) // } // console.log(list) //得到集合,就可以做dom渲染等后续的操作了 //2. 使用matchAll实现 //console.log(str.matchAll(reg)) let iobj = str.matchAll(reg) console.log([...iobj])

  • 4、BigInt

    JavaScript能够准确表示的整数范围在-253到253之间(不含两个端点),超过这个范围,无法精确表示这个值,这使得JavaScript 不适合进行科学和金融方面的精确计算。

    9007199254740992 //9007199254740992
    9007199254740993 //9007199254740992
    
    Math.pow(2,53) === Math.pow(2 ,53)+1 //true
    

    为了与Number类型区别,BigInt类型的数据必须添加后缀 n

    1234 //普通整数
    1234n // Bigint
    
    // BigInt的运算
    1n + 2n // 3n
    
    //基本使用:
    console.log(2 ** 53);
    let num1 = 123;
    let num2 = 123n;
    console.log(num1, num2); //123 123n
    console.log(num1 == num2) //true
    console.log(num1 === num2) //false
    console.log(num2 > 100) //true
    //console.log(num2 + 2) //报错
    //BigInt函数
    console.log(num2 + BigInt(2)) //125n
    console.log(BigInt(2 ** 53) + BigInt(2)) // 9007199254740994n
    

    应用场景:

    //后端传给前端一个大于数值最大值的id,前端该如何得到它并且不失真呢?
    let jsonstr = `
        {
            "id":"9007199254740993",
            "list":[]
        }
    `
    //两种方式:
    //1. 后端返回字符串
    console.log(JSON.parse(jsonstr).id) //9007199254740993
    //2. 引入一个模块 json-bigint,可去github上找..
    

    5、globalThis

    globalThis提供了一个标准的方式来获取不同环境下的全局this对象(也就是全局对象自身)。不像window或者self这些属性,它确保可以在有无窗口的各种环境下正常工作。所以,你可以安心的使用globalThis,不必担心它的运行环境。为便于记忆,你只需要记住,全局作用域中的this就是globalThis。
     
    console.log(globalThis === window) //true


    6、空值合并运算符

    空值合并运算符(??) 是一个逻辑运算符。当左侧操作数为null或undefined时,则返回右侧的操作数。否则返回左侧的操作数。

    let str1 = null ?? "twj"
    let str2 = undefined ?? "twj"
    let str3 = "hhh" ?? "twj"
    let str4 = 0 ?? "twj"
    let str5 = NaN ?? "twj"
    console.log(str1, str2, str3, str4, str5) //twj twj hhh 0 NaN
    
    let obj = {
        name: "twj",
        introduction: 0
    }
    console.log(obj.introduction || "这个人很懒") //这个人很懒
    console.log(obj.introduction ?? "这个人很懒") //0
    // ||和??的区别是:
    //他们两个最大的区别就是空字符串和0,??的左侧为空字符串或者0的时候,依然会返回左侧的值;
    //||会对左侧的数据进行boolean类型转换,所以空字符串和0会被转换成false,返回右侧的值。
    

    7、可选链操作符

    可选链前面的值如果是null或undefined,则不再执行后面的,之前返回可选链前面的值。

    let obj = {
        name: "twj",
        introduction: 0,
        // location: {
        //     city: "changsha"
        // }
    }
    //如果对象中某个属性不确定存不存在,就可以用&&或?.来决定接下来的走向
    console.log(obj && obj.location && obj.location.city) //undefined
    console.log(obj?.location?.city) //undefined
    //city不存在则返回北京
    console.log(obj?.location?.city ?? "北京") //北京
    

    上一篇文章 下一篇文章
    ES10新特性 ES12新特性

    你可能感兴趣的:(ES6~13新特性详解,javascript,前端,开发语言,ecmascript)