本文探讨在 JavaScript 中处理可能为 null 的链式属性访问时的常见陷阱。通过引入空对象 {} 或数字 0 作为默认值，可以简化复杂的条件判断逻辑，避免 TypeError。同时对比了使用 YUI 等成熟框架提供的 DOM 工具方法，指出在团队协作中，清晰易懂的代码往往比极致的精简更为重要。
JavaScript 空值链式访问的常见陷阱
首先观察以下代码片段：
if (node.nextSibling.className == ...) {
...
}
当 node 或 node.nextSibling 为 null 时，上述代码会抛出错误。因此，常规的解决方案是编写如下代码：
if ((node) && (next = node.nextSibling) && ... ) {
...
}
然而，随着判断条件的增加，代码结构会变得如下所示：
if (
(node) &&
(node.nextSibling) &&
(node.nextSibling.className == ...)
... ) {
...
}
随着判断条件的不断增加，代码的可读性会显著下降，显得杂乱无章。
使用默认值简化条件判断
这里有一个小技巧可以简化条件判断表达式。我们可以引入一个空对象 {} 或数字 0 作为默认值来替代：
if ( next = (node || 0).nextSibling) ) {
...
}
基于此思路，上述代码可以改写为：
if (((node || 0).nextSibling || 0).className == ...) {
...
}
--Split--
框架实践与代码可读性权衡
从某种角度来看，这种写法确实使代码更加精简。但在实际开发中，尤其是在多人协作的场景下，这种写法可能会给其他开发人员带来理解上的困扰。
正如小马所指出的，如果项目中已经使用了特定的框架，则需要具体问题具体分析。例如，对于上述的条件判断，如果使用 YUI 框架，可以采用以下方式：
YAHOO.util.Dom.hasClass(el, className)
这种方式不仅代码更加精简，而且相比前面的链式访问技巧，更易于理解和维护。