在前端开发中，我们经常需要处理对象的属性和方法，但是在处理过程中，可能会遇到对象属性或方法不存在的情况。在 ES6 中，为了方便开发者处理这种情况，引入了可选链运算符。本文将详细介绍可选链运算符的使用方法以及解决兼容性的方案。
可选链运算符的使用
在 ES6 中，可选链运算符 ?. 的作用就是判断当前对象的属性或方法是否存在，如果存在则返回对应的值，否则返回 undefined。下面是一个示例：
-- -------------------- ---- -------
----- ---- - -
----- ------
---- ---
-------- -
----- -----------
------- -------- -----
-
-
----- ---- - ------------------
----------------- -- -----------
----- ------- - ---------------------
-------------------- -- ------------上面的代码中，我们使用了可选链运算符 ?. 来判断 user 对象中的 address 属性是否存在，如果存在则返回 city 属性的值，否则返回 undefined。同样的，我们也可以使用可选链运算符来判断方法是否存在，例如：
-- -------------------- ---- -------
----- ---- - -
----- ------
--------- ---------- -
------------------- - -- - - ----------
-
-
----------------- -- --------- - -- ---
----- ----- - -
----- -------
-
------------------ -- -------在上面的代码中，我们使用了可选链运算符 ?. 来判断 user 和 admin 对象中的 sayHello 方法是否存在，如果存在则调用该方法，否则什么都不做。
可选链运算符的兼容性
虽然可选链运算符在 ES6 中已经被正式引入，但是它并不是所有浏览器都支持的。目前，只有 Chrome、Firefox、Safari 和 Edge 等最新版本的浏览器才支持可选链运算符。如果你需要在一些较老的浏览器中使用可选链运算符，那么可以使用以下两种解决方案。
使用 Babel 转译器
Babel 是一个 JavaScript 转译器，可以将 ES6 代码转换成 ES5 代码，其中就包括将可选链运算符转换成普通的判断语句。下面是一个使用 Babel 转换可选链运算符的示例：
-- -------------------- ---- -------
----- ---- - -
----- ------
---- ---
-------- -
----- -----------
------- -------- -----
-
-
----- ---- - ------------------
----------------- -- -----------
----- ------- - ---------------------
-------------------- -- ------------
-- -- ----- --------
----- ----- - ------------ --- ---- -- ------------ --- ---- - - ---- - - -----------------
------------------ -- -----------
----- -------- - ------------ --- ---- -- ------------ --- ---- - - ---- - - --------------------
--------------------- -- ------------上面的代码中，我们使用了 Babel 转译器将可选链运算符转换成了普通的判断语句，这样就可以在较老的浏览器中使用了。
使用 Lodash 库
Lodash 是一个 JavaScript 工具库，其中包含了很多实用的函数，包括 get 函数。get 函数可以用来获取对象中的属性值，如果属性不存在，则返回默认值。下面是一个使用 get 函数替代可选链运算符的示例：
-- -------------------- ---- -------
----- ---- - -
----- ------
---- ---
-------- -
----- -----------
------- -------- -----
-
-
----- ---- - ----------- ---------------
----------------- -- -----------
----- ------- - ----------- ------------------
-------------------- -- ------------上面的代码中，我们使用了 get 函数来获取对象中的属性值，如果属性不存在，则返回 undefined。这样就可以替代可选链运算符来处理对象属性不存在的情况了。
总结
在本文中，我们详细介绍了 ES6 中可选链运算符的使用方法以及解决兼容性的方案。可选链运算符可以方便地处理对象属性和方法不存在的情况，但是它并不是所有浏览器都支持的。如果你需要在一些较老的浏览器中使用可选链运算符，那么可以使用 Babel 转译器或者 Lodash 库来解决兼容性问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d705e51886fbafa449dfd3