ES11语法特性 私有属性 Promise.allSettled String.prototype.matchAll 可选链操作符 动态import BigInt类型 绝对全局对象globalThis

于 2020-12-02 19:11:37 发布
阅读量534 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_38232003/article/details/110477997
本文介绍了ES11的几大新特性，包括私有属性的定义与使用，Promise.allSettled与Promise.all的区别，String.prototype.matchAll方法的批量匹配功能，可选链操作符的便利性，动态import实现按需加载，以及BigInt类型用于大整数运算，最后讲解了全局对象globalThis的作用及其在不同环境下的指向。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

ES11

私有属性

私有属性只允许在类的内部调用，不允许在
在类中，使用#变量名定义私有属性

      class Person {
        name;
        #age;
        #weight;
        constructor(name, age, weight) {
          this.name = name;
          this.#age = age;
          this.#weight = weight;
        }
        intro() {
          console.log(this.name);
          console.log(this.#age);
          console.log(this.#weight);
        }
      }
      const gril = new Person('rose', 88, '100kg');
      console.log(gril.name);
      console.log(gril.#age);
      console.log(gril.#weight);

在这里插入图片描述
通过类内部方法调用私有属性

      class Person {
        name;
        #age;
        #weight;
        constructor(name, age, weight) {
          this.name = name;
          this.#age = age;
          this.#weight = weight;
        }
        intro() {
          console.log(this.name);
          console.log(this.#age);
          console.log(this.#weight);
        }
      }
      const gril = new Person('rose', 88, '100kg');
      gril.intro();

在这里插入图片描述

Promise.allSettled

进行批量异步任务的执行，需要获得所有异步任务的结果则使用allSettled，需要全部异步任务都执行成功则使用all。

allSettled

Promise.allSettled接受一个Promise对象的数组；返回的也是Promise对象，永远是成功的状态，成功的值是数组里面的每一个Promise对象的状态和结果。

      const p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(1);
          resolve('goods 1');
        }, 1000);
      });
      const p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(1);
          resolve('goods 2');
        }, 1000);
      });
      const p3 = new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(1);
          reject('error');
        }, 1000);
      });
      const result = Promise.allSettled([p1, p2, p3]);
      console.log(result);

在这里插入图片描述

all

Promise.all 的结果为每一个Promise对象都成功就为成功，只要有一个失败就返回失败。

      const p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(1);
          resolve('goods 1');
        }, 1000);
      });
      const p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(1);
          resolve('goods 2');
        }, 1000);
      });
      const p3 = new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(1);
          reject('error');
        }, 1000);
      });
      // const result = Promise.allSettled([p1, p2, p3]);
      const result = Promise.all([p1, p2, p3]);
      console.log(result);

在这里插入图片描述

String.prototype.matchAll

matchAll()批量提取正则匹配的字符
matchAll()得到的是一个可迭代对象

      let str = `
        <ul>
          <li>
            <a href="#">a</a>
            <p>b</p>
          </li>
          <li>
            <a href="#">c</a>
            <p>d</p>
          </li>
        </ul>
      `;
      const reg = /<li>.*?<a href="#">(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;
      const result = str.matchAll(reg);
      console.log(result);

在这里插入图片描述
使用for of 遍历

      for (let v of result) {
        console.log(v);
      }

在这里插入图片描述
使用扩展运算符

      console.log([...result]);

在这里插入图片描述

可选链操作符

在获取对象的属性之前需要做层层判断是否存在，不然属性不存在时会报错。

使用逻辑与实现判断 &&：
      const main = config => {
        const dbHost = config && config.db && config.db.host;
        console.log(dbHost);
      };
      main({
        db: { host: '192.168.1.100', username: 'root' },
        cache: { host: '192.168.1.200', username: 'admin' }
      });
使用可选链操作符 ?.
      const main = config => {
        const dbHost = config?.db?.host;
        console.log(dbHost);
      };
      main({
        db: { host: '192.168.1.100', username: 'root' },
        cache: { host: '192.168.1.200', username: 'admin' }
      });

动态import

es6的写法为静态导入

	import * as m1 from './hello';

动态导入，实现按需导入（懒加载），提高加载的效率。
案例实现动态导入：点击按钮，提示hello

html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">click</button>
    <script src="./app.js" type="module"></script>
  </body>
</html>

app.js
动态导入hello模块进行使用，import(路径)的得到的是一个Promise对象，使用then获取成功的模块。

const btn = document.querySelector('#btn');
btn.onclick = () => {
  import('./hello.js').then(module => {
    module.hello();
  });
};

hello.js

export const hello = () => {
  alert('hello');
};

BigInt类型

ES11 引入了新的数据类型 BigInt类型 大整型，进行更大的数值运算。
不能使用浮点型

使用方法：

1.在普通的整型数后加n

      const n = 666n;
      console.log(n, typeof n);

在这里插入图片描述
2.使用BigInt()函数

      let n = 666;
      console.log(BigInt(n)); // 666n
应用场景

大数值运算
Number.MAX_SAFE_INTEGER 表示最大安全整数 9007199254740991

      let max = Number.MAX_SAFE_INTEGER;
      console.log(max);
      console.log(max + 1);
      console.log(max + 2);

js代码 当到达最大安全整数时，再相加就不会成功
在这里插入图片描述
使用BigInt进行转换后，即可相加
注意：大整型只能和大整型进行运算

      console.log(BigInt(max));
      console.log(BigInt(max) + BigInt(1));
      console.log(BigInt(max) + BigInt(2));

在这里插入图片描述

绝对全局对象globalThis

ES11 引入了特殊变量 globalThis，字面意思为全局的this
globalThis始终指向全局对象（无论运行环境node、浏览器等）

作用：忽略环境，直接使用globalThis 获得全局对象。

	console.log(globalThis);
浏览器指向 window对象

浏览器 全局对象为 Window
在这里插入图片描述

node环境指向 global

node环境的全局对象为 global
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值