ES2020的一些新特性

前言

	ES2020 是 ECMAScript 对应 2020 年的版本。
	这个版本不像 ES6 (ES2015)那样包含大量新特性。但也添加了许多有趣且有用的特性。

1.私有类变量#

	类的主要目的之一是将我们的代码包含在可重用的模块中。
	因为您将创建一个在许多不同地方使用的类，所以您可能不希望其中的所有内容在全局范围内都可用。

	现在，通过在变量或函数前面添加一个简单的哈希符号，我们可以将它们完全保留，给类内部使用

class Message {
  #message = "Howdy"
  
  greet() { console.log(this.#message) }
}

const greeting = new Message()

greeting.greet() // Howdy
console.log(greeting.#message) // Private name #message is not defined

2.Promise.allSettled

	当我们使用多个promise时，尤其是当它们相互依赖时，记录每个事件的发生以调试错误可能很有用。
	使用Promise.allSettled，我们可以创建一个仅在传递给它的所有承诺完成后才返回的新承诺。这将使我们能够访问一个数组，其中包含有关每个诺言的一些数据。

Promise.allSettled([
  Promise.reject({ code: 500, msg: '服务异常' }),
  Promise.resolve({ code: 200, list: [] }),
  Promise.resolve({ code: 200, list: [] })
]).then(res => {
  console.log(res)
  /*
        0: {status: "rejected", reason: {…}}
        1: {status: "fulfilled", value: {…}}
        2: {status: "fulfilled", value: {…}}
    */
  // 过滤掉 rejected 状态，尽可能多的保证页面区域数据渲染
  RenderContent(
    res.filter(el => {
      return el.status !== 'rejected'
    })
  )
})

	Promise.allSettled跟Promise.all类似, 其参数接受一个Promise的数组, 返回一个新的Promise, 唯一的不同在于, 它不会进行短路。
	也就是说当Promise全部处理完成后,我们可以拿到每个Promise的状态, 而不管是否处理成功。

3.空位合并运算符 ??

	由于JavaScript是动态类型的，因此在分配变量时，需要牢记JavaScript对真实/错误值的处理。	
	如果我们有一个带有某些值的对象，有时我们希望允许使用在技术上是虚假的值，例如空字符串或数字0。设置默认值很快会很烦人，因为它将覆盖应为有效值的内容

let person = {
  profile: {
    name: "",
    age: 0
  }
};

console.log(person.profile.name || "Anonymous"); // Anonymous
console.log(person.profile.age || 18); // 18

代替双管道，我们可以使用双问号运算符将类型更严格一些，仅当值为null或undefined时才允许使用默认值。

console.log(person.profile.name ?? "Anonymous"); // ""
console.log(person.profile.age ?? 18); // 0

4.可选链接运算符?.

可选链运算符 可让我们在查询具有多个层级的对象时，不再需要进行冗余的各种前置校验。

日常开发中，当需要访问嵌套在对象内部好几层的属性时，可能就会得到这种的错误
Uncaught TypeError: Cannot read property...，
这种错误，让整段程序运行中止。

就要修改你的代码来处理来处理属性链中每一个可能的undefined对象

let nestedProp = obj && obj.first && obj.first.second;

可选链式调用 ，可以大量简化类似繁琐的前置校验操作，而且更安全

let nestedProp = obj?.first?.second;

如果obj或obj.first是null/undefined，表达式将会短路计算直接返回undefined

5.BigInt

JavaScript可以处理的最大数字是2 ^ 53，我们可以通过看到MAX_SAFE_INTEGER。

const max = Number.MAX_SAFE_INTEGER;

console.log(max); // 9007199254740991

超过此限制，一切开始变得有点奇怪

console.log(max + 1); // 9007199254740992
console.log(max + 2); // 9007199254740992
console.log(max + 3); // 9007199254740994
console.log(Math.pow(2, 53) == Math.pow(2, 53) + 1); // true

	可以使用新的BigInt数据类型解决此问题。通过n在末尾加上字母“ ”，我们可以开始使用大量数字并与之交互。
	我们无法将标准数字与BigInt数字混合使用，因此任何数学运算都需要使用BigInts完成。

const bigNum = 100000000000000000000000000000n;

console.log(bigNum * 2n); // 200000000000000000000000000000n

6.动态引入

可以在需要时使用async / await动态导入依赖项。

math.js
const add = (num1, num2) => num1 + num2;

export { add };

index.js
const doMath = async (num1, num2) => {
  if (num1 && num2) {
    const math = await import('./math.js');
    console.log(math.add(5, 10));
  };
};

doMath(4, 2);

7.globalThis

globalThis 是一个全新的标准方法用来获取全局 this 。：
以往我们这样获取：
	全局变量 window：是一个经典的获取全局对象的方法。但是它在 Node.js 和 Web Workers 中并不能使用
	全局变量 self：通常只在 Web Workers 和浏览器中生效。但是它不支持 Node.js。一些人会通过判断 self 是否存在识别代码是否运行在 Web Workers 和浏览器中
	全局变量 global：只在 Node.js 中生效

过去获取全局对象，可通过一个全局函数：

// ES10之前的解决方案
const getGlobal = function(){
  if(typeof self !== 'undefined') return self
  if(typeof window !== 'undefined') return window
  if(typeof global !== 'undefined') return global
  throw new Error('unable to locate global object')
}

// ES10内置
globalThis.Array(0,1,2) // [0,1,2]

// 定义一个全局对象v = { value:true } ,ES10用如下方式定义
globalThis.v = { value:true }

	globalThis 目的就是提供一种标准化方式访问全局对象，有了 globalThis 后，你可以在任意上下文，任意时刻都能获取到全局对象。
	如果您在浏览器上，globalThis将为window，如果您在Node上，globalThis则将为global。因此，不再需要考虑不同的环境问题。

// worker.js
globalThis === self
// node.js
globalThis === global
// browser.js
globalThis === window

	Object.prototype 必须在全局对象的原型链中。下面的代码在最新浏览器中已经会返回 true 了：

Object.prototype.isPrototypeOf(globalThis); // true