ES11 新特性

ES11 新特性

私有属性

私有属性只能在 class 里访问

class Person {
  // 公有属性
  name;
  // 私有属性
  #age;
  #weight;
  // 构造方法
  constructor(name, age, weight) {
    this.name = name;
    this.#age = age;
    this.#weight = weight;
  }
  showMsg() {
    console.log(this.name);
    console.log(this.#age);
    console.log(this.#weight);
  }
}

const girl = new Person("小红", 18, "165");

console.log(girl); // {name: '小红', #age: 18, #weight: '165'}
console.log(girl.name); // 小红

console.log(girl.#age); // 报错 私有属性只能在class里访问

girl.showMsg();

Promise 扩展

• Promise.allSettled() 返回的状态总是成功的，返回值为传入 Promise 对象的结果

  // 声明一个Promise对象
  const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("商品数据-1");
    }, 1000);
  });
  
  const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("商品数据-2");
    }, 1000);
  });
  
  const p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("失败了");
    }, 1000);
  });
  
  // Promise.allSettled() 返回的状态总是成功的，返回值为传入 Promise 对象的结果
  const result = Promise.allSettled([p1, p2]);
  console.log(result); // Promise {<fulfilled>: [ {status: 'fulfilled', value: '商品数据-1'}, {status: 'fulfilled', value: '商品数据-2'} ]}
  
  const result2 = Promise.allSettled([p1, p3]);
  console.log(result2); // Promise {<fulfilled>: [ {status: 'fulfilled', value: '商品数据-1'}, {status: 'rejected', reason: '失败了'} ]}
  

• Promise.all() 返回值 一假便假 值为失败 Promise 对象的值

  // 声明一个Promise对象
  const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("商品数据-1");
    }, 1000);
  });
  
  const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("失败了");
    }, 1000);
  });
  
  // Promise.all() 返回值 一假便假 值为失败Promise对象的值
  const result = Promise.all([p1, p2]);
  console.log(result); // {<rejected>: 失败了}
  

字符串扩展

• 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>/gs;
  const result = str.matchAll(reg);
  
  /* for (v of result) {
    console.log(v[1]); // 肖申克的救赎            阿甘正传
    console.log(v[2]); // 上映日期：1994-09-10   上映日期：1994-07-06
  } */
  
  const res = [...result];
  console.log(res); // [Array(3), Array(3)]
  

可选链操作符

function main(config) {
  // 需要层层判断 否则如果不传参数会报错
  const dbHost = config && config.db && config.db.host;

  console.log(dbHost); // localhost
}

main({
  db: {
    host: "localhost",
    username: "root",
  },
  catch: {
    host: "localhost",
    username: "root",
  },
});

• ?. 可选链操作符 - 判断前一个参数是否存在

  function main(config) {
    const dbHost = config?.db?.host;
  
    console.log(dbHost); // localhost
  }
  
  main({
    db: {
      host: "localhost",
      username: "root",
    },
    catch: {
      host: "localhost",
      username: "root",
    },
  });
  

动态 import

• 全局引入

  import * as m1 from "./hello.js";
  
  const btn = document.getElementById("btn");
  
  btn.onclick = function () {
    m1.showHello();
  };
  

• 动态引入 - 提升加载效率

  const btn = document.getElementById("btn");
  
  btn.onclick = function () {
    import("./hello.js").then((module) => {
      module.showHello();
    });
  };
  

BigInt 大整型

• 大整形

  let n = 521n;
  console.log(n); // 521n
  

• 函数

  let n = 123;
  console.log(n); // 123
  console.log(BigInt(n)); // 123n
  

• 大数值运算

  let max = Number.MAX_SAFE_INTEGER;
  console.log(max); // 9007199254740991
  console.log(max + 1); // 9007199254740992
  console.log(max + 2); // 9007199254740992
  
  console.log(BigInt(max)); // 9007199254741n
  console.log(BigInt(max) + BigInt(1)); // 9007199254742n
  console.log(BigInt(max) + BigInt(2)); // 9007199254743n
  

globalThis 绝对全局对象

globalThis 始终指向 Window

console.log(globalThis); // Window对象