在本教程中,您将学习如何使用 JavaScript 逻辑运算符,包括逻辑 运算符 !、逻辑 运算符 && 和逻辑 运算符 ||

逻辑运算符在 JavaScript 很重要,因为它们允许您比较变量并根据比较结果执行某些操作。

例如比较的结果是 true,就可以运行一段代码,如果是false,您可以执行另一个代码块。

JavaScript 提供了三种逻辑运算符:

  • !(逻辑非)
  • || (逻辑或)
  • &&(逻辑与)

逻辑非运算符!

JavaScript 使用感叹号 ! 来表示逻辑非运算符。 ! 运算符可以应用于任何类型的值,而不仅仅是布尔值。

当您将 ! 运算符应用于布尔值时,如果值是 true,则 ! 返回 false,反之亦然。例如:

let eligible = false,
    required = true;

console.log(!eligible);
console.log(!required);
true
false

在此示例中,eligibletrue 所以 !eligible 返回 false。而既然 requiredtrue!required 则返回是 false

当您将 ! 运算符应用于非布尔值时。! 运算符首先将值转换为布尔值,然后取反。

以下示例显示了如何使用 ! 运算符:

!a

逻辑 ! 运算符基于以下规则工作:

  • 如果aundefined,结果是 true
  • 如果 anull,结果是 true
  • 如果 a0 以外的数字,则结果为 false
  • 如果 aNaN,结果是 true
  • 如果 a 是对象,则结果为 false。
  • 如果 a 是空字符串,则结果为 true 。如果 a 是非空字符串,则结果为false

下面演示了逻辑 ! 运算符应用于非布尔值时的结果:

console.log(!undefined); // true
console.log(!null); // true
console.log(!20); //false
console.log(!0); //true
console.log(!NaN); //true
console.log(!{}); // false
console.log(!''); //true
console.log(!'OK'); //false
console.log(!false); //true
console.log(!true); //false

双重否定 !!

有时,您可能会在代码中看到双重否定 !!。使用逻辑非运算符! 两次 !! 将值转换为布尔值。

结果与使用 Boolean() 函数相同。例如:

let counter = 10;
console.log(!!counter); // true

第一个 ! 运算符否定变量的布尔值 counter。如果 countertrue,则 ! 运算符将其设为false,反之亦然。

第二个 ! 运算符否定第一个 ! 运算符的结果并返回 counter 变量的布尔值。

逻辑与运算符 &&

JavaScript 使用双符号 && 来表示逻辑与运算符。以下表达式使用 && 运算符:

let result = a && b;

如果 a 可以转换为 true,则 && 运算符返回 b;否则,它返回 a。事实上,这条规则适用于所有的布尔值。

以下真值表说明了 && 运算符应用于两个布尔值时的结果:

aba && b
truetruetrue
truefalsefalse
falsetruefalse
falsefalsefalse

&& 只有当两个值都为 true 时,运算符的结果才为真,否则为 false。例如:

let eligible = false,
    required = true;

console.log(eligible && required); // false

在这个例子中, eligiblefalse,因此,表达式的值 eligible && requiredfalse

请参阅以下示例:

let eligible = true,
    required = true;

console.log(eligible && required); // true

在本例中,eligiblerequired 都 是true,因此表达式的 eligible && required 值为 true

短路评估

&&接线员短路。这意味着 && 运算符仅在第一个值不足以确定表达式的值时才计算第二个值。例如:

let b = true;
let result = b && (1 / 0);
console.log(result);
Infinity

因此,在此示例中,btrue,如果不进一步评估第二个表达式 1/0 ,则运算符无法确定结果。

结果是表达式 1/0Infinity。然而:

let b = false;
let result = b && (1 / 0);
console.log(result);
false

在这种情况下,bfalse&& 运算符不需要计算第二个表达式,因为它可以根据第一个值,将最终结果确定为 false

链式 &&

以下表达式使用多个 && 运算符:

let result = value1 && value2 && value3;

&&  运算符运行过程如下:

  • 从左到右评估值。
  • 对于每个值,将其转换为布尔值。如果结果为 false,则停止并返回原始值。
  • 如果所有值都是 true,则返回最后一个值。

换句话说,&& 运算符返回第一个假值或最后一个值。

如果一个值可以转换为 true,它就是所谓的真值。如果一个值可以转换为 false,它就是所谓的伪值。

逻辑或运算符 ||

JavaScript 使用双管道 || 来表示逻辑或运算符。您可以将 | |运算符应用于任何类型的两个值:

let result = a || b;

如果 a 可以转换为 true,则返回 a;否则,返回 b。此规则也适用于布尔值。

下面表说明了 || 运算符的结果:

aba || b
truetruetrue
truefalsetrue
falsetruetrue
falsefalsefalse

如果两个值的计算结果都为 false ,则 || 运算符返回 false。如果任一值为 true,则运算符 || 返回 true。例如:

let eligible = true,
    required = false;

console.log(eligible || required); // true

看另一个例子:

let eligible = false,
    required = false;

console.log(eligible || required); // false

在此示例中,表达式 eligible || required 返回 false,因为两个值都是 false

短路评估 ||

&& 运算符一样,|| 也会进行短路评估。这意味着如果第一个值的计算结果为true,则 || 运算符不会计算第二个值。

链式 ||

以下示例显示如何在表达式使用多个运算符 ||

let result = value1 || value2 || value3;

|| 运算符执行以下操作:

  • 从左到右评估值。
  • 对于每个值,将其转换为布尔值。如果转换的结果是 true,则停止并返回值。
  • 如果所有值都已评估为 false,则返回最后一个值。

换句话说,|| 运算符链返回第一个真值,如果没有找到真值,则返回最后一个。

逻辑运算符优先级

当您在表达式中混合使用逻辑运算符时,JavaScript 引擎会根据指定的顺序计算运算符。而这个顺序就叫做运算符优先级

换句话说,运算符优先级是表达式中逻辑运算符的求值顺序。逻辑运算符的优先级从高到低依次为:

  1. 逻辑非(!)
  2. 逻辑与 (&&)
  3. 逻辑或 (||)

结论

  • 逻辑非运算符 !  布尔值取反。!! 将变量的值转换为布尔值。
  • 逻辑与运算符 && 应用于两个布尔值,如果两个值都为真,则返回真。
  • 逻辑或运算符 || 应用于两个布尔值,如果其中一个值是 true ,则返回true
  • &&|| 运算符都可以进行短路评估。它们也可以应用于非布尔值。
  • 逻辑运算符的优先级从高到低是 !&&||