ES11 新增了 Optional Chaining 运算符（?.），这是一个非常实用的特性，可以避免在访问嵌套属性时出现 undefined 或 null 的错误。在 Vue2 项目中，我们可以使用 Optional Chaining 来优化代码，提高开发效率。
Optional Chaining 的介绍
Optional Chaining 运算符可以用来简化嵌套属性的访问。在之前的写法中，我们需要判断每个嵌套属性是否存在，如下所示：
-- ------- -- --------------- -- ------------------------------- - -- -- --------- -
而使用 Optional Chaining 运算符，则可以更加简洁地实现同样的功能：
-- ---------------------------------- - -- -- --------- -
这里的问号表示，如果前一个属性不存在或为 null，则它后面的属性也不会被访问。如果前一个属性存在，则继续访问后面的属性。使用 Optional Chaining 运算符可以避免繁琐的判断，让代码更加简洁。
在 Vue2 项目中使用 Optional Chaining
在 Vue2 项目中，我们经常需要访问嵌套的属性，比如：
---- ---------- -- ------------ -- --------------------- ----------------- --------
在这个示例中，我们需要判断 user 和 user.profile 是否存在，以及 profile.name 是否存在。可以使用 Optional Chaining 运算符来简化这段代码：
---- ----------------------------- ----------------- --------
这里的问号表示，如果 user 或者 profile 不存在，则不会访问后面的属性，也不会报错。当 user.profile.name 存在时，则可以在模板中使用。
除了访问属性外，我们还可以使用 Optional Chaining 运算符来调用方法。比如：
----- ------ - ------------------------
如果 object 或 method 不存在，则 result 为 undefined，否则将调用 method，并将 param 作为参数传入。
示例代码
下面给出一个使用 Optional Chaining 运算符的示例代码，在 Vue2 项目中访问嵌套属性：
------ ------- -
--------- -
---------- -
------ ----------------------- -- --- --------------------- -- -----
-
-
-在这个示例中，我们使用 Optional Chaining 运算符来访问 user.firstName 和 user.lastName，如果它们不存在，则将返回空字符串。这里使用了双问号运算符（??）来设置默认值，如果某个属性不存在，则将其替换为空字符串。
结论
Optional Chaining 运算符是一个非常实用的特性，在 Vue2 项目中可以用来优化代码，避免出现 undefined 或 null 的错误。在编写 Vue2 项目时，我们可以善用 Optional Chaining 运算符，让代码更加简洁清晰。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6715e507ad1e889fe219559e