JavaScript 逻辑运算符与实战案例：从原理到落地

JavaScript 中的逻辑运算符不仅是条件判断的核心，还能通过“短路特性”简化代码；结合 DOM 操作的实战案例，更能体现其灵活性。本文整理了逻辑运算符的个人理解、优先级规则，以及 4 个高频实战需求的实现方案，附个人思路与代码解析。

一、逻辑运算符：个人理解与核心规则

逻辑运算符（&&、||、!）是 JS 中最常用的运算符之一，除了判断真假，其“短路求值”特性更是简化代码的关键。

1. 核心规则：用“个人翻译”讲透逻辑运算

我习惯用“选值逻辑”理解 && 和 ||，不用死记“true/false 组合表”，更贴近实际开发场景：

（1）逻辑与（&&）：“先看第一个，错了就选它，对了就选第二个”
  • 运算原则：A && B
    • 若 A 为“假”（空字符串 ''、0、null、undefined、NaN），直接返回 A（短路，不看 B）；
    • 若 A 为“真”，返回 B（无论 B 真假，都会执行到 B）。
  • 个人翻译：比如 var res = a && b，可以理解为“a 靠谱吗？不靠谱就用 a（代表错的），靠谱就用 b”。
  • 示例：
    console.log('abc' && 'def'); // 输出 'def'（A真，选B）
console.log('' && 'def');    // 输出 ''（A假，选A）
console.log(0 && 123);      // 输出 0（A假，选A）
（2）逻辑或（||）：“先看第一个，对了就选它，错了就选第二个”
  • 运算原则：A || B
    • 若 A 为“真”，直接返回 A（短路，不看 B）；
    • 若 A 为“假”，返回 B（无论 B 真假，都会执行到 B）。
  • 个人翻译：比如 var res = a || b，可以理解为“a 有用吗？有用就用 a，没用就用 b”。
  • 示例：
    console.log('abc' || 'def'); // 输出 'abc'（A真，选A）
console.log('' || 'def');    // 输出 'def'（A假，选B）
console.log(0 || 123);      // 输出 123（A假，选B）
（3）逻辑非（!）：“把真假反过来”
  • 运算原则：!A
    • 先将 A 转为布尔值，再取反（真变假，假变真）。
  • 个人翻译：“a 是对的吗？不是就返回 true，是就返回 false”。
  • 示例：
    console.log(!'abc');  // 输出 false（'abc'是真，取反为假）
console.log(!'');     // 输出 true（''是假，取反为真）
console.log(!0);      // 输出 true（0是假，取反为真）

2. 优先级：“非” > “与” > “或”

三个逻辑运算符的执行顺序：!（逻辑非） > &&（逻辑与） > ||（逻辑或），优先级高的先执行。

  • 示例：
    console.log(!false && true || false); 
// 执行顺序：!false → true，再 true && true → true，最后 true || false → true

3. 关键补充：“假值”的范围

判断 A 是“真”还是“假”，核心看是否属于“假值”，JS 中只有 6 种假值：
''（空字符串）、0、null、undefined、NaN、false，其余均为“真值”（包括 '0'、1、[]、{} 等）。

二、实战案例：4 个高频需求的实现

结合逻辑运算符、DOM 事件绑定、数据类型转换等知识点，实现 4 个面试与开发中常见的需求。

案例 1：两种方式实现注册表单（含验证）

需求

用 type="submit" 和 type="button" 两种按钮，实现注册功能，验证账号/密码长度在 6-30 位之间。

方案 1：type="submit" 按钮（依赖表单 onsubmit 事件）
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>注册表单（submit 按钮）</title>
</head>
<body><!-- 表单 onsubmit 事件：返回 false 阻止提交，true 允许提交 --><form action="success.html" method="get" onsubmit="return checkForm()"><p>账号：<input type="text" id="username" name="username"></p><p>密码：<input type="password" id="pwd" name="pwd"></p><button type="submit">注册（submit）</button></form><script>function checkForm() {const username = document.getElementById('username').value;const pwd = document.getElementById('pwd').value;// 验证账号长度：用 || 判断“小于6”或“大于30”，满足则提示并阻止提交if (username.length < 6 || username.length > 30) {alert('账号长度需在 6-30 位之间');return false; // 阻止表单提交}// 验证密码长度if (pwd.length < 6 || pwd.length > 30) {alert('密码长度需在 6-30 位之间');return false;}// 验证通过，允许提交return true;}</script>
</body>
</html>
方案 2：type="button" 按钮（手动触发表单提交）
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>注册表单（button 按钮）</title>
</head>
<body><form id="regForm" action="success.html" method="get"><p>账号：<input type="text" id="username" name="username"></p><p>密码：<input type="password" id="pwd" name="pwd"></p><button type="button" id="regBtn">注册（button）</button></form><script>const regBtn = document.getElementById('regBtn');const regForm = document.getElementById('regForm');// 给 button 绑定点击事件regBtn.addEventListener('click', function() {const username = document.getElementById('username').value;const pwd = document.getElementById('pwd').value;// 同样的验证逻辑if (username.length < 6 || username.length > 30) {alert('账号长度需在 6-30 位之间');return; // 验证失败，不执行后续代码}if (pwd.length < 6 || pwd.length > 30) {alert('密码长度需在 6-30 位之间');return;}// 验证通过，手动提交表单regForm.submit();});</script>
</body>
</html>

案例 2：两种事件绑定实现交互功能

需求

用 addEventListener 和 onclick 两种绑定方式，实现：

  1. 点击按钮显示/隐藏图片；
  2. 点击按钮显示文本框内容；
  3. 移动鼠标显示坐标。
实现代码
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>事件绑定实战</title><style>#img1 { display: none; } /* 初始隐藏图片 */#coordTip { position: absolute; } /* 坐标提示框跟随鼠标 */</style>
</head>
<body><!-- 功能按钮与元素 --><button id="showImgBtn">显示/隐藏图片</button><button id="showInputBtn">显示文本框内容</button><input type="text" id="infoInput" value="给 UP 主三连~"><img id="img1" src="test.jpg" width="300" alt="测试图片"><!-- 鼠标坐标显示区 --><div id="coordTip"></div><script>window.onload = function() {const img1 = document.getElementById('img1');const infoInput = document.getElementById('infoInput');const coordTip = document.getElementById('coordTip');// 1. addEventListener 绑定：显示/隐藏图片（切换 display 属性）document.getElementById('showImgBtn').addEventListener('click', function() {img1.style.display = img1.style.display === 'block' ? 'none' : 'block';});// 2. onclick 绑定：显示文本框内容document.getElementById('showInputBtn').onclick = function() {alert('文本框内容：' + infoInput.value);};// 3. addEventListener 绑定：移动鼠标显示坐标document.addEventListener('mousemove', function(e) {// e.clientX/Y：鼠标相对于浏览器窗口的坐标const x = e.clientX;const y = e.clientY;// 让提示框跟随鼠标（偏移 30px 避免遮挡）coordTip.innerHTML = `鼠标坐标：X=${x}, Y=${y}`;coordTip.style.left = x + 30 + 'px';coordTip.style.top = y + 'px';});};</script>
</body>
</html>

案例 3：包装 String 并修改 toString 方法

需求
  1. 定义一个字符串值类型变量；
  2. 包装成引用类型（new String()）；
  3. 修改其 toString 方法，使其返回字符串长度。
老师方案（核心：区分值类型与引用类型）
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>修改 String 的 toString 方法</title><script>// 1. 值类型字符串（无法修改 toString 方法）var str = 'testing';// 尝试修改值类型的 toString：无效，因为值类型不可变str.toString = function() {return this.length;};alert(str); // 输出 'testing'（修改失败）// 2. 包装成引用类型（new String()）var strObj = new String(str);// 修改引用类型的 toString 方法：有效strObj.toString = function() {return this.length; // this 指向 strObj，length 是字符串长度};alert(strObj); // 输出 7（'testing' 长度为 7，修改成功）</script>
</head>
<body></body>
</html>
我的方案（简化：直接获取长度并返回）
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>我的 String 包装方案</title>
</head>
<script>// 1. 值类型字符串var str = '诗书画唱';// 2. 包装成引用类型var strObj = new String(str);// 3. 修改 toString：直接返回长度（this.length 即 strObj.length）strObj.toString = function() {return this.length;};// 调用 toString 并打印：'诗书画唱' 长度为 4console.log(strObj.toString()); // 输出 4
</script>
<body></body>
</html>
关键区别
  • 值类型（var str = 'abc'）：无法修改 toString 等原型方法，因为值类型不可变；
  • 引用类型（var strObj = new String('abc')）：是对象，可自定义方法，修改 toString 后，alert 或打印时会自动调用该方法。

案例 4：用逻辑运算符实现“选值逻辑”

需求

创建两个文本输入框，用逻辑或（||）实现：

  • 若输入框 1 有内容，使用输入框 1 的值；
  • 若输入框 1 为空，使用输入框 2 的值。
实现代码（含个人思路注释）
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>逻辑运算符选值</title><script>window.onload = function() {const input1 = document.getElementById('input1');const input2 = document.getElementById('input2');const resultBtn = document.getElementById('resultBtn');// 点击按钮，执行选值逻辑resultBtn.addEventListener('click', function() {// 核心逻辑：input1.value || input2.value// 个人翻译：input1 有值吗？有就用 input1，没有就用 input2const finalVal = input1.value || input2.value;// 打印结果（若两个都为空，finalVal 为空字符串）console.log('最终使用的值：', finalVal);alert('最终使用的值：' + finalVal);});};</script>
</head>
<body><input type="text" id="input1" placeholder="输入框1（优先使用）"><input type="text" id="input2" placeholder="输入框2（备用）"><button id="resultBtn">获取最终值</button>
</body>
</html>
逻辑验证
输入框 1 内容输入框 2 内容最终结果原因
‘abc’‘def’‘abc’input1 为真，选 input1
‘’‘def’‘def’input1 为假，选 input2
‘’‘’‘’两个都为假，选 input2（空字符串）

三、个人学习心得与补充知识点

1. 高效学习建议

  • “翻译”知识点：把复杂概念换成自己的话（比如“逻辑或”翻译成“选第一个有用的”），比死记规则更易理解；
  • 优先手动敲代码：JS 语法不复杂，像逻辑运算符、DOM 选择器这类高频内容，敲多了自然能记住，比复制粘贴高效；
  • 记录“演示过程”：比如录制视频演示表单验证的编写步骤，复盘时能发现“哪里漏了验证条件”，进步更快。

2. 易混淆知识点补充

  • 三元运算符 vs 逻辑运算符：三元运算符（a ? b : c）适合“二选一”的条件赋值，逻辑运算符适合“短路选值”（如 a || b）；
  • == vs ===：== 会自动类型转换（如 0 == '' 为 true），=== 严格比较（不转换类型，0 === '' 为 false），开发中优先用 ===；
  • 元素选择器优先级：一次能找到元素用 getElementById（如 document.getElementById('btn')），多级查找用 querySelector（如 document.querySelector('.box #btn')）。

3. 面试小贴士

  • 遇到有歧义的题目，不用慌：只要逻辑正确，说明自己的理解即可（比如“三元运算符也叫三目运算符”，两种说法都对）；
  • 默写代码时，优先写核心逻辑：比如表单验证，先写“长度判断 + 阻止提交”，再补细节（如获取元素、提示框）。

这些案例和知识点覆盖了 JS 基础的核心场景，建议结合代码反复练习，尤其是逻辑运算符的“短路特性”和 DOM 事件绑定，能帮你在开发中写出更简洁、高效的代码。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/news/918873.shtml
繁体地址，请注明出处：http://hk.pswp.cn/news/918873.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Android RxJava 过滤与条件操作详解

Android RxJava 过滤与条件操作详解

RxJava 是一个基于观察者模式的响应式编程库&#xff0c;在 Android 开发中被广泛使用。其中&#xff0c;过滤和条件操作是 RxJava 中非常重要的一部分&#xff0c;它们允许我们对数据流进行精细控制。本文将详细介绍 RxJava 中常用的过滤与条件操作符及其使用场景。一、过滤操…
阅读更多...
云手机都具有哪些特点？

云手机都具有哪些特点？

云手机拥有着便捷的远程操作功能&#xff0c;让用户无论身处何地&#xff0c;只要能连接网络&#xff0c;就能通过手机、电脑等终端设备远程操控云手机&#xff0c;无需受限于物理位置&#xff0c;大大提升了工作的灵活性与便捷性。云手机主要是依赖于云计算技术&#xff0c;能…
阅读更多...
Sparse-ICP—(4) 加权稀疏迭代最近点算法(matlab版)

Sparse-ICP—(4) 加权稀疏迭代最近点算法(matlab版)

目录 一、算法原理 1、原理概述 2、参考文献 二、代码实现 三、结果展示 一、算法原理 1、原理概述 见：Sparse-ICP—(1)稀疏迭代最近点算法 2、参考文献 二、代码实现 SparseWeightedDistance.m function [move_points,T] =
阅读更多...
统信UOS安装NFS共享文件夹

统信UOS安装NFS共享文件夹

在 UOS ARM 架构系统上安装和配置 NFS 服务&#xff0c;实现与局域网中其他服务器共享文件夹的步骤如下&#xff1a;1. 安装 NFS 服务首先更新系统并安装 NFS 服务器组件&#xff1a;bash# 更新软件包列表 sudo apt update# 安装NFS服务器 sudo apt install nfs-kernel-server …
阅读更多...
【完整源码+数据集+部署教程】孔洞检测系统源码和数据集：改进yolo11-RetBlock

【完整源码+数据集+部署教程】孔洞检测系统源码和数据集：改进yolo11-RetBlock

背景意义 研究背景与意义 随着工业自动化和智能制造的快速发展&#xff0c;孔洞检测作为关键的质量控制环节&#xff0c;受到了广泛关注。孔洞的存在可能会影响产品的强度、密封性和整体性能&#xff0c;因此&#xff0c;准确、快速地检测孔洞对于保障产品质量至关重要。传统的…
阅读更多...
k8s环境使用Operator部署Seaweedfs集群（一）

k8s环境使用Operator部署Seaweedfs集群（一）

#作者&#xff1a;闫乾苓 文章目录4.1 前置条件4.2 部署seaweedfs-operator4.3 准备operator镜像SeaweedFS Operator是一个Kubernetes Operator&#xff0c;用于自动化部署和管理SeaweedFS集群 README.md:6-8 。部署分为两个阶段&#xff1a;首先部署Operator本身&#xff0c;然…
阅读更多...
实践基地落地：成都影像产业园与重庆五一职院强实训

实践基地落地：成都影像产业园与重庆五一职院强实训

近日&#xff0c;成都国际影像产业园与重庆五一职业技术学院合作的实践基地正式落地&#xff0c;这一举措为双方强化实训合作、培养高素质技能人才注入了新的活力。实践基地的落地&#xff0c;是双方基于各自优势资源的深度融合。成都国际影像产业园作为影像行业的重要聚集地&a…
阅读更多...
算法----滑动窗口

算法----滑动窗口

滑动窗口 什么是滑动窗口 滑动窗口是一种常用的技术&#xff0c;主要用于处理连续数据序列&#xff08;如数组、字符串或时间序列数据&#xff09;&#xff0c;通过动态调整一个固定大小的“窗口”来高效地解决问题。窗口在序列上“滑动”&#xff0c;每次移动一个位置&#xf…
阅读更多...
Rust学习笔记（三）｜所有权机制 Ownership

Rust学习笔记（三）｜所有权机制 Ownership

本篇文章包含的内容1 重新从堆和栈开始考虑2 所有权规则3 变量和数据&#xff08;值&#xff09;的交互方式3.1 移动 Move3.2 克隆 Clone3.3 复制 Copy4 函数与所有权4.1 参数传递时的所有权转移4.2 函数返回时的所有权转移5 引用和借用6 切片前面两篇仅仅介绍了一些Rust的语法…
阅读更多...
Redis 知识点与应用场景

Redis 知识点与应用场景

1. Redis 简介与核心特性Redis&#xff08;Remote Dictionary Server&#xff09;是一款开源的内存数据存储系统&#xff0c;支持多种数据结构&#xff0c;兼具高性能、持久化、分布式等特性&#xff0c;广泛用于缓存、数据库、消息中间件等场景。其核心特性包括&#xff1a;高…
阅读更多...
日常反思总结

日常反思总结

1.group by和order by的区别
阅读更多...
易贝 (eBay (eBay) 关键字搜索 API 实战：从认证到商品列表获取全流程解析

易贝 (eBay (eBay) 关键字搜索 API 实战：从认证到商品列表获取全流程解析

在跨境电商开发领域&#xff0c;eBay 作为全球最大的在线交易平台之一&#xff0c;其开放 API 为开发者提供了丰富的商品数据获取能力。本文将聚焦 eBay 关键字搜索商品列表接口的实现&#xff0c;涵盖 OAuth2.0 认证、高级搜索参数配置、分页策略及完整代码实现&#xff0c;帮…
阅读更多...
敏捷数据开发实践：基于 Amazon Q Developer + Remote MCP 构建本地与云端 Amazon Redshift 交互体系

敏捷数据开发实践：基于 Amazon Q Developer + Remote MCP 构建本地与云端 Amazon Redshift 交互体系

敏捷数据开发实践&#xff1a;基于 Amazon Q Developer Remote MCP 构建本地与云端 Amazon Redshift 交互体系 新用户可获得高达 200 美元的服务抵扣金 亚马逊云科技新用户可以免费使用亚马逊云科技免费套餐&#xff08;Amazon Free Tier&#xff09;。注册即可获得 100 美元的…
阅读更多...
【SpringBoot】11 概念理解 - 深入理解 Java 和 Spring 中的容器、组件、类、对象与 Bean

【SpringBoot】11 概念理解 - 深入理解 Java 和 Spring 中的容器、组件、类、对象与 Bean

文章目录引言1. 基本概念解析1.1 类&#xff08;Class&#xff09;1.2 对象&#xff08;Object&#xff09;1.3 组件&#xff08;Component&#xff09;1.4 Bean 实例&#xff08;Bean Instance&#xff09;1.5 容器&#xff08;Container&#xff09;2. 运行时 vs. 非运行时的…
阅读更多...
【学习嵌入式day-25-线程】

【学习嵌入式day-25-线程】

exec函数族exec函数族利用进程空间执行另一份代码#include "../head.h"int main(void) {char *parg[5] {"./hello","how","are","you",NULL,};printf("execl-up\n");//execl("./hello", "./hello…
阅读更多...
Rust 中 Box 的深度解析：作用、原理与最佳实践

Rust 中 Box 的深度解析：作用、原理与最佳实践

Rust 中 Box 的深度解析&#xff1a;作用、原理与最佳实践 Box 是 Rust 中最基础且最重要的智能指针类型&#xff0c;它在 Rust 的内存管理和所有权系统中扮演着核心角色。以下是关于 Box 的全面解析&#xff1a; Box 的核心作用 #mermaid-svg-m6liFZlmqOHRfIZB {font-family:&…
阅读更多...
【测试用例】

【测试用例】

需求背景部分金融/政企等行业客户&#xff0c;企业内部安全要求较高&#xff0c;且因为某些原因未接入 sso 登录&#xff0c;会要求 MG 提供较为复杂的密码规则甚至提供强更机制&#xff1b;且每个客户的安全要求不一样目前 MG 线上密码规则&#xff1a; 8 位以上&#xff0c;包…
阅读更多...
Klipper-probe模块

Klipper-probe模块

配置信息[probe] pin: !PD4 x_offset: 0 y_offset: 0 z_offset: -0.20 #the distance between nozzle and level switch speed: 10 samples: 2 #probe one point three times get an average samples_result: average sample_retract_dist: 5 samples_tolerance: 0.05 # …
阅读更多...
Excel多级数据结构导入导出工具

Excel多级数据结构导入导出工具

Excel多级数据结构导入导出工具 这是一个功能强大的Excel导入导出工具库&#xff0c;专门用于处理复杂的多级嵌套数据结构。通过自定义注解配置&#xff0c;可以轻松实现Java对象与Excel文件之间的双向转换。 核心功能特性 1. 多级数据结构支持 嵌套对象处理: 支持任意层级的对…
阅读更多...
基于UniApp的新大陆物联网平台温湿度检测系统开发方案

基于UniApp的新大陆物联网平台温湿度检测系统开发方案

新大陆物联网平台对接要点 认证方式&#xff1a; 使用AccessToken进行API认证 Token存储在本地缓存中 数据格式&#xff1a; 温度数据单位&#xff1a;摄氏度(C) 湿度数据单位&#xff1a;百分比(%) 时间格式&#xff1a;ISO 8601或时间戳 设备状态&#xff1a; online:…
阅读更多...
最新文章

Copyright @ 2022~2023