JavaScript 中的逻辑运算符误用:为何第二个 if 语句被“忽略”?

发布时间 - 2026-01-28 00:00:00    点击率:

本文解析初学者常见逻辑错误——误用 `||`(或)代替 `&&`(与)导致条件判断失效,并以计算小费为例,说明如何正确表达“介于区间内”的条件逻辑。

在 JavaScript 中,条件判断的准确性高度依赖逻辑运算符的语义理解。你提供的代码本意是:仅当账单金额在 50 到 300(含)之间时,按 15% 计算小费;否则按 20% 计算。但实际逻辑却写成了:

if (bill >= 50 || bill <= 300) { ... }

这个条件永远为真——原因在于逻辑或(||)的短路特性:

  • 任意数字都必然满足 >= 50 或 。
    • 例如 555:555 >= 50 为 true → 整个条件为 true,进入 15% 分支;
    • 再如 10:10
    • 甚至 NaN 或 undefined 在宽松比较下也可能意外触发(虽此处不涉及,但需警惕)。

✅ 正确写法应使用逻辑与(&&),表示“同时满足两个边界条件”:

const calcTip = bill => {
  if (bill >= 50 && bill <= 300) {
    return bill * 0.15;
  } else {
    return bill * 0.20;
  }
};

const bills = [125, 555, 44];
const tips = bills.map(calcTip); // 更简洁:直接映射整个数组
console.log(tips); // [18.75, 111, 8.8] → 555 和 44 均按 

20% 计算 → [18.75, 111, 8.8]

? 关键提醒

立即学习“Java免费学习笔记(深入)”;

  • a >= min && a
  • || 适用于“满足任一条件即可”的场景(如 type === 'cash' || type === 'card');
  • 可借助 console.log(bill, bill >= 50, bill = 50 || bill
  • 进阶建议:添加输入校验(如 typeof bill === 'number' && !isNaN(bill)),提升函数鲁棒性。

掌握 && 与 || 的语义差异,是写出可靠条件逻辑的第一步——看似微小的符号之差,往往决定程序行为是否符合业务预期。


# javascript  # java  # 运算符  # 逻辑运算符  # if  # console  # number  # undefined  # typeof  # 进阶  # 适用于  # 为例  # 并以  # 是否符合  # 之差  # 学习笔记  # 再如  # 如何正确 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 微信小程序 配置文件详细介绍  今日头条AI怎样推荐抢票工具_今日头条AI抢票工具推荐算法与筛选【技巧】  如何在云指建站中生成FTP站点?  如何快速生成ASP一键建站模板并优化安全性?  怎么用AI帮你为初创公司进行市场定位分析?  Laravel Fortify是什么,和Jetstream有什么关系  实现点击下箭头变上箭头来回切换的两种方法【推荐】  Laravel如何自定义分页视图?(Pagination示例)  北京企业网站设计制作公司,北京铁路集团官方网站?  如何在七牛云存储上搭建网站并设置自定义域名?  android nfc常用标签读取总结  nginx修改上传文件大小限制的方法  谷歌Google入口永久地址_Google搜索引擎官网首页永久入口  企业在线网站设计制作流程,想建设一个属于自己的企业网站,该如何去做?  香港服务器部署网站为何提示未备案?  php8.4header发送头信息失败怎么办_php8.4header函数问题解决【解答】  JavaScript数据类型有哪些_如何准确判断一个变量的类型  jQuery中的100个技巧汇总  laravel怎么配置和使用PHP-FPM来优化性能_laravel PHP-FPM配置与性能优化方法  胶州企业网站制作公司,青岛石头网络科技有限公司怎么样?  在线制作视频的网站有哪些,电脑如何制作视频短片?  微信小程序制作网站有哪些,微信小程序需要做网站吗?  PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)  Win11怎么更改系统语言为中文_Windows11安装语言包并设为显示语言  如何在腾讯云免费申请建站?  阿里云高弹*务器配置方案|支持分布式架构与多节点部署  HTML5空格和margin有啥区别_空格与外边距的使用场景【说明】  制作无缝贴图网站有哪些,3dmax无缝贴图怎么调?  新三国志曹操传主线渭水交兵攻略  Win11怎么关闭专注助手 Win11关闭免打扰模式设置【操作】  音乐网站服务器如何优化API响应速度?  作用域操作符会触发自动加载吗_php类自动加载机制与::调用【教程】  佛山网站制作系统,佛山企业变更地址网上办理步骤?  javascript中的数组方法有哪些_如何利用数组方法简化数据处理  laravel怎么通过契约(Contracts)编程_laravel契约(Contracts)编程方法  Laravel怎么使用Markdown渲染文档_Laravel将Markdown内容转HTML页面展示【实战】  ,怎么在广州志愿者网站注册?  EditPlus中的正则表达式实战(5)  Laravel Vite是做什么的_Laravel前端资源打包工具Vite配置与使用  Android GridView 滑动条设置一直显示状态(推荐)  如何在局域网内绑定自建网站域名?  如何在万网主机上快速搭建网站?  Laravel怎么写单元测试_PHPUnit在Laravel项目中的基础测试入门  大连企业网站制作公司,大连2025企业社保缴费网上缴费流程?  Laravel Eloquent性能优化技巧_Laravel N+1查询问题解决  Laravel的Blade指令怎么自定义_创建你自己的Laravel Blade Directives  C#如何调用原生C++ COM对象详解  如何在Tomcat中配置并部署网站项目?  Laravel N+1查询问题如何解决_Eloquent预加载(Eager Loading)优化数据库查询  BootStrap整体框架之基础布局组件