在 ES11 中使用 optional chaining 和 nullish-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中，处理空值和嵌套对象属性的代码通常会很冗长，这也是开发者们一直以来的痛点。而在 ES11 中，新加入了 optional chaining 和 nullish 合并操作符，可以更加简洁优雅地解决这个问题。

Optional Chaining

Optional chaining（可选链）是一个新的运算符，它可以在访问对象属性时避免出现 TypeError 错误。举个例子，我们想要获取一个嵌套对象的属性值，但是这个对象可能不存在或者属性不存在，我们可以这样写：

const value = obj && obj.prop && obj.prop.value;

这种写法很冗长，而且可读性也不是很好。使用 optional chaining，我们可以将上面的代码简化为：

const value = obj?.prop?.value;

这种写法非常简洁，而且代码可读性也更高。当 obj 或者 prop 不存在时，value 将会是 undefined，而不会抛出 TypeError 错误。

Nullish 合并

Nullish 合并（nullish coalescing）是另一个 ES11 中新增的运算符，它可以用于处理 null 或 undefined 值。在 JavaScript 中，有时候我们需要给一个变量赋默认值，通常的写法是：

const value = someVariable || 'default';

但是这种写法有一个问题，当 someVariable 的值为 false 时，它会被认为是 null 或 undefined，这样我们就无法正确地赋值了。例如：

const someVariable = false;
const value = someVariable || 'default'; // value 将会是 'default'，但是我们希望它是 false

使用 Nullish 合并运算符，我们可以解决这个问题：

const value = someVariable ?? 'default';

当 someVariable 的值为 null 或 undefined 时，value 将会是 'default'，而不是 someVariable 的值。

示例代码

下面是一个使用 optional chaining 和 nullish 合并的示例代码：

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

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

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

总结

使用 optional chaining 和 nullish 合并可以让我们更加简洁地处理空值和嵌套对象属性。它们是 ES11 中非常实用的新特性，可以提高我们的开发效率和代码可读性。如果你还没有尝试过，不妨在项目中使用一下，相信你会爱上它们的优雅写法。

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