你即将使用的ES2020新功能

JavaScript中新的强大功能：类中的私有字段，可选链，无效的合并运算符和BigInts。

做者：John Au-Yeung

翻译：疯狂的技术宅

原文：levelup.gitconnected.com/new-feature…

未经容许严禁转载

自 2015 年发布 ES6 以来，JavaScript 一直在快速发展，每次迭代中都会出现大量新功能。 JavaScript 语言规范的新版本每一年更新一次，新语言功能建议的定稿比以往更快。这意味着新功能将之前所未有的速度被整合到现代浏览器和其余 JavaScript 运行时引擎（如 Node.js）中。

在 2019年，“Stage 3”阶段有许多新功能，这意味着它即将完成，而且已经在浏览器和 Node 中得到对这些功能的支持。若是咱们想将它们用于生产环境，则可使用 Babel 之类的东西将其转换为旧版 JavaScript，以便在须要时用于旧版浏览器（如 Internet Explorer）。

在本文中，咱们研究了类中的私有字段，可选链，无效合并运算符和BigInts。

类的私有字段

最新提案之一是在类中添加私有变量的方法。咱们将使用 # 符号表示类的私有变量。这样就不须要使用闭包来隐藏不想暴露给外界的私有变量。例如咱们能够编写一个简单的类来增长和减小数字，请看如下代码：

class Counter {
  #x = 0;  increment() {
    this.#x++;
  }  decrement() {
    this.#x--;
  }  getNum(){
    return this.#x;
  }
}const c = new Counter();
c.increment(); 
c.increment(); 
c.decrement(); 
console.log(c.getNum());
复制代码

代码中 console.log 输出的结果是 1。 #x 是一个私有变量，没法在类外部访问。因此若是咱们这样写：

console.log(c.#x);
复制代码

将会获得提示 Uncaught SyntaxError: Private field '#x'。

私有变量是 JavaScript 类很是须要的功能。如今，最新版本的 Chrome 和 Node.js v12 中已提供了此功能。

可选链运算符

当前，若是要访问对象的深层嵌套属性，则必须经过很长的布尔表达式去检查每一个嵌套级别中的属性。必须检查每一个级别中定义的每一个属性，直到所需的深度嵌套的属性为止，以下代码所示：

const obj = {
  prop1: {
    prop2: {
      prop3: {
        prop4: {
          prop5: 5
        }
      }
    }
  }
}obj.prop1 &&
  obj.prop1.prop2 &&
  obj.prop1.prop2 &&
  obj.prop1.prop2.prop3 &&
  obj.prop1.prop2.prop3.prop4 &&
  console.log(obj.prop1.prop2.prop3.prop4.prop5);
复制代码

幸运的是，上面的代码在咱们想要访问的每一个级别中都定义了每一个属性。可是，若是在任何级别的对象中都有 undefined 或 null 的嵌套对象，若是不进行检查，那么的程序将会崩溃。这意味着咱们必须检查每一个级别，以确保当它遇到 undefined 或 null 对象时不会崩溃。

使用可选链运算符，只须要使用 ?. 来访问嵌套对象。并且若是碰到的是 undefined 或 null 属性，那么它只会返回 undefined。经过可选链，能够把上面的代码改成：

const obj = {
  prop1: {
    prop2: {
      prop3: {
        prop4: {
          prop5: 5
        }
      }
    }
  }
}console.log(obj?.prop1?.prop2?.prop3?.prop4?.prop5);
复制代码

当咱们的程序执行到 undefined 或 null 属性时，不会崩溃，而只是返回 undefined。不幸的是，这还没有在任何浏览器中实现，因此最新版本的 Babel 来使用此功能。

空位合并运算符

来自 undefined 或 null 值的另外一个问题是，若是咱们想要的变量为 undefined 或 null 则必须给变量设置默认值。例如：

const y = x || 500;
复制代码

当使用 || 运算符将 x 设置为 y 时，若是 x 被定义为 undefined，咱们必须设置一个默认值。运算符 || 的问题在于，全部相似于 0，false 或空字符串之类的值都将被咱们不想要的默认值覆盖。

为了解决这个问题，有人提议建立一个“nullish”合并运算符，用 ?? 表示。有了它，咱们仅在第一项为 null 或 undefined 时设置默认值。使用无效的合并运算符，以上表达式将变为：

const y = x ?? 500;
复制代码

例若有如下代码：

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

y 将被分配的值为 500，由于 x 的值为 null。可是，因为 n 不为 null 或 unfined，所以 m 被赋予值为 0。若是咱们使用 || 而不是 ??，那么因为 0 为假，所以将为 m 赋值 9000。

不幸的是，此功能还没有在任何浏览器或 Node.js 中实现，咱们必须使用最新版本的 Babel 才能使用此功能。

BigInt

咱们能够用 BigInt 对象表示大于 的整数。能够经过常规操做（例如算术运算符）进行加、减、乘、除、余数和幂等运算。它能够由数字和十六进制或二进制字符串构造。此外它还支持 AND、OR、NOT 和 XOR 之类的按位运算。惟一无效的位运算是零填充右移运算符（>>>）。

一样，一元运算符 + 也不支持 Numbers 和 BitInts 之间的加法运输。仅当全部操做数均为 BigInts 时才执行这些操做。在 JavaScript 中 BigInt 与普通数字不一样。它与普通数字的区别在于，数字的末尾带有一个 n。

咱们可使用 BigInt 工厂函数定义 BigInt。它有一个参数，该参数能够是整数或表明十进制整数、十六进制字或二进制的字符串。 BigInt 不能与内置 Math 对象一块儿使用。另外在数字与 BigInt 之间进行转换时必须当心，由于在将 BigInt 转换为数字时，BigInt 的精度可能会丢失，反之亦然。

要定义 BigInt，若是要传递的参数是整数，能够像下面的码同样：

const bigInt = BigInt(1);
console.log(bigInt);
复制代码

当咱们运行到 console.log 语句时，它将输出 1n。若是想将字符串传递给工厂函数，咱们能够这样写：

const bigInt = BigInt('2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222');
console.log(bigInt);
复制代码

也能够经过使用以 0x 开头的字符串将十六进制数字字符串传递给工厂函数：

const bigHex = BigInt("0x1fffffffffffff111111111");
console.log(bigHex);
复制代码

当咱们在 bigHex 上运行 console.log 时，上面的代码将输出为 618970019642690073311383825n。

能够传入一个以 0b 开头的二进制字符串来获取 BigInt：

const bigBin = BigInt("0b111111111111111000000000011111111111111111111111");
console.log(bigBin);
复制代码

当咱们在上面运行 console.log 时，上面的代码获得的结果是 281466395164671n。若是要建立的 BigInt 超出数字类型能够接受的范围，则传递字符串会很方便。

还可使用 BigInt 字面量去定义 BigInt 类型。方法在整数的末尾附加一个 n 字符。例如能够这样写：

const bigInt = 22222222222222222222222222222222n;
console.log(bigInt);
复制代码

而后咱们将 22222222222222222222222222222222222n 做为 bigInt 进行了输出。能够像使用数字同样对 BigInts 进行算术运算，例如 +、-、/、*、％等。若是咱们要使用 BigInts 进行这些操做，则全部操做数都必须都是 BigInts。可是若是咱们获得了带小数点的结果，则小数点之后的部分将被截断。 BigInt 是一个大整数，不能存储小数。例如在下面的例子中：

const expected = 8n / 2n;
console.log(expected) // 4n 
const rounded = 9n / 2n;
console.log(rounded) // 4n
复制代码

咱们获得 expected 和 rounded 的值都是 4n。这是由于小数部分已从 BigInt 中删除。

比较运算符能够应用于 BigInts。操做数能够是 BigInt 或数字。例如能够将 1n 与 1 进行比较：

1n === 1
复制代码

上面的代码将评估为 false ，由于 BigInt 和数字不是同一类型。可是，当咱们用双等号替换三等号时，以下面的代码所示：

1n == 1
复制代码

上面的语句被评估为 true，由于仅比较了该值。请注意，在两个示例中，咱们都将 BigInt 操做数与数字操做数混合在一块儿。BigInts 和数字也能够与其余运算符一块儿进行比较，例如如下示例：

1n < 9
// true9n > 1
// true9 > 9n
// false9n > 9
// false9n >= 9
// true
复制代码

一样，它们能够混合在一块儿造成一个数组并进行排序。例如：

const mixedNums = [5n, 6, -120n, 12, 24, 0, 0n];
mixedNums.sort();
console.log(mixedNums)
复制代码

如今，此功能可在最新版本的 Chrome 和 Node.js中使用。

总结

咱们可使用 # 号来表示私有类变量。这样就没必要用闭包来隐藏咱们不想暴露给外界的私有变量。为了解决对象中 null 和 undefined 值的问题，咱们提供了可选链运算符来访问属性，而无需检查每一个级别多是 null 仍是 undefined。使用无效的合并运算符，咱们只能为变量为 null 或 undefined 的状况设置默认值。使用 BigInt 对象，咱们能够用 JavaScript 表示超出常规数字安全范围的大数字，并对其执行标准操做，只是小数部分将从结果中省略。

欢迎关注前端公众号：前端先锋，免费领取前端工程化实用工具包。