ES11 之运算符的改变与 Optional Chaining-JavaScript中文网-JavaScript教程资源分享门户

随着 JavaScript 的不断发展，新的 ECMAScript 版本（简称 ES）也不断推出。其中，ES11 在运算符的使用方面进行了改变，并且引入了新的运算符——Optional Chaining。这些变化对于前端开发者来说是非常重要的，因为它们能够帮助开发者更好地编写干净、效率高的代码，并避免了出现一些常见的错误和代码混乱。在本文中，我们将详细讨论 ES11 在运算符方面的改变及 Optional Chaining 的使用方法和优势。

运算符的改变

空位合并运算符

ES11 引入了一个新的空位合并运算符：“??=”。这个运算符可以将左操作数的值与右操作数的值进行合并，并将结果赋值给左操作数。如果左操作数为 null 或 undefined，则结果为右操作数。

let a = null;
let b = 1;
a ??= b;
console.log(a); // 输出 1

逻辑赋值运算符

ES11 新增了一些逻辑赋值运算符，包括以下三个：

&&=：与号运算符，表示如果左操作数为真，则执行右操作数，并将结果赋值给左操作数；
||=：或号运算符，表示如果左操作数为假，则执行右操作数，并将结果赋值给左操作数；
??=：空位合并运算符，表示如果左操作数为 null 或 undefined，则执行右操作数，并将结果赋值给左操作数。

-- -------------------- ---- -------
--- - - --
--- - - -----
- --- --
--------------- -- -- -

- --- --
--------------- -- -- -

--- --
- --- --
--------------- -- -- -展开代码

Optional Chaining

在编写 JavaScript 代码时，经常会遇到需要检查对象或数组的属性或元素是否存在的情况。如果直接使用点号或方括号语法来访问这些不存在的属性或元素，就有可能导致程序出现错误或异常。因此，ES11 引入了 Optional Chaining 这个运算符，可以方便地避免这种问题。

使用 Optional Chaining

Optional Chaining 运算符（?.）表示访问一个可能为空值的属性或元素。如果属性或元素不存在，则返回 undefined，不会抛出任何异常。

-- -------------------- ---- -------
----- ---- - -
  ----- -------
  ---- ---
  -------- -
    ----- -----------
    ----- ------
  --
--

------------------------ -- -- ------
--------------------------------- -- ---------
------------------------------------- -- ---------展开代码

上述代码中，如果 user 对象中的 books 属性不存在，则会返回 undefined。如果 address 属性存在，但其中没有 province 属性，则也会返回 undefined。

Optional Chaining 与 nullish 合并运算符

有时候需要获取某个属性的值，但不确定该属性是否存在，同时也需要给该属性设置一个默认值。此时可以使用 Optional Chaining 与 nullish 合并运算符（??）结合使用。

const user = {
  name: 'Lucy',
  age: 20,
};

const city = user?.address?.city ?? '未知'; // 如果属性不存在，则返回 '未知'
console.log(city); // 输出 '未知'

Optional Chaining 与函数调用

使用 Optional Chaining 运算符还可以调用一个可能为空值的函数。如果该函数不存在，则返回 undefined，不会抛出任何异常。

const obj = {
  a: {
    b: () => 'Hello, world!',
  },
};

console.log(obj?.b?.()); // undefined
console.log(obj?.a?.b?.()); // 输出 'Hello, world!'

ES10 中检查 null 或 undefined 的方法

在 ES10 之前，要检查某个变量是否为 null 或 undefined，需要使用 “&&” 操作符或三目运算符。

const city = user && user.address && user.address.city ? user.address.city : '未知';

使用 Optional Chaining 运算符可以简化这个过程，让代码更加简洁、易读。

结语

ES11 中运算符的变化和 Optional Chaining 的新增可以使前端开发者更加方便地编写代码，并且降低了出现错误的风险。使用这些新的特性可以使代码变得更简洁、易读、可维护。建议开发者在开发过程中多加使用这些特性，从而提升自己的开发效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67bc6561a231b2b7eddf9ae9

ES11 之运算符的改变与 Optional Chaining