文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载null || 2 3 || 4是《现代 JavaScript 教程》本仓库 1-js/02-first-steps/11-logical-operators中一道经典的混合逻辑运算练习题它同时考察了与||的优先级关系、操作数的真值truthy/falsy转换以及返回第一个真值/假值的短路求值规则。读完本文你将能够独立推演任意混合||、表达式的求值顺序与最终结果并理解这类表达式在默认值兜底、条件执行等实战场景中的行为边界。题目与标准答案题目原文见 5-alert-and-or/task.md要求推导如下代码的输出alert( null || 2 3 || 4 );官方解答见 5-alert-and-or/solution.md给出的答案是3。分步推演为什么结果是 3第一步按优先级分组JavaScript 中与运算的优先级高于或运算||。因此表达式等价于给部分加上括号null || (2 3) || 4部分会先于外层的||链完成计算。第二步计算2 3与运算的求值规则是从左到右计算操作数遇到第一个假值就返回该操作数的初始值短路如果全部为真值则返回最后一个操作数。2是真值3也是真值因此2 3返回最后一个值3注意返回的是操作数的原始形式不做布尔转换。原表达式化简为null || 3 || 4第三步在||链中寻找第一个真值或运算||的求值规则是从左到右计算操作数遇到第一个真值就返回该操作数的初始值短路如果全部为假值则返回最后一个操作数。null是假值继续3是真值立即返回3后面的4不会被计算短路求值。最终alert显示3。支撑该结论的两条核心规则本题的每一步推演都建立在《逻辑运算符》章节11-logical-operators/article.md定义的两条规则之上这里完整展开规则一||返回第一个真值否则返回最后一个值给定result value1 || value2 || value3运算过程为从左到右依次计算操作数每个操作数都先被转换为布尔值参与判断如果结果是true就停止计算返回该操作数的初始值不做布尔转换如果所有操作数都计算完即全部为假值返回最后一个操作数。验证示例alert( 1 || 0 ); // 11 是真值 alert( null || 1 ); // 11 是第一个真值 alert( null || 0 || 1 ); // 1第一个真值 alert( undefined || null || 0 ); // 0都是假值返回最后一个值规则二返回第一个假值否则返回最后一个值与||对称的规则是从左到右依次计算操作数每个操作数先转换为布尔值如果结果是false就停止计算返回该操作数的初始值如果所有操作数都计算完即全部为真值返回最后一个操作数。验证示例alert( 1 0 ); // 0第一个假值 alert( 1 5 ); // 5都是真值返回最后一个 alert( null 5 ); // null第一个假值第二个操作数被忽略 alert( 0 no matter what ); // 0两条规则唯一的区别在于||追求第一个真值追求第一个假值。这正是本题先算、再找真值的思路来源。优先级全貌!||本题还涉及完整的逻辑运算符优先级链条。除了高于||之外非运算符!的优先级在所有逻辑运算符中最高总是最先执行。三者的优先级关系为! 非 最高 与 中 || 或 最低因此代码a b || c d等价于(a b) || (c d)两个子表达式会先于||完成计算与本题的null || 2 3 || 4结构完全同构。注意这里讨论的是||、、!三者间的相对优先级。本文场景不涉及空值合并运算符??按教程安排??在后续章节单独介绍。同主题系列练习从不同角度巩固本节题目所在的目录还收录了多道同主题练习它们分别从纯||链、纯链以及带副作用的 alert 调用三个角度训练同一套求值能力对理解本题很有帮助纯||链null || 2 || undefined题目与解答见 1-alert-null-2-undefined/task.md 与 1-alert-null-2-undefined/solution.mdalert( null || 2 || undefined ); // 2第一个真值纯链alert(1 null 2)题目与解答见 3-alert-1-null-2/task.md 与 3-alert-1-null-2/solution.mdalert(1 null 2); // null第一个假值带函数调用的短路alert(1) || 2 || alert(3)题目与解答见 2-alert-or/task.md 与 2-alert-or/solution.md。这里的关键点是alert调用本身没有有意义的返回值返回undefined是假值所以先计算左操作数alert(1)弹出1返回undefined||继续向右寻找真值遇到2立即短路外层alert显示2alert(3)永远不会被执行。反向验证的短路alert( alert(1) alert(2) )题目与解答见 4-alert-and/task.md 与 4-alert-and/solution.mdalert( alert(1) alert(2) ); // 先显示 1然后显示 undefinedalert(1)返回undefined假值立即短路并返回它因此alert(2)从未执行外层alert收到undefined并显示它。这两道带副作用的练习揭示了短路求值的真正威力未被访问到的操作数包括其中的函数调用、赋值等副作用根本不会执行这正是||、链在实际代码中需要格外谨慎对待的原因。实战价值与使用建议用||做默认值兜底||返回第一个真值的特性常用于从一组可选变量中选出实际有值的那一个let firstName ; let lastName ; let nickName SuperCoder; alert( firstName || lastName || nickName || Anonymous ); // SuperCoder当所有变量均为假值时链尾的兜底值生效。用做条件执行的短路特性有时被用作简化版 iflet x 1; (x 0) alert( Greater than zero! ); // 仅当左侧为真时才执行右侧教程明确建议见 11-logical-operators/article.md 中的 warn 提示虽然这种写法更短但if语义更清晰、可读性更强应按用途选用语法——需要条件判断就用if需要逻辑运算就用不要用取代if。三个易错点小结优先级混合书写时先算再算||必要时显式加括号消除歧义返回原始值||与返回的是操作数的原始形式而非布尔值null || 2 3 || 4的结果是数字3而不是true副作用陷阱短路会使右侧的函数调用、赋值根本不执行在真实项目中应避免依赖这种隐式行为优先使用显式的if与语句块。进一步阅读逻辑运算符的完整讲解||、、!的定义、真值转换与优先级11-logical-operators/article.md本练习的官方解答5-alert-and-or/solution.md同目录系列练习1-alert-null-2-undefined/task.md、2-alert-or/task.md、3-alert-1-null-2/task.md、4-alert-and/task.md赞分享文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载相关推荐JavaScript 逻辑运算符 OR 短路求值实战解析 alert( alert(1) || 2 || alert(3) ) 的输出JavaScript 逻辑运算符 OR 短路求值实战解析 alert alert 1 || 2 || alert 3 的输出 alert alert 1文档/教程前端JavaScript 逻辑运算符实战解析 alert( alert(1) alert(2) ) 的短路求值之谜JavaScript 逻辑运算符实战解析 alert alert 1 alert 2 的短路求值之谜 导读 本文围绕 Modern JavaScrip文档/教程前端深入理解 JavaScript 逻辑与运算从 alert( alert(1) alert(2) ) 看 的短路求值深入理解 JavaScript 逻辑与运算从 alert alert 1 alert 2 看 的短路求值 本指南以现代 JavaScript 教程文档教程前端上一篇Onivim 2 中 Reason/OCaml 语言支持全解析基于原生语言服务器的 reason-vscode 扩展下一篇Minimock与GoUnit结合自动生成表格驱动测试的最佳实践创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考