文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载导读本篇文章基于 en.javascript.infoModern JavaScript Tutorial入门篇「First Steps / 逻辑运算符」章节中的经典练习题 4-alert-and逐行拆解alert( alert(1) alert(2) )的真实输出过程为什么屏幕上先显示1、紧接着显示undefined而不是1和2。通过本篇文章你将彻底掌握 JavaScript 中AND运算符返回第一个假值的求值规则、alert函数无返回值返回undefined的语义以及短路求值short-circuit evaluation在真实代码中的表现并顺带理解||、的优先级差异。任务回顾这道题到底问什么题目定义于 4-alert-and/task.md原文如下What will this code show?alert( alert(1) alert(2) );这是一个嵌套调用外层alert的参数是一个表达式而该表达式自身的两个操作数又分别是alert(1)和alert(2)两个函数调用。要得到正确答案必须同时理解两件事alert(...)函数的返回值是什么运算符对非布尔操作数的处理规则。标准答案与执行过程官方答案见 4-alert-and/solution.md先输出1然后输出undefined。完整代码为alert( alert(1) alert(2) );整个执行过程可以拆解为如下几步计算左操作数JavaScript 先从左到右求值的第一个操作数alert(1)。弹窗显示1拿到返回值alert函数只负责展示消息没有任何有意义的返回值因此调用alert(1)返回undefined触犯短路规则undefined是假值falsy。的求值规则是查找第一个假值并返回它——既然左操作数已经是假值立即停止求值不再执行右操作数alert(2)外层输出整个表达式的值就是undefined外层alert把它显示出来于是屏幕上第二次弹窗显示文本undefined。关键结论alert(2)从未被执行所以2永远不会显示。这正是短路求值最直观的体现。为什么alert返回undefined函数无返回值的语义alert是浏览器环境提供的全局函数window.alert它仅负责弹出对话框并阻塞等待用户确认函数本身不返回任何值。在 JavaScript 中一个没有return语句或return后不带表达式的函数其返回值一律是undefined。这是解答本题的第一块基石。同样的逻辑也出现在同章节另一道题 2-alert-or/solution.md 中alert( alert(1) || 2 || alert(3) )先输出1再输出2。那里alert(1)返回undefined后||继续向右寻找第一个真值找到2便停止alert(3)同样不会被调用。两道题对照阅读可以清晰看到||与在寻找目标值上的镜像关系运算符求值目标停止条件返回内容\|\|(OR)第一个真值遇到真值即停返回该真值的原始形式(AND)第一个假值遇到假值即停返回该假值的原始形式两者所有值都遍历完未触发停止条件返回最后一个操作数的完整求值规则返回第一个假值11-logical-operators/article.md 中明确给出了的扩展算法。对于一串 AND 表达式result value1 value2 value3;其求值过程是从左到右依次求值每个操作数对每个操作数做布尔转换truthy/falsy如果结果是false即该值是假值立即停止并返回该操作数的原始值不做类型转换如果所有操作数都求值完毕即全部为真值返回最后一个操作数。换句话说AND 返回第一个假值若没有假值返回最后一个值。普通布尔语义只是这一规则的特例——当操作数本身是布尔值时true true返回truefalse true返回false与两者皆真才为真的经典定义一致。为了加深理解article.md 中还有几组基础示例alert( 1 0 ); // 0第一个操作数为真值AND 返回第二个操作数 alert( 1 5 ); // 5 alert( null 5 ); // null第一个操作数是假值直接返回它忽略第二个 alert( 0 no matter what ); // 0 alert( 1 2 null 3 ); // null第一个假值 alert( 1 2 3 ); // 3全部为真值返回最后一个本题alert(1) alert(2)正是第一个操作数是假值直接返回它并忽略第二个操作数这一规则的应用场景只不过操作数是带副作用的函数调用使得忽略的后果2不显示清晰可见。同章节练习题 3-alert-1-null-2/task.md 也从纯值角度验证了同一规则alert( 1 null 2 )输出null因为null是列表中第一个假值见 3-alert-1-null-2/solution.md。短路求值函数调用何时不会发生短路short-circuit是指一旦结果已经确定剩余操作数就不再被求值。这在操作数只是普通值时看不出区别纯值求值无副作用但一旦操作数是变量赋值、函数调用等带副作用的表达式影响立刻显现。article.md 中用||演示了这一特性true || alert(not printed); // 第一行|| 看到 true 立即停止alert 不执行 false || alert(printed); // 第二行|| 继续求值alert 执行本题则是的短路左操作数alert(1)求值后得到假值undefined右操作数alert(2)便永远不会被求值。理解这一点是写出高效、无多余副作用代码的前提——例如用条件 副作用函数()代替if时必须清楚函数只在条件为真时才被调用。article.md 特别提醒虽然可以被当作if的简写如(x 0) alert(Greater than zero!)但官方建议各用其所——需要if语义就用if需要 AND 语义才用因为if的可读性更高。优先级高于||时的求值顺序本题只有单个不涉及优先级问题但作为同章节知识的延伸理解运算符优先级有助于处理更复杂的表达式。article.md 明确指出的优先级高于||因此a b || c d等价于(a b) || (c d)。这道知识在同章节练习题 5-alert-and-or/task.md 中得到验证alert( null || 2 3 || 4 )的输出是3。推导过程见 5-alert-and-or/solution.md为先执行2 3返回3全部真值返回最后一个表达式化简为null || 3 || 4||从左到右寻找第一个真值3胜出。对照本题alert(1) alert(2)两者的本质区别在于找假值、||找真值alert返回的undefined在中直接终止求值而在||中则会被跳过继续向后查找。在浏览器中亲手验证本题源码位于仓库 4-alert-and/你可以打开任一浏览器开发者工具的控制台如 Chrome DevTools Console粘贴并执行alert( alert(1) alert(2) );观察现象第一次弹窗显示1点击确定后第二次弹窗显示undefined全程不出现2。作为对比再执行alert( alert(1) || 2 || alert(3) );会看到第一次弹窗显示1、第二次显示23同样不会出现——这正是 2-alert-or/solution.md 中OR 找第一个真值规则的实机演示。通过两个实验并排观察AND 找假值短路与OR 找真值短路两种机制便一目了然。小结本题背后的三条核心规则alert无返回值它只展示消息调用结果恒为undefined返回第一个假值左操作数alert(1)产生undefined假值求值立即停止右操作数alert(2)被短路跳过短路求值决定副作用被跳过的函数调用不会执行所以2永不显示外层alert最终输出表达式结果undefined。这三条规则贯穿整个 11-logical-operators/article.md 章节也适用于||、!及后续的空值合并运算符??的学习。建议按顺序完成同章节的 2-alert-or、3-alert-1-null-2、5-alert-and-or 练习题用一组对照实验把逻辑运算符的值返回语义内化为直觉。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.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) || 2 || alert(3) ) 的输出顺序JavaScript 短路求值实战拆解 alert alert 1 || 2 || alert 3 的输出顺序 本篇技术指南以 Modern JavaScri文档/教程前端上一篇Crawl4AI 快速上手从零安装到 5 分钟跑通第一个网页爬虫下一篇gh_mirrors/mi/misbrands合规指南企业使用恶搞贴纸的风险规避策略创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考