ES2020 新特性

可选链操作符（Optional Chaining）

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

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

于是，你就要修改你的代码来处理来处理属性链中每一个可能的 undefined 对象，比如：

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

在访问 obj.first.second 之前，要先确认 obj 和 obj.first 的值非 null(且不是 undefined)。

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

1	let nestedProp = obj?.first?.second;

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

空位合并操作符（Nullish coalescing Operator）

当我们查询某个属性时，经常会给没有该属性就设置一个默认的值，比如下面两种方式：

1 2	let c = a ? a : b; // 方式1 let c = a \|\| b; // 方式2

这两种方式有个明显的弊端，它都会覆盖所有的假值，如(0, ‘’, false)，这些值可能是在某些情况下有效的输入。

let x = {
  profile: {
    name: "浪里行舟",
    age: "",
  },
};
console.log(x.profile.age || 18); //18

上例中 age 的属性为空字符串，却被等同为假值，为了解决这个问题，ES2020 诞生了个新特性–空位合并操作符，用 ?? 表示。如果表达式在??的左侧运算符求值为 undefined 或 null，就返回其右侧默认值。

1 2	let c = a ?? b; // 等价于let c = a !== undefined && a !== null ? a : b;

例如有以下代码：

const x = null;
const y = x ?? 500;
console.log(y); // 500
const n = 0;
const m = n ?? 9000;
console.log(m); // 0

空位合并操作符的支持情况：

Promise.allSettled

我们知道 Promise.all 具有并发执行异步任务的能力。但它的最大问题就是如果参数中的任何一个 promise 为 reject 的话，则整个 Promise.all 调用会立即终止，并返回一个 reject 的新的 Promise 对象。

const promises = [
  Promise.resolve(1),
  Promise.resolve(2),
  Promise.reject("error"),
];

Promise.all(promises)
  .then((responses) => console.log(responses))
  .catch((e) => console.log(e)); // "error"

假如有这样的场景：一个页面有三个区域，分别对应三个独立的接口数据，使用 Promise.all 来并发请求三个接口，如果其中任意一个接口出现异常，状态是 reject,这会导致页面中该三个区域数据全都无法出来，这个状况我们是无法接受，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 的状态, 而不管是否处理成功。

Promise.allSettled 的支持情况：

Dynamic import

现在前端打包资源越来越大，前端应用初始化时根本不需要全部加载这些逻辑资源，为了首屏渲染速度更快，很多时候都是动态导入（按需加载）模块，比如懒加载图片等，这样可以帮助您提高应用程序的性能。

其中按需加载这些逻辑资源都一般会在某一个事件回调中去执行：

el.onclick = () => {
  import("/modules/my-module.js")
    .then((module) => {
      // Do something with the module.
    })
    .catch((err) => {
      // load error;
    });
};

import()可以用于 script 脚本中,import(module) 函数可以在任何地方调用。它返回一个解析为模块对象的 promise。

这种使用方式也支持 await 关键字。

1	let module = await import("/modules/my-module.js");

通过动态导入代码，您可以减少应用程序加载所需的时间，并尽可能快地将某些内容返回给用户。

Dynamic import 的支持情况：

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 了：

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

globalThis 的支持情况：

类的私有变量

最新提案之一是在类中添加私有变量的方法。我们将使用 # 符号表示类的私有变量。这样就不需要使用闭包来隐藏不想暴露给外界的私有变量。

class Counter {
  #x = 0;

  #increment() {
    this.#x++;
  }

  onClick() {
    this.#increment();
  }
}

const c = new Counter();
c.onClick(); // 正常
c.#increment(); // 报错

通过 # 修饰的成员变量或成员函数就成为了私有变量，如果试图在 Class 外部访问，则会抛出异常。现在，此特性可在最新版本的 Chrome 和 Node.js 中使用。

static 字段

它允许类拥有静态字段，类似于大多数 OOP 语言。静态字段可以用来代替枚举，也可以用于私有字段。

class Colors {
  // public static 字段
  static red = "#ff0000";
  static green = "#00ff00";

  // private static 字段
  static #secretColor = "#f0f0f0";
}

font.color = Colors.red;
font.color = Colors.#secretColor; // 出错

现在，此特性可在最新版本的 Chrome 和 Node.js 中使用。

WeakRef

一般来说，在 JavaScript 中，对象的引用是强保留的，这意味着只要持有对象的引用，它就不会被垃圾回收。

1 2	const ref = { x: 42, y: 51 }; // 只要我们访问 ref 对象（或者任何其他引用指向该对象），这个对象就不会被垃圾回收

目前在 Javascript 中，WeakMap 和 WeakSet 是弱引用对象的唯一方法：将对象作为键添加到 WeakMap 或 WeakSet 中，是不会阻止它被垃圾回收的。

const wm = new WeakMap();
{
  const ref = {};
  const metaData = "foo";
  wm.set(ref, metaData);
  wm.get(ref);
  // 返回 metaData
}
// 在这个块范围内，我们已经没有对 ref 对象的引用。
// 因此，虽然它是 wm 中的键，我们仍然可以访问，但是它能够被垃圾回收。

const ws = new WeakSet();
ws.add(ref);
ws.has(ref); // 返回 true

JavaScript 的 WeakMap 并不是真正意义上的弱引用：实际上，只要键仍然存活，它就强引用其内容。WeakMap 仅在键被垃圾回收之后，才弱引用它的内容。

WeakRef 是一个更高级的 API，它提供了真正的弱引用，Weakref 实例具有一个方法 deref，该方法返回被引用的原始对象，如果原始对象已被收集，则返回 undefined 对象。

const cache = new Map();
const setValue = (key, obj) => {
  cache.set(key, new WeakRef(obj));
};

const getValue = (key) => {
  const ref = cache.get(key);
  if (ref) {
    return ref.deref();
  }
};

// this will look for the value in the cache
// and recalculate if it's missing
const fibonacciCached = (number) => {
  const cached = getValue(number);
  if (cached) return cached;
  const sum = calculateFibonacci(number);
  setValue(number, sum);
  return sum;
};

总而言之，JavaScript 中对象的引用是强引用，WeakMap 和 WeakSet 可以提供部分的弱引用功能，若想在 JavaScript 中实现真正的弱引用，可以通过配合使用 WeakRef 和终结器（Finalizer）来实现。

现在，此特性可在最新版本的 Chrome 和 Node.js 中使用。