逻辑运算符
比较给了你一个是/否答案。真实场景里常常要同时看几个答案:年龄够不够 并且 分数够不够?是会员 或者 允许访客?把这些答案连起来或反过来的工具,就是 逻辑运算符:&&、|| 和 !。你已经学过 truthy 与 falsy;这里学会读三个日常符号,并信任它们给出的布尔结果。
什么是逻辑运算符?
逻辑运算符处理类似布尔的值。它不会往名字里存东西(=),也不问「值是否相同?」(===)。它把是/否结果 组合 或 取反。true && false 之后结果是 false。true || false 之后是 true。!false 之后是 true。你可以打印这个布尔值、放进变量,或写到页面上。
运算符一览
📊 日常逻辑运算符
| 运算符 | 日常读法 | 典型结果 |
|---|---|---|
&& |
两边都过? | true && true → true |
! |
把是/否反过来 | !false → true |
把这张表放在手边。对初学者,请给这些运算符喂 清楚的布尔值——来自比较(age >= 18)或字面量 true / false。别的值也会算 truthy 或 falsy,但从诚实的是/否开始更少踩坑。
console.log(true && true);
console.log(true && false);
console.log(false && true);
console.log(false && false);
let ok = true;
console.log(ok && true);
&& 需要两边
两个 & 表示「并且」。两边都是 truthy,整个表达式才是 truthy。左边失败时,组合答案已经是否——没有「半个是」。
控制台依次打印 true、false、false、false、true。只有第一行和最后一行两边都过。想像一扇有两把锁的门:两把钥匙都要能开。
console.log(true || true);
console.log(true || false);
console.log(false || true);
console.log(false || false);
let guest = false;
console.log(guest || true);
|| 只要一边
两条竖线表示「或者」。任意一边是 truthy,整个表达式就是 truthy。只有 两边都 失败时才得到 false。
你会看到 true、true、true、false、true。只有第四行彻底失败。一条通路就够——像两把不同钥匙的门,任意一把都能单独打开。
console.log(!true);
console.log(!false);
let ready = false;
console.log(!ready);
let open = true;
console.log(!open);
! 把答案反过来
前面一个 ! 表示「非」。truthy 变 falsy,反过来也一样。想问「还没准备好吗?」又不想重写更长的比较时,!ready 很有用。
控制台打印 false、true、true、false。ready 是 false,所以 !ready 是 true。open 是 true,所以 !open 是 false。
let age = 20;
let score = 75;
console.log(age >= 18 && score >= 60);
console.log(age >= 18 && score >= 90);
let member = false;
let pass = true;
console.log(member || pass);
把多个比较合成一次检查
日常逻辑几乎总是包着 比较结果。age >= 18 && score >= 60 先问两个排序问题,再用「并且」连起来。member || pass 问是否至少有一条路通。问题用 === / >=;把答案拼起来是 && / || 的事。
let age = 20;
let score = 75;
let allowed = age >= 18 && score >= 60;
console.log(allowed);
let member = false;
let guestOk = true;
let enter = member || guestOk;
console.log(enter);
allowed 是 true(两次检查都过)。enter 也是 true,因为访客通路开着,即使 member 是 false。逻辑表达式已经产出布尔值——你只是给它起了名字。
在页面上显示一道门
算出一个组合布尔值,再往页面写一句短标签。
<!DOCTYPE html>
<html>
<head>
<title>Logical — page gate</title>
</head>
<body>
<p id="out">…</p>
<script>
let age = 20;
let score = 75;
let allowed = age >= 18 && score >= 60;
let box = document.getElementById("out");
box.textContent = "allowed=" + allowed;
</script>
</body>
</html>
age 是 20,score 是 75,&& 两边都过,页面显示 allowed=true。把 score 改成 50 再刷新,应看到 allowed=false。后面的课会用 if 分支;这个演示只打印组合后的是/否。
自己试试
- 打印
true && false和true || false。 - 打印
!false和!true。 - 设
let age = 16,打印age >= 18 && age < 65。 - 设
let age = 30,打印同样的区间检查。 - 把
false || true和false && true并排看,体会差别。 - 在 HTML 演示里只改
score,刷新,读新的allowed=文字。
常见错误
- 只写一个
&或|——初学者要的是&&和|| - 本意是
===却写了&&(组合 vs「相同吗?」) - 指望
&&自己比较两个数字——先把每一边包进比较 - 忘记
!会把前面的整个布尔值取反 - 还不会冷静读 truthy/falsy 就塞含糊的值——从清晰的比较结果开始
小结
- 逻辑运算符组合或取反是/否结果
&&要两边;||至少一边;!取反- 日常检查请组合比较结果(
age >= 18 && score >= 60) - 需要名字就保存布尔值;需要标签就写到页面
- 比较符号和逻辑符号分工不同
- 下一课:if-else——用这些布尔值决定运行哪段代码
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己,看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部