ES11新特性

最新推荐文章于 2024-05-10 21:36:02 发布

已进厂(。•́︿•̀。)

最新推荐文章于 2024-05-10 21:36:02 发布

阅读量336

点赞数

分类专栏： ES6~13新特性详解文章标签： javascript 前端开发语言 ecmascript

本文链接：https://blog.csdn.net/twjtwjtwjm/article/details/131303081

版权

ES6~13新特性详解专栏收录该内容

8 篇文章 0 订阅

订阅专栏

ES11新特性

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 = `
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
    </ul>
`
let reg = /<li>(.*)<\/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能够准确表示的整数范围在-2⁵³到2⁵³之间(不含两个端点)，超过这个范围，无法精确表示这个值，这使得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 ?? "北京") //北京