Menu Close

JavaScript 逻辑运算符

JavaScript 逻辑运算符有四个:逻辑 非 运算符 !、逻辑 与 运算符 && 和逻辑 或 运算符 || 和 ??   Nullish Coalescing Operator(空值合并运算符)。??   Nullish Coalescing Operator(空值合并运算符)下一些章节介绍,本节只介绍前三个逻辑运算符

JavaScript 逻辑运算符
JavaScript 逻辑运算符

虽然它们被称为“逻辑”运算符,但可以应用于任何类型的值,不仅限于布尔类型。它们的结果也可以是任何类型。

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

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

JavaScript 提供了三种逻辑运算符

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

逻辑或运算符 ||

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

result = a || b;

在经典编程中,逻辑或运算符仅用于处理布尔值。如果任一参数为 true,则返回 true,否则返回 false

JavaScript 中,这个运算符稍微复杂一些,也更强大。但首先,让我们看看在布尔值下会发生什么。

逻辑组合共有四种可能

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

a b a || b
true true true
true false true
false true true
false false false

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

alert( true || true );   // true
alert( false || true );  // true
alert( true || false );  // true
alert( false || false ); // false

正如我们所见,除了两个操作数都为 false 的情况外,结果总是 true

如果一个操作数不是布尔值,它会在运算时被转换为布尔值。

例如,数字 1 被视为 true,而数字 0 被视为 false

if (1 || 0) { // works just like if( true || false )
  alert( 'truthy!' );
}

大多数情况下,逻辑或 || 用于 if 语句中,用来测试给定的条件中是否有任意一个为 true

例如:

let hour = 9;

if (hour < 10 || hour > 18) {
  alert( 'The office is closed.' );
}

我们可以加入更多的条件:

let hour = 12;
let isWeekend = true;

if (hour < 10 || hour > 18 || isWeekend) {
  alert( 'The office is closed.' ); // it is the weekend
}

逻辑或 || 查找第一个“真值”

上面描述的逻辑属于传统用法。现在,让我们看看 JavaScript 中的“额外”特性。

扩展算法的工作方式如下:

给定多个通过 || 连接的值:

result = value1 || value2 || value3;

逻辑或 || 运算符执行以下操作:

  1. 从左到右依次评估操作数

  2. 对每个操作数进行布尔转换。如果结果为 true,则停止并返回该操作数的原始值。

  3. 如果所有操作数都被评估过(即全部为假值),则返回最后一个操作数

READ  Hello, World! - 你的第一个javascript脚本

返回的是原始值,而不是转换后的布尔值。

换句话说,一串 || 表达式会返回第一个“真值”,如果没有真值,就返回最后一个值。

例如:

alert( 1 || 0 ); // 1 (1 is truthy)

alert( null || 1 ); // 1 (1 is the first truthy value)
alert( null || 0 || 1 ); // 1 (the first truthy value)

alert( undefined || null || 0 ); // 0 (all falsy, returns the last value)

这相比于“纯粹、经典、仅限布尔值的 OR”运算带来了一些有趣的用法:

1. 从一组变量或表达式中获取第一个真值

例如,我们有 firstNamelastNamenickName 这几个变量,都是可选的(也就是说,它们可能是 undefined 或其他假值)。

我们可以使用逻辑或 || 来选择其中有值的一个进行显示(如果都没有,则显示 "Anonymous"):

let firstName = "";
let lastName = "";
let nickName = "SuperCoder";

alert( firstName || lastName || nickName || "Anonymous"); // SuperCoder
如果所有变量都是假值,则会显示 "Anonymous"

2. 短路评估

逻辑或 || 运算符的另一个特性是所谓的“短路”评估。

这意味着,|| 会处理其操作数,直到遇到第一个真值,然后立即返回该值,而不会继续处理其他操作数

当一个操作数不仅仅是一个值,而是一个带有副作用的表达式,比如变量赋值或函数调用时,这个特性变得尤为重要。

在下面的示例中,只有第二条消息会被打印出来:

true || alert("not printed");
false || alert("printed");

在第一行中,逻辑或 || 运算符在看到 true 后立即停止评估,因此 alert 并不会被执行。

有时,人们会利用这个特性,仅在左侧条件为假值时执行某些命令。

逻辑与运算符 &&

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

result = a && b;

在经典编程中,AND 在两个操作数都为真时返回 true,否则返回 false。

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

a b a && b
true true true
true false false
false true false
false false false

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

alert( true && true );   // true
alert( false && true );  // false
alert( true && false );  // false
alert( false && false ); // false

一个带有 if 的示例:

let hour = 12;
let minute = 30;

if (hour == 12 && minute == 30) {
  alert( 'The time is 12:30' );
}

就像 OR 一样,AND 的操作数可以是任意值。

if (1 && 0) { // evaluated as true && false
  alert( "won't work, because the result is falsy" );
}

短路评估 – AND “&&” 会返回第一个为假的值

链式 &&:

result = value1 && value2 && value3;

AND(&&)运算符的执行过程如下:

  • 从左到右依次计算操作数

  • 对每个操作数进行布尔转换。如果结果为假(falsy),则停止计算并返回该操作数的原始值。

  • 如果所有操作数都被计算(即都为真),则返回最后一个操作数

READ  JavaScript break 语句

换句话说,AND 返回第一个为假的值;如果没有找到假值,则返回最后一个值。

上述规则与 OR 类似。不同之处在于,AND 返回第一个假值,而 OR 返回第一个真值。

例如:

// if the first operand is truthy,
// AND returns the second operand:
alert( 1 && 0 ); // 0
alert( 1 && 5 ); // 5

// if the first operand is falsy,
// AND returns it. The second operand is ignored
alert( null && 5 ); // null
alert( 0 && "no matter what" ); // 0

我们也可以依次传入多个值。来看一下如何返回第一个为假的值:

alert( 1 && 2 && null && 3 ); // null

当所有值都为真时,返回最后一个值:

alert( 1 && 2 && 3 ); // 3, the last one

AND(&&)的优先级高于 OR(||)

代码 a && b || c && d 本质上等同于将 && 表达式加上括号后的形式:(a && b) || (c && d)

逻辑非运算符!

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

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

result = !value;

运算符接受一个操作数,并执行以下操作:

  • 操作数转换为布尔类型(true/false)。

  • 返回相反的布尔值。

例如:

alert( !true ); // false
alert( !0 ); // true

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

!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

双重否定 !!

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

alert( !!"non-empty string" ); // true
alert( !!null ); // false

也就是说,第一个 NOT 将值转换为布尔类型并返回其相反值,第二个 NOT 再次将其反转。最终,我们得到的是一个纯粹的值到布尔值的转换。

有一种稍微冗长的方法来实现相同的功能——使用内置的 Boolean 函数:

alert( Boolean("non-empty string") ); // true
alert( Boolean(null) ); // false

NOT(!)的优先级是所有逻辑运算符中最高的,因此它总是最先执行,在 && 或 || 之前。

逻辑运算符优先级

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

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

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

结论

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

 

除教程外,本网站大部分文章来自互联网,如果有内容冒犯到你,请联系我们删除!
Posted in JavaScript 基础

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Leave the field below empty!