本文深入探讨了javascript中`typeof null`返回`”object”`这一特性所导致的常见条件判断错误，以及如何避免因访问`null`属性而引发的`typeerror`。文章详细介绍了通过添加显式`null`检查来增强条件逻辑的健壮性，并提供了实际代码示例和现代javascript的解决方案，旨在帮助开发者编写更安全、可靠的代码。
在JavaScript开发中，我们经常需要根据变量的类型和值来执行不同的逻辑。一个常见的场景是，我们期望某个变量是一个对象，然后安全地访问其属性。然而，JavaScript中typeof运算符的一个历史遗留特性——typeof null的结果是”object”——常常会引入隐蔽的错误，导致即使在看似安全的类型检查之后，仍然会因为尝试访问null的属性而抛出TypeError。
理解typeof null的特性
在JavaScript中，null是一个原始值，表示“无值”或“空值”。然而，当你使用typeof运算符检查null时，你会得到一个令人困惑的结果：
console.log(typeof null); // 输出: "object"
这个行为是JavaScript语言设计上的一个历史错误，但由于兼容性原因，它一直保留至今。这意味着，如果你的代码中有一个条件判断，例如if (typeof someVar === “object”)，那么当someVar的值是null时，这个条件也会被满足，从而允许代码块执行，并可能在后续尝试访问someVar的属性时引发TypeError: Cannot read properties of null。
常见的错误场景与TypeError分析
考虑以下代码片段，它尝试在确认loggerInfo是对象后，访问其section属性：
立即学习“Java免费学习笔记（深入）”；
const getOfferingCourses = async () => { if (typeof loggerInfo === "object") { // 这里的条件可能包含 null if (typeof loggerInfo.section) { // 如果 loggerInfo 是 null，这里会报错 // ... 后续逻辑 ... } } }
当loggerInfo变量的值为null时，外部的if (typeof loggerInfo === “object”)条件会评估为true。代码会进入内部的if语句，然后尝试评估typeof loggerInfo.section。此时，由于loggerInfo是null，你不能访问null的任何属性（包括section），因此JavaScript运行时会抛出TypeError: Cannot read properties of null (reading ‘section’)。
错误堆栈通常会指向尝试访问null属性的那一行，例如：
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'section') at getSchedule (s-schedule.js:43:1) // ... 其他堆栈信息 ...
这明确指示了问题出在试图读取null的section属性上。
解决方案：增强条件判断的健壮性
为了避免上述问题，我们需要在条件判断中显式地排除null值。
1. 显式检查null
在检查变量是否为对象时，务必同时检查它是否不为null。
修正第一个if条件：
将原始的：
if (typeof loggerInfo === "object")
修改为：
if (typeof loggerInfo === "object" && loggerInfo !== null)
这样，只有当loggerInfo确实是一个非null的对象时，代码才会进入内部逻辑，从而避免了对null属性的访问。
2. 安全地访问嵌套属性
即使在确认了外部对象非null之后，内部的嵌套属性也可能不存在（即为undefined）。在访问这些属性之前，也应该进行检查。
修正第二个if条件：
原始的条件if (typeof loggerInfo.section)实际上是不完整的，它只会检查typeof loggerInfo.section的结果是否是一个真值（例如，”string”、”number”等）。如果loggerInfo.section是undefined，typeof undefined会返回”undefined”，这是一个字符串，在布尔上下文中会被评估为true。这可能不是你期望的行为。
你可以选择以下两种更明确的方式：
检查属性是否不是undefined：
if (typeof loggerInfo.section !== "undefined")
这种方法确保section属性确实存在。
利用属性的真值性（Truthy）检查：
if (loggerInfo.section)
这种方法更简洁，它会检查loggerInfo.section是否是一个真值（非null、非undefined、非0、非空字符串””、非false）。这通常是处理可选属性的有效方式，但需要注意它会将0、空字符串和false也视为“不存在”或“不满足条件”。根据你的业务逻辑选择最合适的。
整合后的代码示例
将上述修正应用到原始函数中，得到更健壮的代码：
const getOfferingCourses = async () => { // 修正1：确保 loggerInfo 是一个非 null 的对象 if (typeof loggerInfo === "object" && loggerInfo !== null) { // 修正2：确保 loggerInfo.section 存在且不是 undefined // 或者根据业务逻辑使用 if (loggerInfo.section) 进行真值检查 if (typeof loggerInfo.section !== "undefined") { const formdata = new FormData(); formdata.append("getOfferingCourse", loggerInfo.section); try { let dep = await fetch(baseUrl + "enroll.php", { method: "POST", headers: { Accept: "application/json", }, body: formdata, }); let depa = await dep.json(); // 确保 depa 存在且其 status 属性为 "success" if (depa && typeof depa === "object" && depa.status === "success") { setOffeing(depa.data.offering); setOffCourses(depa.data.courses); } } catch (error) { console.error("获取课程数据失败:", error); // 处理 fetch 或 JSON 解析错误 } } } }
注意事项：
在实际开发中，fetch操作最好包裹在try…catch块中，以优雅地处理网络错误或JSON解析错误。对于depa变量，也需要进行类似的检查，以确保它是一个有效的对象，并且可以安全地访问其status和data属性。
现代JavaScript的解决方案：可选链（Optional Chaining）
对于处理可能为null或undefined的嵌套属性访问，现代JavaScript提供了一个更简洁、更优雅的语法：可选链（Optional Chaining ?.）。
使用可选链，你可以这样重写对loggerInfo.section的访问：
const getOfferingCourses = async () => { // 使用可选链简化对 loggerInfo.section 的访问 // 只有当 loggerInfo 存在且非 null，并且 loggerInfo.section 存在且非 null/undefined 时，才会使用其值 const sectionValue = loggerInfo?.section; if (sectionValue) { // 检查 sectionValue 是否为真值 const formdata = new FormData(); formdata.append("getOfferingCourse", sectionValue); try { let dep = await fetch(baseUrl + "enroll.php", { method: "POST", headers: { Accept: "application/json", }, body: formdata, }); let depa = await dep.json(); // 再次使用可选链和逻辑判断 if (depa?.status === "success") { setOffeing(depa.data?.offering); // 也可以对 data 属性使用可选链 setOffCourses(depa.data?.courses); } } catch (error) { console.error("获取课程数据失败:", error); } } }
可选链极大地简化了深层嵌套属性的空值检查，使代码更加清晰和易读。它会在遇到null或undefined时短路，表达式直接返回undefined而不是抛出TypeError。
总结
JavaScript中typeof null === “object”是一个需要特别注意的语言特性。为了编写健壮且无错误的条件逻辑，当使用typeof variable === “object”进行类型检查时，务必同时添加&& variable !== null的显式null检查。此外，对于嵌套属性的访问，应始终进行安全检查，无论是通过typeof property !== “undefined”、真值性检查if (property)，还是利用现代JavaScript提供的可选链?.操作符。采用这些实践将有效避免TypeError: Cannot read properties of null等常见运行时错误，提升代码的稳定性和可靠性。
以上就是JavaScript条件判断中的typeof null陷阱与安全实践的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1540679.html
微信扫一扫 
支付宝扫一扫 
