JavaScript 中的逻辑 AND (&&) 运算符

2025年4月13日 | 阅读 7 分钟

逻辑运算符是 JavaScript 的重要组成部分，JavaScript 是一种强大且灵活的 Web 开发语言。逻辑与(&&)运算符是执行逻辑运算的基本 JavaScript 逻辑运算符之一。

如果数组中的所有布尔操作数都为 true，则逻辑与(&&)运算符也为 true。如果其中一个操作数不满足条件，则结果为 false。

更普遍地说，该运算符在所有操作数都为 true 时返回最后一个操作数的值。在从左到右处理条件时，会检测到第一个 false 或不正确操作数的值。

本文将全面介绍 AND 运算符的语法、应用和实际示例。

JS AND (&&) 运算符是什么？

如果两个操作数（运算符两侧的值）都为 true，则逻辑与(&&)运算符返回 true。如果任一操作数为 false，则结果为 false。

语法

该语法显示了条件和“AND”运算符。

expression1 && expression2

描述

使用逻辑与(&&)运算符从左到右计算操作数时，会立即返回遇到的第一个 false 操作数的值；如果所有值都为 true，则返回最后一个操作数的值。

如果一个值可以转换为 true，则该值被视为 true。如果一个值可以转换为 false，则该值被视为 false。

可以转换为 false 的表达式包括以下示例

false;
null;
NaN;
0;
空字符串 ("" 或 '' 或 ``);
undefined。

JavaScript AND 运算符条件

当运算符满足条件时，我们可以看到布尔值作为输出。下表显示了 && 运算符的可能结果

表达式 1 / 第一个操作数	表达式 2 / 第二个操作数	结果
true	true	true
true	false	false
false	true	false
false	false	false

示例：基本 AND 运算符

以下示例显示了基本 AND 运算符及其布尔格式的运算符。

示例

<!DOCTYPE html>
<html>
<body style="background-color:beige;">
<h2> JavaScript Basic AND Operator </h2>  
<script>  
document.writeln(true && true); // Output: true
document.writeln("<br>"); 
document.writeln(true && false); // Output: false
document.writeln("<br>"); 
document.writeln(false && true); // Output: false
document.writeln("<br>"); 
document.writeln(false && false); // Output: false
</script>  
</body>
</html>

立即执行

输出

输出显示了 && 运算符的结果。

示例：带变量的基本 AND 运算符

以下示例显示了基本 AND 运算符以及用于操作条件的变量。如果两个变量值相等，则输出显示第一个输出。

示例

<!DOCTYPE html>
<html>
<body style="background-color:beige;">
<h2> JavaScript Basic AND Operator with variable </h2>  
<script>  
let X = true;
let Y = true;

if (X && Y) {
    document.writeln("You are allowed to Study JavaScript.");
} else {
    document.writeln("Entry denied to Study JavaScript");
}
</script>  
</body>
</html>

立即执行

输出

输出显示了使用变量的 && 运算符的结果。

示例：带布尔值的基础 AND 运算符

以下示例显示了基本 AND 运算符以及布尔值。

示例

<!DOCTYPE html>
<html>
<body style="background-color:beige;">
<h3> JavaScript AND Operator with the Boolean value </h3>  
<script>  
const a = 3;
const b = -2;
document.writeln(a > 0 && b > 0);
document.writeln("<br>");
document.writeln(a > 0 && b < 0);
document.writeln("<br>");
document.writeln(a > 0 && b < 0);
document.writeln("<br>");
</script>  
</body>
</html>

立即执行

输出

输出显示了与布尔值一起使用的 && 运算符的结果。

JS AND 运算符保留非布尔值

尽管 && 运算符可以应用于非布尔操作数，但其返回结果始终可以转换为布尔原始值，因此它是一个布尔运算符。使用 Boolean 构造函数或双 NOT 运算符将返回值（或任何表达式）显式更改为匹配的布尔值。

示例

以下示例显示了基本 AND 运算符及其非布尔格式的输出。

示例

<!DOCTYPE html>
<html>
<body style="background-color:beige;">
<h3> JavaScript AND Operator with Non-Boolean value </h3>  
<script>  
var result1 = "" && "foo"; // result is assigned "" (empty string)
document.writeln("output: "+result1);
var result2 = 2 &&  0; // result is assigned 0
document.writeln("<br> output: "+result2);
var result3 = "foo" && 4; // result is assigned 4
document.writeln("<br> output: "+result3);
</script>  
</body>
</html> 

立即执行

输出

输出显示了与非布尔值一起使用的 && 运算符的结果。

短路求值

逻辑与语句是短路运算符。由于每个操作数都被转换为布尔值，因此 AND 运算符不会评估任何其他操作数；相反，它会停止并返回在一次转换后被发现为 false 的操作数的原始值。

语法

看看下面的短路求值语法。

描述

由于第一个操作数（某个 false 表达式）被评估为 false，因此 expr 部分永远不会被评估。如果 expr 是一个函数，则函数永远不会被调用。

示例

以下示例显示了基本 AND 运算符及其短路求值条件。

示例

立即执行

输出

输出显示了带有短路求值的 && 运算符的结果。

运算符优先级

AND 运算符的优先级高于 OR 运算符，因此 && 运算符在 || 运算符之前执行。

示例

以下示例显示了基本 AND 运算符及其运算符优先级。

示例

<!DOCTYPE html>
<html>
<body style="background-color:beige;">
<h3> JavaScript AND Operator with Operator precedence </h3>  
<script>  
var a1 =  true || false && false; // true
document.writeln(a1);
document.writeln("<br>");
var a2 = true && (false || false); // false
document.writeln(a2);
document.writeln("<br>");
var a3 = (2 === 3) || (4 < 0) && (1 === 1); // false
document.writeln(a3);
document.writeln("<br>");
</script>  
</body>
</html> 

立即执行

输出

输出显示了带有运算符优先级的 && 运算符的结果。

移除嵌套括号

如果满足某些约束，则始终可以从复杂表达式中删除括号，因为逻辑表达式是从左到右求值的。

示例

以下示例显示了基本 AND 运算符以及移除嵌套括号后的情况。

示例

<!DOCTYPE html>
<html>
<body style="background-color:beige;">
<h3> JavaScript AND Operator with nested parentheses removed</h3>  
<script>  
var a1 =  true || false && false; // true
document.writeln(a1);
document.writeln("<br>");
var a2 = true && (false || false); // false
document.writeln(a2);
document.writeln("<br>");
var a3 = (2 === 3) || (4 < 0) && (1 === 1); // false
document.writeln(a3);
document.writeln("<br>");
</script>  
</body>
</html> 

立即执行

输出

输出显示了移除嵌套括号后的 && 运算符的结果。

JavaScript AND 运算符与三元运算符

JavaScript 包含一个条件运算符，用于根据某些变量及其条件赋值。

语法

以下语法同时显示了三元运算符和 AND 运算符。

示例

以下示例显示了三元运算符与 AND 逻辑运算符

示例

<!DOCTYPE html>
<html>
<body style="background-color:beige;">
<h1>JavaScript Ternary Operator with AND logical Operator</h1>
<h2>The && with Ternary Operator</h2>
<p>Input your age and click the button:</p>
<input id="age" value="18" />
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
  let age = document.getElementById("age").value;
  let voteable = ((age >= 18) && (age <= 50))  ? "Applicable":"Not Applicable";
  document.getElementById("demo").innerHTML = voteable + " to vote.";
}
</script>
</body>
</html>

立即执行

输出

输出显示了与三元运算符的 && 运算符的结果。

AND (&&) 运算符的特性

逻辑求值：只有当两个操作数都为 true 时，它才返回 true。
短路：如果第一个操作数为 false，则不计算第二个操作数。
返回的值而不是仅仅是布尔值：要么是最后一个 true 操作数，要么是第一个 false 操作数。
用于条件语句：通常用于在 **if** 语句中组合多个条件
可与多种数据类型配合使用：数组、对象、字符串、数字等都可以使用。

AND (&&) 运算符的优势

短路提高了效率：如果第一个条件为 false，JavaScript 不计算第二个条件，从而提高了效率。
简化了条件语句：可以使用简洁的条件，而不是多个 **if** 语句。
有利于默认值赋值：当满足条件时，可以在表达式中使用它来赋值。
鼓励非布尔原则：它返回实际值，而不仅仅是 true 或 false，这与严格的逻辑条件不同。

AND (&&) 运算符的缺点

与非布尔值的异常行为
如果不正确处理，它可能会产生意外结果，因为它返回最后一个 true 值或第一个 false 值。
调试复杂表达式很困难
当与多种数据格式和多个条件结合使用时，可能会使调试变得复杂。
初学者不易理解
当它返回非布尔值时，只期望 true 或 false 输出的开发人员可能会感到困惑。
不适用于空值（null 或 undefined）的默认赋值
空值合并运算符 (??) 作为 null 或 undefined 数据的后备，但 && 运算符则不能。

结论

AND (&&) 运算符是 JavaScript 的一个关键组成部分，经常用于条件执行、短路评估和逻辑条件。学生可以通过理解它的工作原理来编写更有效、更少出错的 JavaScript 代码。

下一个主题Maximum Call Stack Size exceeded JavaScript

JavaScript 中的逻辑 AND (&&) 运算符

JS AND (&&) 运算符是什么？

语法

描述

JavaScript AND 运算符条件

示例：基本 AND 运算符

示例

示例：带变量的基本 AND 运算符

示例

示例：带布尔值的基础 AND 运算符

示例

JS AND 运算符保留非布尔值

示例

示例

短路求值

示例

示例

运算符优先级

示例

示例

移除嵌套括号

示例

示例

JavaScript AND 运算符与三元运算符

示例

示例

AND (&&) 运算符的特性

AND (&&) 运算符的优势

AND (&&) 运算符的缺点

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript 中的逻辑 AND (&&) 运算符

JS AND (&&) 运算符是什么？

语法

描述

JavaScript AND 运算符条件

示例：基本 AND 运算符

示例

示例：带变量的基本 AND 运算符

示例

示例：带布尔值的基础 AND 运算符

示例

JS AND 运算符保留非布尔值

示例

示例

短路求值

示例

示例

运算符优先级

示例