ESMA Script 2020(ES2020)最新消息
What's new in ECMAScript 2020 (ES2020)
Ecmascript 2020(ES2020)最新消息
It’s time for yet another update on the ever-changing work of art that is JavaScript. In this article, we’re going to review some of the latest and greatest features coming with ES2020.
是时候对不断变化的艺术作品—— JavaScript ——进行另一次更新了。 在本文中，我们将回顾 ES2020的一些最新和最伟大的特性。
Installation安装
Since many people don’t think to update their browsers to make their developer’s lives easier, we’ll need to use babel to get started using features that are not available across the board for users. For simplicity’s sake, I’ll use the Parcel bundlerto get everything running as quickly as possible.
因为很多人并不认为升级他们的浏览器可以让他们的开发人员的生活变得更加轻松，所以我们需要使用 babel 来开始使用那些用户无法普遍使用的特性。 为了简单起见，我将使用 Parcel bundler 来让所有东西尽可能快地运行。
$ yarn add parcel-bundler
package.json
"scripts": {
"start": "parcel index.html"
},
Sadly, at the time of this writing we’re too far ahead of our time and there doesn’t seem to be a working preset for ES2020. If you throw these in a .babelrc file and save, Parcel should handle installing everything for you.
不幸的是，在写这篇文章的时候，我们已经远远领先于我们的时代，似乎没有一个工作预设的 ES2020。 如果你把这些东西放进。 Babelrc 文件和保存，Parcel 应该处理安装一切为您。
.babelrc
{
"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"
]
}
Private Class Variables私有类变量
One of the main purposes of classes is to contain our code into more reusable modules. Because you’ll create a class that’s used in many different places you may not want everything inside it to be available globally.
类的主要目的之一是将代码包含到更多可重用的模块中。 因为您将创建一个在许多不同地方使用的类，所以您可能不希望其中的所有内容都是全局可用的。
Now, by adding a simple hash symbol in front of our variable or function we can reserve them entirely for internal use inside the class.
现在，通过在变量或函数前面添加一个简单的散列符号，我们可以将它们完全保留在类内部使用。
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
Promise.allSettled我保证一切都解决了
When we’re working with multiple promises, especially when they are reliant on each other, it could be useful to log what’s happening to each to debug errors. With Promise.allSettled, we can create a new promise that only returns when all of the promises passed to it are complete. This will give us access to an array with some data on each 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}
// ]
Nullish Coalescing Operator无效合并操作符
Because JavaScript is dynamically typed, you’ll need to keep JavaScript’s treatment of truthy/falsy values in mind when assigning variables. If we have a object with some values, sometimes we want to allow for values that are technically falsy, like an empty string or the number 0. Setting default values quickly gets annoying since it’ll override what should be valid values.
因为 JavaScript 是动态类型的，所以在分配变量时需要牢记 JavaScript 对真 / 假值的处理。 如果我们有一个具有一些值的对象，有时候我们希望允许一些技术上有误的值，比如一个空字符串或者数字0。 设置默认值很快会变得烦人，因为它会覆盖应该是有效值的内容。
let person = {
profile: {
name: "",
age: 0
}
};
console.log(person.profile.name || "Anonymous"); // Anonymous
console.log(person.profile.age || 18); // 18
Instead of double pipes we can use the double question marks operator to be a bit more type strict, which only allows the default when the value is null or undefined.
与使用双重管道不同，我们可以使用双重问号运算符的类型更严格一些，它只允许在值为 null 或未定义时使用默认值。
console.log(person.profile.name ?? "Anonymous"); // "" console.log(person.profile.age ?? 18); // 0
Optional Chaining Operator可选的链接操作符
Similar to the nullish coalescing operator, JavaScript may not act how we want when dealing with falsy values. We can return a value if what we want is undefined, but what if the path to it is undefined?
类似于 nullish 合并操作符，JavaScript 在处理虚值时可能不会按照我们希望的方式运行。 如果我们想要的是未定义的，我们可以返回一个值，但是如果到它的路径是未定义的呢？
By adding a question mark before our dot notation we can make any part of a value’s path optional so we can still interact with it.
通过在点符号之前添加一个问号，我们可以使值的路径的任何部分可选，这样我们仍然可以与它交互。
let person = {};
console.log(person.profile.name ?? "Anonymous"); // person.profile is undefined
console.log(person?.profile?.name ?? "Anonymous");
console.log(person?.profile?.age ?? 18);
You can refer to this post to learn more about Optional Chaining and Nullish Coalescing.
你可以参考这篇文章来了解更多关于可选链接和 Nullish 合并的信息。
BigInt
We won’t go into the technical details, but because of how JavaScript handles numbers, when you go high enough things start to get a bit wonky. The largest number JavaScript can handle is 2^53, which we can see with MAX_SAFE_INTEGER.
我们不会深入技术细节，但是由于 JavaScript 处理数字的方式，当你把事情做得足够高的时候，事情就会变得有点不靠谱。 Javascript 可以处理的最大数字是2 ^ 53，我们可以用 MAX safe integer 看到。
const max = Number.MAX_SAFE_INTEGER; console.log(max); // 9007199254740991
Anything above that and things start to get a little weird…
如果超过这个数字，事情就会变得有点奇怪... ..。
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
We can get around this with the new BigInt datatype. By throwing the letter ‘n’ on the end we can start using and interacting with insanely large numbers. We’re not able to intermix standard numbers with BigInt numbers, so any math will need to be also done with BigInts.
我们可以使用新的 BigInt 数据类型来解决这个问题。 通过在末尾加上字母 n，我们可以开始使用疯狂的大数字，并与之互动。 我们不能将标准数与 BigInt 数混合，因此任何数学都需要使用 BigInt 数来完成。
const bigNum = 100000000000000000000000000000n; console.log(bigNum * 2n); // 200000000000000000000000000000n
Dynamic Import动态导入
If you had a file full of utility functions, some of them may rarely be used and importing all of their dependencies could just be a waste of resources. Now we can use async/await to dynamically import our dependencies when we need them.
如果您的文件中充满了实用函数，其中一些函数可能很少被使用，导入它们的所有依赖项可能只是浪费资源。 现在我们可以使用 async / await 在需要的时候动态导入依赖关系。
This will not work with our current Parcel setup, since we're using imports which will only work in a Node.js environment.
这不适用于我们目前的 Parcel 设置，因为我们使用的是只能在 Node.js 环境中使用的导入。
math.js
3. math.js
const add = (num1, num2) => num1 + num2;
export { add };
index.js
1.1.1
const doMath = async (num1, num2) => {
if (num1 && num2) {
const math = await import('./math.js');
console.log(math.add(5, 10));
};
};
doMath(4, 2);
Conclusion总结
Now you’re ready to start amazing or perhaps confusing your coworkers with JavaScript features that aren’t even in most browsers, yet (unless they are if you are reading this from the future 😉).
现在，你已经准备好开始一些令人惊奇的或者可能会让你的同事感到困惑的 JavaScript 特性，这些特性甚至在大多数浏览器中都没有，但是(除非你是从未来阅读这篇文章的人)。
