当编写 JavaScript 代码时,我们经常会遇到一些对象不存在或者未定义的问题。这些问题可能是由于我们没有正确地检查变量是否为 null 或 undefined 导致的。虽然 JavaScript 是一门动态类型语言,但是这种错误在开发中仍然很常见,如果不加以处理,可能会导致代码崩溃或者安全漏洞。
问题示例
假设我们有一个函数 getUser
,它从服务器获取用户信息并返回用户对象。现在我们要在页面上显示用户的名称和头像:
-------- --------------- - -- ---------- ------ - --- ------- ----- -------- ------- -------------------------------- -- - ----- ---- - ------------- ----------------------- -- -- ------- ------------------------- -- -- -------------------------------- -- ------ ----- ----------- - -------------------------------- ----------------------- - ---------- ----- ------------- - ---------------------------------- ----------------- - ------------
此时一切顺利,用户的名称和头像都显示出来了。但是如果 getUser
函数返回的是 null 或者 undefined,那么就会出现问题:
-------- --------------- - -- ---------- ------ ----- -- -- ---- - ----- ---- - ------------- ----------------------- -- -- --------- -- ------------------------- -- -- --------- -- -- ------ ----- ----------- - -------------------------------- ----------------------- - ---------- -- -- --------- -- ----- ------------- - ---------------------------------- ----------------- - ------------ -- -- --------- --
这时控制台会输出 TypeError: Cannot read property 'name' (or 'avatar') of null
,导致页面无法正常工作。
解决方案
为了避免这种错误,我们需要在访问对象属性之前先检查该对象是否为 null 或 undefined。有几种方法可以实现:
1. 使用逻辑与运算符
逻辑与运算符 && 在 JavaScript 中的行为是先计算左侧的表达式,如果结果为 falsy,则返回该值;否则计算右侧表达式并返回它。因此,我们可以使用逻辑与运算符来简单地检查对象是否存在。
例如,我们可以将上面的代码改成如下形式:
-------- --------------- - -- ---------- ------ ----- -- -- ---- - ----- ---- - ------------- ---------------- -- ----------- -- -- --------- ---------------- -- ------------- -- -- --------- -- ------ ----- ----------- - -------------------------------- ----------------------- - ---- -- ---------- -- -------------- ----- ------------- - ---------------------------------- ----------------- - ---- -- ------------ -- --------------
这样我们可以避免抛出 TypeError 错误,但是页面上不会显示任何内容。
2. 使用短路语法
短路语法是一种更加简洁的检查对象存在的方法。它利用了 JavaScript 中逻辑运算符的特性,在左侧表达式为真时直接返回左侧表达式的值,否则返回右侧表达式的值。
例如,我们可以将上面的代码改成如下形式:
-------- --------------- - -- ---------- ------ ----- -- -- ---- - ----- ---- - ------------- ------------------------ -- -- --------- -------------------------- -- -- --------- -- ------ ----- ----------- - -------------------------------- ----------------------- - ----------- -- -------------- ----- ------------- - ---------------------------------- ----------------- - ------ - ----------------------------------------------------------- -------- ---------------------------------------------------------------------------------------