二十四、ES11 新特性

（一）私有属性

• 变量名前加 #

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("ikuko", 24, "62kg");
console.log(girl);
// Person {name: 'ikuko', #age: 24, #weight: '62kg'}

// 类外部调用：无法访问私有属性
console.log(girl.name);
// ikuko
console.log(girl.#age);
// Private field '#age' must be declared in an enclosing class

// 类内部调用：可以访问
girl.intro();
// ikuko
// 24
// 62kg

（二）Promise 方法扩展 —— Promise.allSettled

• allSettled()
  • 返回的结果始终是成功的，返回值是一个数组
  • 数组内包含每一个异步任务的状态和返回值
• all()
  • 返回的结果根据数组内的异步任务返回值及状态决定
  • 都成功才成功

// 声明两个Promise，组成数组
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("商品数据 - 1");
  }, 1000);
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    // resolve('商品数据 - 2');
    reject("出错啦");
  }, 1000);
});

// 调用allSettled方法
const res1 = Promise.allSettled([p1, p2]);
console.log(res1);

// 调用all方法
const res2 = Promise.all([p1, p2]);
console.log(res2);

（三）字符串方法扩展 —— String.prototype.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 res = str.matchAll(reg);
console.log(res);
// RegExpStringIterator {}

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

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

（四）可选链操作符 ?.

• 获取层级比较深的对象参数时无需做层级判断

function main(config) {
  // const dbHost = config && config.db && config.db.host;
  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",
  },
});
// 192.168.1.100

main();
// undefined

（五）动态 import

<button id="btn">点击++</button>
<script src="./js/app2.js" type="module"></script>

/* app2.js */

// 静态导入
// import * as m1 from './hello.js';

// 获取元素
const btn = document.getElementById("btn");
btn.onclick = function () {
  // 动态导入
  import("./hello.js").then((module) => {
    // console.log(module);
    module.hello();
  });
};

/* hello.js */

export function hello() {
  alert("Hello");
}

（六）大整形 BigInt 类型

1.大整形

let n = 521n;
console.log(n, typeof n);
// 521n 'bigint'

2.函数

let n = 123;

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

console.log(BigInt(1.2));
// The number 1.2 cannot be converted to a BigInt because it is not an integer

3.用于大数值运算

• 大整形不能直接与整形进行运算

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);
// Cannot mix BigInt and other types, use explicit conversions

console.log(BigInt(max) + BigInt(1));
// 9007199254740992n

console.log(BigInt(max) + BigInt(2));
// 9007199254740993n

（七）绝对全局对象 —— globalThis

• 无论执行环境是什么，始终指向全局对象
  • 浏览器 => Window
  • NodeJS => global
  • ...

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

• 终端运行 globalThis.js，查看 NodeJS 环境下的全局对象

/* globalThis.js */

console.log(globalThis);
/**
 * <ref *1> Object [global] {
    global: [Circular *1],
    clearInterval: [Function: clearInterval],
    clearTimeout: [Function: clearTimeout],
    setInterval: [Function: setInterval],
    setTimeout: [Function: setTimeout] {
        [Symbol(nodejs.util.promisify.custom)]: [Function (anonymous)]
    },
    queueMicrotask: [Function: queueMicrotask],
    clearImmediate: [Function: clearImmediate],
    setImmediate: [Function: setImmediate] {
        [Symbol(nodejs.util.promisify.custom)]: [Function (anonymous)]
    }
   }
 */