js ES11新特性的一些重点

面向对象中在类内部才能访问的属性成为私有属性。js的类中属性前面#表示是私有属性。在类的外部无法访问。

        class Person{
            // 共有属性
            name;
            // 私有属性
            #age;
            #weight;
            // 构造方法
            constructor(name, age, weight){
                this.name = name;
                this.#age = age;
                this.#weight = weight;
            }
            intro(){
                console.log(girl.name);
                console.log(girl.#age);
                console.log(girl.#weight);
            }
        }
        const girl = new Person('yuanyuan',18,'45kg');
        console.log(girl.name);//yuanyuan
        // console.log(girl.#age);//Uncaught SyntaxError: Private field '#age' must be declared in an enclosing class
        girl.intro();//yuanyuan 18 45kg

2.Promise.allSettled()

Promise.allSettled()方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise，并带有一个对象数组，每个对象表示对应的promise结果。当您有多个彼此不依赖的异步任务成功完成时，或者您总是想知道每个promise的结果时，通常使用它。相比之下，Promise.all() 更适合彼此相互依赖或者在其中任何一个reject时立即结束。

        // 声明两个Promise对象
        const p1 = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve('商品数据 - 1');
            },1000)
        });
        const p2 = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                // resolve('商品数据 - 2');
                reject("失败了！")
            },1000)
        });
        // 调用 allsettled方法
        const res = Promise.allSettled([p1,p2]);
        console.log(res);
        /*
        [[Prototype]]: Promise
        [[PromiseState]]: "fulfilled"
        [[PromiseResult]]: Array(2)
        0: {status: 'fulfilled', value: '商品数据 - 1'}
        1: {status: 'rejected', reason: '失败了！'}
        */
        const result = Promise.all([p1,p2]);//都成功才成功，如果有失败就返回失败
        /* 
        [[Prototype]]: Promise
        [[PromiseState]]: "rejected"
        [[PromiseResult]]: "失败了！"
        */
        console.log(result);//Uncaught (in promise) 失败了！

3.String.prototype.matchAll()

String.prototype.matchAll() 方法返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。

        const regexp = /t(e)(st(\d?))/g;
        const str = 'test1test2';
        const array = [...str.matchAll(regexp)];
        console.log(array[0]);//["test1", "e", "st1", "1"]
        console.log(array[1]);//["test2", "e", "st2", "2"]

4.可选链操作符

可选链操作符(?.)允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish) (null或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。

function main(config){
            // const dbHost = config && config.db && config.db.host;//传统方法
            const dbHost = config?.db?.host;//省去了层层判断
            console.log(dbHost);//192.168.1.100
        }
        main({
            db: {
                host:'192.168.1.100',
                username:'root'
            },
            cache: {
                host:'192.168.1.200',
                username:'admin'
            }
        })

5.动态import

类似函数的动态 import()，它不需要依赖 type="module" 的script标签。import()函数返回的结果是Promise对象

在您希望按照一定的条件或者按需加载模块的时候，动态import() 是非常有用的。而静态型的 import 是初始化加载依赖项的最优选择。

        // 动态import import()函数返回的结果是Promise对象
        btn.onclick = function(){
            import("./hello.js").then(module =>{
                module.hello();//调用函数再加载
            })
        }

       //hello.js
       function hello(){
            alert("hello");
       }

6.BigInt类型

BigInt 是一种内置对象，它提供了一种方法来表示大于 2⁵³- 1 的整数。这原本是 Javascript中可以用Number表示的最大数字。BigInt 可以表示任意大的整数。

        // BigInt 不能和普通Int直接运算
        let n = 521n;
        console.log(n, typeof(n));//521n 'bigint'
        // 函数 只能正数传入参数，不能传入浮点数
        let N = 123;
        console.log(BigInt(N));//123n
        // console.log(BigInt(1.2));//Uncaught RangeError: The number 1.2 cannot be converted to a BigInt because it is not an integer 不能穿入浮点数
        // 大数值运算
        let max = Number.MAX_SAFE_INTEGER;
        console.log(max);//9007199254740991
        console.log(max + 1);//9007199254740992
        console.log(max + 2);//9007199254740992不继续增加了
        console.log(BigInt(max));//9007199254740991n
        // console.log(BigInt(max) + 1);//Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions 不能直接和Int运算
        console.log(BigInt(max) + BigInt(1));//9007199254740992n
        console.log(BigInt(max) + BigInt(2));//9007199254740993n

7.绝对全局对象globalThis

如果想对全局对象操作，可以忽略环境使用globalThis，globalThis始终指向全局对象

全局属性 globalThis 包含全局的 this 值，类似于全局对象（global object）

console.log(globalThis);//Window {window: Window, self: Window, document: document, name: '', location: Location, …}

js ES11新特性的一些重点

相关推荐