7个ECMAScript 11的新特性，你需要了解一下_可选链

​


1、String.prototype.matchAll

// matchAll 用于字符串批量匹配正则, 返回一个 可迭代对象
let str = `
        <ul>
            <li>
                <a>肖生克的救赎</a>
                <p>上映日期: 1994-09-10</p>
            </li>
                <li>
                <a>阿甘正传</a>
                <p>上映日期: 1994-07-06</p>
            </li>
        </ul>`;


// 声明正则
const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg;


// 调用方法
const result = str.matchAll(reg);


const arr = [...result];
console.log(arr);

2、类的私有属性

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 boy = new Person('张三',22,'80kg');
console.log(boy.name);
// Uncaught SyntaxError: Private field '#age' must be declared in an enclosing class
// console.log(boy.#age);
// console.log(boy.#weight);


boy.intro();

3、Promise.allSettled

// Promise.allSettled()不管参数中的promise是fulfilled还是rejected，都会等参数中的实例都返回结果，包装实例才会结束。


 // 声明两个promise对象
const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('商品数据 -1');
    }, 1000)
});


const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject('出错啦');
    }, 1000)
});


// 调用 allSettled 方法
const result = Promise.allSettled([p1,p2]);
console.log(result);
/*
Promise {<pending>}
    __proto__: Promise
    [[PromiseState]]: "fulfilled"
    [[PromiseResult]]: Array(2)
    0: {status: "fulfilled", value: "商品数据 -1"}
    1: {status: "rejected", reason: "出错啦"}
    length: 2
    __proto__: Array(0)
*/

4、可选链操作符

// 项目中经常会遇到深层次嵌套属性的验证，我们所能做的就是通过&&每层依次验证，这样看起来代码很繁琐，但又不得不这样做。
// 为了简化代码, 使用" ?. "可选链式操作符, 会自动检测 ? 前面的对象是否存;  存在 则调用 , 不存在 则为 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',
    user:'root'
  },
  cache:{
    host:'192.168.1.200',
    user:'admin'
  }
});

5、动态 import 导入

// 动态 import ,用于模块懒加载, 用到一个模块的时候再加载, 没用到就不加载
// 使用 improt(路径) 方法, 返回一个promise 对象


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">点击按钮</button>


</body>
<script>
    let btn = document.getElementById('btn');
    btn.onclick = function(){
        import('./34.ES11-动态import.js').then(module=>{
            console.log(module);
            module.hello();
        });
    }
</script>
</html>


// 34.ES11-动态import.js
export function hello() {
    console.log('hello');
}

6、bigInt

用于大数值运算。

// 大整型
let n = 123n;
console.log(n, typeof (n)); // 123n "bigint"


// 函数
let n2 = 123;
console.log(BigInt(n2)); // 123n
// console.log(BigInt(1.2)); //报错


// 大数值运算
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) + 1n); // 9007199254740992n
console.log(BigInt(max) + 2n); //9007199254740993n

7、 globalThis 对象

// global 是一个变量, 永远指向顶级对象


// 在js中 
   console.log(globalThis); // window


// 在node中
   console.log(globalThis); // global

学习更多技能请点击下方公众号

7个ECMAScript 11的新特性，你需要了解一下_操作符_02

7个ECMAScript 11的新特性，你需要了解一下_可选链_03