那天晚上11点我盯着屏幕上一条诡异的报错Cannot read property toString of null。明明前一天还正常的报表导出功能突然崩了而这份数据第二天早上要交给CEO。 你猜怎么着问题出在一个我写过一百次的简单操作Object.keys()处理接口返回的JSON。但这次后端偷偷改了数据结构——某个字段从{}变成了null。1. 表面平静的类型暗礁先看这段看似无害的代码const response { data: null }; // 模拟接口返回 const keys Object.keys(response.data); // 你以为会返回空数组现象当值为null或undefined时Object.keys()直接抛出TypeError而不是返回空数组。但如果是空对象{}它会乖乖返回[]。根因Object.keys()的规范要求参数必须是对象Object类型。当传入null时引擎内部执行ToObject转换失败直接报错。而空对象{}本身已是合法对象。2. 深度解构的连环陷阱你以为加个空值判断就完了再看这个真实案例// 错误写法嵌套解构中的null const { data: { items [] } } await fetchAPI(); items.map(item item.id); // 当data为null时爆炸对比解决方案// 正确写法防御性解构 const { data {} } await fetchAPI(); const { items [] } data; // 即使data为null也不会报错为什么解构赋值的默认值仅在属性为undefined时生效。当父级对象是null时试图访问.items直接触发Cannot read property items of null。3. 隐式转换的魔鬼细节最危险的往往是最简单的比较操作const permission { level: 2 }; // 错误写法松散比较 if (permission.level 2) { grantAdminAccess(); // 这个居然会执行 } // 正确写法严格比较 类型转换 if (Number(permission.level) 2) { // ... }关键数据在Chrome V8引擎中字符串2与数字2的比较需要经历ToNumber(2)转换耗时比多约15%基于百万次循环测试。性能损失虽小但隐患更大。4. JSON.parse的隐蔽陷阱你以为JSON.parse总返回对象试试这个const config JSON.parse(null); // 合法JSON但返回null config.enabled true; // TypeError!避坑要点JSON.parse可以返回null、boolean甚至number总是对解析结果做类型校验typeof config object config ! null5. 避坑清单血泪总结防御性类型判断用Array.isArray()检查数组而非instanceof跨框架会失效用Object.prototype.toString.call()检查纯对象默认值的生效条件解构默认值只在undefined时触发||操作符会对所有假值如0、生效可能误伤强制转换优先显式用String()/Number()代替toString()/parseInt()更安全用Boolean()或!!替代隐式转换特殊值的处理NaN是JavaScript中唯一不等于自身的值typeof null object是语言设计遗留问题凌晨1点当我终于把修复代码部署上线时突然想起那句老话JavaScript不是难在它的复杂而是难在它的简单——简单到你以为不用思考。你在类型转换上踩过最痛的坑是什么评论区聊聊你的血泪史。
