ecmascript_ecmascript 2020中的新运营商

ecmascript

We are already well into 2020 and the new ECMAScript has been out for some time. But this was a complicated year and maybe you haven’t found the time to have a look at its two new operators: the nullish coalescing operator and optional chaining. Both have been available to TypeScript developers since the version 3.7 already but are now supported in plain JavaScript as well. And despite their maybe obscure names, they are pretty cool shortcuts for dealing with undefined and null values.

我们已经进入2020年，新的ECMAScript已经推出了一段时间。 但这是复杂的一年，也许您还没来得及看看它的两个新运算符：空值合并运算符和可选链接。 从3.7版开始，TypeScript开发人员就可以使用这两种格式，但是现在纯JavaScript也支持它们。 尽管它们的名称晦涩难懂，但它们是处理undefined和null值的不错的快捷方式。

空合并运算符 (The nullish coalescing operator)

This operator is an improvement of the || one. || in JavaScript is originally the logical OR:

该运算符是||的改进。 之一。 || 在JavaScript中，本来是逻辑OR：

true || false -> true
false || false -> false
false || true -> true
true || true -> true

If the first operand is false, the second one is returned. This is also the case if the first operand is not strictly false but has another “falsy” value like null or undefined. This is why this operator is frequently used as a way to assign a default value if the one you are attempting to assign is null or undefined :

如果第一个操作数为false ，则返回第二个操作数。 如果第一个操作数并非严格为false而是具有另一个“伪”值，例如null或undefined 。 这就是为什么如果您要分配的默认值为null或undefined该运算符经常被用作分配默认值的一种方式：

let value;
const a = value || 1; // a is 1
value = 2;
const b = value || 1; // b is 2

This is basically a shortcut for const b = value ? value : 1; and is pretty convenient. The issue with this syntax is that the second operand is taken if the first one is falsy. undefined, null, false are falsy but so are 0, '' and NaN. This can be forgotten and lead to unexpected bugs. In the following case for example, even though value is defined, b is going get assigned the value 1:

这基本上是const b = value ? value : 1;的快捷方式const b = value ? value : 1; const b = value ? value : 1; 而且很方便。 这种语法的问题是，如果第一个操作数是错误的，则采用第二个操作数。 undefined ， null ， false是虚假的，但是0 ， ''和NaN也是false 。 这可能会被遗忘并导致意外的错误。 例如，在以下情况下，即使定义了value ， b也会被分配值为1 ：

let value = 0;
const b = value || 1; // b is 1

This can be exactly what you intended to do but it can also be, and often is, a bug. This is where the nullish coalescing operator comes in: it was made to replace the || operator in cases where we want to assign a default value instead of null or undefined but where 0 , '' and NaN are valid values:

这可能恰好是您要执行的操作，但也可能是(经常是)错误。 这是无效合并运算符出现的地方：它是用来替换|| 如果要分配默认值而不是null或undefined但其中0 ， ''和NaN是有效值，则使用运算符：

let value = 0;
const b = value ?? 1; // b is 1
value = '';
const c = a ?? 'test'; // c is ''
value = NaN;
const d = value ?? 1; // d is NaN

可选链接 (Optional Chaining)

The other new operator of ECMAScript is also providing a shortcut to deal with null and undefined values. Accessing a property on an object turning out to be null or undefined throws an error in JavaScript. To prevent this from happening, when you can’t be sure that your object is defined, you would have to do something like this:

ECMAScript的另一个新的运算符还提供了处理null和undefined值的快捷方式。 访问对象的属性，结果为null或undefined则会在JavaScript中引发错误。 为了防止这种情况的发生，当您不确定是否定义了对象时，就必须执行以下操作：

const a = myObject ? myObject.a : 'a';

With the optional chaining operator ?. you can simplify it to:

使用可选的链接运算符?. 您可以将其简化为：

const b = myObject?.a;

You can combine the chaining operator with a null coalescing one. In the following example, if myObject is defined and has an attribute a that isn’t null or undefined, then b is going to be equal to it. Otherwise b is getting assigned the value 1. What takes two sentences to describe can be written in one line of code:

您可以将链接运算符与空合并的一个合并。 在下面的示例中，如果myObject已定义并且具有不为null或undefined的属性a ，则b将等于它。 否则，将为b分配值1 。 用两句话来描述的内容可以用一行代码编写：

const b = myObject?.a ?? 1;

You don’t have full control over values you receive from the DOM or over the network so dealing with possibly undefined or null values is a common problem in JavaScript. It was leading to pretty heavy and bug prone if statements but they can now can be made more readable and maintainable with the new ECMAScript 2020 operators ?? and ?..

您无法完全控制从DOM或网络接收到的值，因此处理可能undefined或null值是JavaScript中的常见问题。 导致if语句繁重且易于出错if但是现在可以使用新的ECMAScript 2020操作符使它们变得更具可读性和可维护性?? 和?. 。

普通英语JavaScript (JavaScript In Plain English)

Did you know that we have three publications and a YouTube channel? Find links to everything at plainenglish.io!

您知道我们有三个出版物和一个YouTube频道吗？ 在plainenglish.io上找到所有内容的链接！

翻译自: https://medium.com/javascript-in-plain-english/new-operators-in-ecmascript-2020-3dbb886b2fd9

ecmascript