ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

现代 JavaScript 教程:深入解析 `null || 2 3 || 4` —— 逻辑运算符 `` 与 `||` 的优先级与求值规则

现代 JavaScript 教程:深入解析 `null || 2  3 || 4` —— 逻辑运算符 `` 与 `||` 的优先级与求值规则 文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载本篇技术指南围绕现代 JavaScript 教程zh.javascript.info《逻辑运算符》章节中的经典练习题或运算、与运算、或运算串联的结果展开完整推导alert( null || 2 3 || 4 )的求值过程并延伸讲解||或与与两个运算符返回原始操作数的求值语义、高于||的优先级规则以及短路求值short-circuit evaluation行为。读完本文你将能独立、准确地口算出任意由||、串联组成的复杂表达式的结果并能在实际编码中合理运用而非滥用这两个运算符。题目回顾求alert( null || 2 3 || 4 )的输出题目来自 逻辑运算符章节练习要求判断下面这行代码在浏览器中弹出什么内容alert( null || 2 3 || 4 );最终答案弹出3。这行代码看起来有四个操作数、三个运算符似乎并不复杂但它同时触及了逻辑运算符的两条核心规则与||的优先级差异以及它们返回操作数原始值而非布尔值的求值语义。下面逐步推导。第一步优先级高于||先执行2 3在 逻辑运算符教程正文 中有明确的说明与运算的优先级比或运算||要高。所以代码a b || c d跟表达式加了括号完全一样(a b) || (c d)。因此原始表达式等价于加了括号的写法alert( null || (2 3) || 4 );先单独计算2 3。根据的求值规则见后文详述从左到右计算第一个操作数2是真值继续计算第二个操作数3由于所有操作数都是真值返回最后一个操作数即2 3 3代入原式表达式化简为null || 3 || 4第二步||链返回第一个真值现在表达式变成了一个纯粹的或运算链。||的求值规则是从左到右依次计算操作数遇到第一个真值立即停止并返回它的原始值不做布尔转换如果全部都是假值则返回最后一个操作数。对照null || 3 || 4null是假值继续3是真值停止计算返回3。4根本不会被求值这正是短路求值所以最终alert弹出的是3。深入理解||与的完整求值规则要真正掌握这类题目不能只记住答案是 3而要理解背后两条对称的规则。教程正文给出了权威定义或运算||返回第一个真值如果没有真值返回最后一个值。从左到右依次计算操作数每个操作数都会先被转换为布尔值参与判断但如果结果是真值返回的是该操作数的初始形式不做布尔转换全部为假值时返回最后一个操作数。典型示例来自教程正文alert( 1 || 0 ); // 11 是真值 alert( null || 1 ); // 11 是第一个真值 alert( null || 0 || 1 ); // 1第一个真值 alert( undefined || null || 0 ); // 0都是假值返回最后一个值与运算返回第一个假值如果没有假值返回最后一个值。从左到右依次计算操作数遇到假值立即停止并返回该操作数的初始值全部为真值时返回最后一个操作数。典型示例alert( 1 0 ); // 0 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回到本题2 3之所以等于3而不是true正是因为返回的是操作数的原始值——两个操作数均为真值故返回最后一个3。这正是整个题目最容易出错的地方初学者常误以为逻辑运算结果一定是布尔值从而把2 3当成true导致后续推不出正确答案。运算符优先级全景为什么先执行优先级决定了一个表达式含多个运算符时的执行顺序优先级数字越大越先执行优先级相同时按从左到右的顺序执行。在 运算符优先级一节 中教程给出了摘抄自 Mozilla 运算符优先级表的关键片段优先级名称符号.........15一元加号15一元负号-14求幂**13乘号*13除号/12加号12减号-.........2赋值符.........在这张表中的优先级数字大于||在标准 JavaScript 优先级体系中二者分别约为 7 与 6均高于赋值符的 2。可以推断这也是为什么教程正文断言a b || c d完全等价于(a b) || (c d)。这一规则在日常编码中非常常见。例如// 等价于 if ((hour 12) (minute 30)) ... if (hour 12 minute 30) { alert( Time is 12:30 ); }因为比较运算符优先级高于所以这里不需要额外加括号。但为了可读性当表达式较复杂时显式使用圆括号总是更稳妥的选择——圆括号拥有最高优先级可以完全控制计算顺序。同类练习串联用系列题目巩固求值直觉本练习在教程中并非孤立存在它属于 逻辑运算符章节 下的一组递进式练习题。把它们放在一起对比可以一次性建立完整的求值直觉练习 1纯||链1-alert-null-2-undefinedalert( null || 2 || undefined ); // 2第一个真值练习 2||与短路 副作用2-alert-oralert( alert(1) || 2 || alert(3) );输出先是1然后是2。原因alert(1)执行后返回undefined假值||继续向右寻找真值命中2后立即短路alert(3)永远不会执行。这演示了短路求值——||遇到第一个真值就停止右侧所有带副作用的表达式函数调用、赋值等都不会被求值。练习 3纯链3-alert-1-null-2alert(1 null 2); // null第一个假值练习 4与短路 副作用4-alert-andalert( alert(1) alert(2) );输出先是1然后undefined。原因alert(1)返回undefined假值遇到假值立即停止并返回它所以alert(2)不执行外层alert弹出undefined。练习 5本文主题与||混合5-alert-and-oralert( null || 2 3 || 4 ); // 3五道题放在一起规律一目了然||找第一个真值找第一个假值混合时先按优先级把分组再依次短路求值。实战启示何时使用、何时避免合理用途从候选值中选取第一个可用值||返回第一个真值的特性常被用来从一组可选变量中挑选有效值并给出兜底let firstName ; let lastName ; let nickName SuperCoder; alert( firstName || lastName || nickName || Anonymous ); // SuperCoder当所有变量都是假值时结果回落为Anonymous。避免把||、当简化版 if使用教程正文用专门的警告框提醒读者不要用||或来取代if。例如下面两种写法逻辑等价let x 1; (x 0) alert( Greater than zero! ); // 用 模拟 if if (x 0) alert( Greater than zero! ); // 真正的 if虽然写法更短但if语义更明显、可读性更好。正确做法是按用途选择语法想要条件分支就用if想要逻辑与运算就用。记住优先级避免写出歧义表达式高于||、比较运算符高于、赋值符优先级最低——这些规则决定了复杂表达式无需括号也能按预期执行但过度依赖隐式优先级会降低代码可读性。当表达式混合多种运算符时建议用圆括号显式表达意图例如把null || 2 3 || 4写作null || (2 3) || 4让先算与、再算或的意图一目了然。小结alert( null || 2 3 || 4 )输出3其背后是两条必须牢记的 JavaScript 规则优先级的优先级高于||因此先计算2 3返回值语义返回第一个假值无假值则返回最后一个值||返回第一个真值无真值则返回最后一个值二者均返回操作数的原始值而非布尔值并具备短路求值特性。这两条规则连同!非运算符构成了 逻辑运算符教程 的核心知识框架也是后续理解??空值合并运算符、条件判断与各种防御式编码惯用法的基石。建议读者将本章 5 道递进式练习题练习 1、练习 2、练习 3、练习 4、练习 5全部手算一遍即可彻底掌握逻辑运算符的求值直觉。赞分享文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载相关推荐JavaScript 逻辑运算符优先级与短路求值详解 alert( null || 2 3 || 4 ) 的求值过程JavaScript 逻辑运算符优先级与短路求值详解 alert null || 2 3 || 4 的求值过程 null || 2 3 || 4文档教程前端en.javascript.info 逻辑运算符深度剖析从 null || 2 3 || 4 看 OR/AND 求值规则与优先级en.javascript.info 逻辑运算符深度剖析从 null || 2 3 || 4 看 OR/AND 求值规则与优先级 导读 本篇围绕 Mod文档/教程前端JavaScript 逻辑运算符优先级实战null || 2 3 || 4 为什么输出 3JavaScript 逻辑运算符优先级实战 null || 2 3 || 4 为什么输出 3 本篇文章以 1 js/02 first steps/11文档/教程前端创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表