简介
在前端开发中，获取对象属性是日常工作不可或缺的一环。在访问对象属性时，很多情况下我们需要获取对象中的深层级属性。但是，当我们遇到对象中不存在我们所需的属性时，该对象属性就会被 undefined 所代替。这可能会导致代码中的许多错误，甚至影响到整个网站的运行。为了避免这种情况的发生，我们可以使用 ES2020 的 Optional Chaining Operator（可选链操作符）。
Optional Chaining Operator 是什么？
Optional Chaining Operator 是 ES2020 的一个新特性，简写为 ?.。可以让我们轻松地访问深层级对象的属性，而不需要担心对象属性是否存在。
下面是一个使用 Optional Chaining Operator 的示例：
const obj = {
foo: {
bar: {
baz: 'Hello, World!'
}
}
};
const baz = obj?.foo?.bar?.baz; // 'Hello, World!'在这个示例中，我们使用 Optional Chaining Operator 访问了 obj 对象中的深层级属性 foo.bar.baz。即使在 obj 对象中不包含 foo、bar 或 baz 属性，baz 变量仍将被赋值为 undefined。
Optional Chaining Operator 的使用场景
Optional Chaining Operator 的使用场景非常多，以下是其中一些示例：
访问深层级对象的属性
-- -------------------- ---- -------
----- ---- - -
----- -------
-------- -
------ -------------------
-------- -
----- ---- ------
------ -----
---- -----
-
-
--
----- ---- - ----------------------------- -- ---- -----
----- --- - ---------------------------- -- -----
----- ------- - -------------------------------- -- ---------保护函数调用
在调用对象中的函数时，如果该对象为空或值为 undefined，代码将会崩溃。但是，使用 Optional Chaining Operator 可以避免这种情况的发生。
-- -------------------- ---- -------
----- ---- - -
----- -------
-------- -
------ -------------------
-------- -
----- ---- ------
------ -----
---- -----
-
--
-------- ---------- -
------ ----------
-
--
----- ------- - ------------------ -- ------
----- ---------- - ------------------------------ -- ---------避免运行时错误
通过使用 Optional Chaining Operator，我们可以避免因访问不存在的对象属性而导致的运行时错误。
const user = undefined; const city = user?.profile?.address?.city; // undefined，不会触发错误 const zip = user.profile.address.zip; // TypeError：无法在未定义的对象上读取属性 "profile"
总结
Optional Chaining Operator 是 ES2020 的一个新特性，在访问对象属性时非常方便，可以避免代码中的许多问题和错误。使用它不仅可以使你的代码更加简洁和易读，而且可以避免一系列意想不到的问题的出现。在开发中，尽可能使用 Optional Chaining Operator 可以提高代码的可靠性和健壮性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f16f2bf6b2d6eab3b41759