自 JavaScript 诞生起，它一直以来都因其灵活性和动态性而备受青睐，一直在不断地发展和演进。在最新的 ECMAScript 2020 （亦即 ES11）规范中，新加入了一些非常实用的特性，其中包括了逻辑赋值运算符和可选链操作符。这两个特性的加入，对于前端开发者，特别是需要常常进行 JavaScript 开发的开发者来说，无疑是极大的福音。
逻辑赋值运算符
逻辑赋值运算符（Logical Assignment Operators）是 ES11 中一种全新的表达式赋值方式，它结合了逻辑操作符和赋值操作符。逻辑赋值运算符有三种形式：&&=、||= 和 ??=，分别对应逻辑与、逻辑或和 null 操作符。
这些逻辑赋值运算符可以用来简化代码，将一些语句写成更紧凑的格式，从而提高代码的可读性和效率。这些表达式的工作方式非常直接，它们会首先计算出左侧表达式的值，然后根据操作符对左侧表达式和右侧表达式分别进行相应的逻辑运算，最后将结果赋值给左侧的变量。
下面是一个使用逻辑赋值运算符的示例代码：
-- -------------------- ---- ------- --- - - --- --- - - --- --- - - --- - --- -------- - --- -------- - --- ---------- --------------- -- ------- ----- --------------- -- ------- --------------- -- ------- -------
在上面的代码中，我们使用了三个不同的逻辑赋值运算符。在第一行中，我们声明了三个变量 a、b 和 c，并且都初始化为空字符串。随后，我们使用或等于运算符 ||= 将字符串 'Hello' 赋值给了变量 a。由于变量 a 的值为空字符串，因此它符合或运算的特性，所以 'Hello' 会被赋值给变量 a。接着，我们使用与等于运算符 &&= 将字符串 'World' 赋值给了变量 b，但是由于变量 b 的值为空字符串，并不符合与运算的特性，因此变量 b 的值不会发生改变。最后，我们使用空值合并运算符 ??= 将默认值 'Default' 赋值给了变量 c，并且由于变量 c 的值为空字符串，因此会正常地将 'Default' 赋值给变量 c。
逻辑赋值运算符与常规的运算符一样，可以与其他操作符一起使用，例如我们可以通过逻辑赋值运算符和条件运算符结合，实现更为灵活的赋值逻辑。
let a = '', b = 0, c = ''; // 如果变量 b 的值大于 0，则将变量 a 的值赋为变量 c 的值，否则将变量 b 的值赋为 10 b > 0 ? a &&= c : b ||= 10; console.log(a); // Output: console.log(b); // Output: 10
在上面的代码中，我们使用逻辑赋值运算符和条件运算符结合，实现了一种更为复杂的赋值逻辑。如果变量 b 的值大于 0，则将变量 a 的值赋为变量 c 的值，否则将变量 b 的值赋为 10。在这里，我们使用了两个逻辑赋值运算符和一个或等于运算符，将变量 a 和变量 b 的值进行操作。在最后，我们通过 console.log 方法打印了变量 a 和变量 b 的值，从结果可以看出，变量 a 的值为初始值，变量 b 的值为 10。
可选链操作符
可选链操作符（Optional Chaining Operator）是 ES11 中用来简化 JavaScript 对象和数组访问过程的一种新特性，可以有效地处理代码中的错误和异常。在 JavaScript 中，当我们访问某个对象或数组的属性时，如果该属性不存在，就会触发一个错误，并导致代码停止工作。而使用可选链操作符，可以在一定程度上避免这种情况的发生，在属性不存在时，直接返回 undefined，避免抛出错误。
可选链操作符的语法比较简单，使用 ?. 连接操作符和属性名，这样，在对象或数组存在这个属性时，可以顺利地访问该属性，而在对象或数组不存在这个属性时，则不会抛出错误，并直接返回 undefined。
下面是一个使用可选链操作符的示例代码：
-- -------------------- ---- -------
----- --- - -
----- ------
---- ---
-------- -
----- ---------
-
--
----- ---- - -------------------
----- ------- - ----------------------
------------------ -- ------- -------
--------------------- -- ------- ---------在上面的代码中，我们使用了可选链操作符，访问了一个名为 obj 的对象的 address 属性的 city 属性。由于该对象存在，并且拥有 address 属性和 city 属性，因此可选链操作符可以很好地访问该属性，并将其赋给变量 city。接着，我们尝试访问一个不存在的属性 country，但是由于该属性并不存在，因此可选链操作符可以直接返回 undefined。
我们可以通过可选链操作符，简化一些访问对象和数组属性的代码，避免代码中出现错误和异常。
-- -------------------- ---- -------
----- --- - -
----- ------
---- ---
-------- -
----- ---------
-
--
----- ---- - ----------------- -- ----------
----- ------- - -------------------- -- ----------
------------------ -- ------- -------
--------------------- -- ------- -------在上面的代码中，我们通过可选链操作符和空值合并运算符，实现了一种更为简洁的访问对象属性的方式。首先，我们访问对象属性 address 的 city 属性，如果该属性存在，则直接返回 city 属性的值，否则返回默认值 'Unknown'。接着，我们尝试访问一个不存在的属性 country，这时可选链操作符会直接返回 undefined，并将其传递给空值合并运算符，最终返回默认值 'Unknown'。
总结
ES11 中的逻辑赋值运算符和可选链操作符，为 JavaScript 开发者提供了更为灵活和高效的代码组合方式。通过逻辑赋值运算符，可以在有效地简化代码的同时，直接赋值变量的值。而通过可选链操作符，则可以避免代码中的错误和异常，保证代码的稳定性和可靠性。在 JavaScript 开发过程中，我们可以根据代码的实际需求，灵活运用这些新特性，提高代码的效率和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6493bdc248841e989415acf7