本文转载于 SegmentFault 社区
作者：SunSeekerX
是时候对不断变化的艺术作品(即
JavaScript
)进行另一个更新了。在本文中，我们将回顾
ES2020
的一些最新和最强大的功能。
自从很多人不认为更新他们的浏览器是为了让他们的开发工作更简单，我们需要使用
babel
转码来开始使用一些新的语法特性。为了简单起见，我将使用
Parcel bundler
让所有东西尽可能快地运行。
$ yarn add parcel-bundler
"scripts": {
"start": "parcel index.html"
},
遗憾的是，在写这篇文章的时候，我们使用的语法是非常新的，市面上少有一个
ES2020
的工作预置环境。将下面代码写入到
.babelrc
文件并保存，
Parcel
应该可以为您处理所有安装。
{
"plugins": [
"@babel/plugin-proposal-nullish-coalescing-operator",
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-private-methods",
"@babel/plugin-syntax-bigint"
]
}
你创建一个在许多不同地方使用的类，你可能不希望它内部的所有内容都是全局可用的。
现在，通过在变量或函数前面添加一个简单的哈希符号，我们可以将它们完全保留为类内部使用。
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
当我们在使用多实例
promises
的时候，特别是当他们互相依赖的时候，记录每次调试发生的错误是非常有用的，通过使用
Promise.allSettled
，我们可以创建一个仅仅当全部的
promises
完成才返回的
promise
，他将返回一个包含每个
promise
执行结果的数组。
const p1 = new Promise((res, rej) => setTimeout(res, 1000));
const p2 = new Promise((res, rej) => setTimeout(rej, 1000));
Promise.allSettled([p1, p2]).then(data => console.log(data));
// [
// Object { status: "fulfilled", value: undefined},
// Object { status: "rejected", reason: undefined}
// ]
空值合并运算符（
??
）是一个逻辑运算符。当左侧操作数为
null
或
undefined
时，其返回右侧的操作数。否则返回左侧的操作数。
与
逻辑或（||）操作符
不同，逻辑或会在左操作数为 假值 时返回右侧操作数。也就是说，如果你使用
||
来为某些变量设置默认的值时，你可能会遇到意料之外的行为。比如为假值
（例如，'' 或 0）
时。见下面的例子。
const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"
const baz = 0 ?? 42;
console.log(baz);
// expected output: 0
与空值合并操作符类似，
JavaScript
在处理错误值时可能无法按我们希望的方式工作。如果他是未定义的，我们可以返回一个值，但是如果到它的路径是未定义的呢?
通过在点表示法之前添加一个问号，我们可以使值的路径的任何部分成为可选的，这样我们仍然可以与它交互。
如果访问对象上不存在的属性上的属性，使用.操作符会直接报错。
let person = {};
// 如果person对象不包含profile会报错
console.log(person.profile.name ?? "Anonymous"); // person.profile is undefined
// 下面的路径是可选的，如果person对象不包含profile属性直接返回"Anonymous"
console.log(person?.profile?.name ?? "Anonymous");
console.log(person?.profile?.age ?? 18);
我们不会深入讨论技术细节，但是由于
JavaScript
处理数字的方式，当您达到足够高的级别时，就会出现一些意料之外的事情。
JavaScript
能处理的最大数字是 2 的 53 次方，我们可以使用
Number
的
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
数字混合在一起，因此任何数学运算都需要使用
BigInt
来完成。
const bigNum = 100000000000000000000000000000n;
console.log(bigNum * 2
