了解 JavaScript 中的逻辑运算符

更新日期: 2023-11-27阅读: 572标签: 运算

当谈到构建健壮且动态的 Web 应用程序时,掌握条件逻辑的艺术至关重要。JavaScript 作为 Web 开发的主要语言之一,提供了一套逻辑运算符,使开发人员能够创建复杂的决策过程。在这份综合指南中,我们将深入研究 JavaScript 中逻辑运算符的世界,探索它们的类型、应用程序以及如何利用它们来使您的代码更加高效和通用。

理解条件逻辑

条件逻辑是编程的基础。它允许开发人员创建根据某些条件做出决策的代码。这些决策可能会导致不同的操作或结果,从而在 Web 应用程序中提供一定程度的交互性和响应能力。

在JavaScript中,条件逻辑主要是通过逻辑运算符来实现的。这些运算符用于组合或比较值以确定表达式的真假。它们是代码中 if 语句、循环和各种决策过程的构建块。

JavaScript 中逻辑运算符的类型

JavaScript 提供了多个逻辑运算符,每个逻辑运算符都有其独特的用途。让我们探索最常用的逻辑运算符并了解它们的应用。

1.逻辑与 ( &&)

逻辑 AND 运算符(用 表示&&)用于计算两个或多个表达式,true如果所有表达式均为 ,则返回true。如果任何表达式为false,则结果为false。

if (userIsLoggedIn && userHasPermission) {
    // Execute code when both conditions are true
}

在此示例中,仅当和均为 时,语句内的代码if才会执行。userIsLoggedInuserHasPermissiontrue

2.逻辑或 ( ||)

逻辑或运算符(由 表示||)用于计算两个或多个表达式,true如果至少其中一个表达式为 ,则返回true。false仅当所有表达式均为 时才返回false。

if (userIsAdmin || userIsModerator) {
    // Execute code if either condition is true
}

if在这种情况下,如果 或userIsAdmin是userIsModerator,则语句内的代码将执行true。

3.逻辑非 ( !)

逻辑 NOT 运算符由 表示!,是一个一元运算符,用于反转表达式的值。如果表达式为true,则应用 NOT 运算符使其成为false,反之亦然。

if (!userIsBanned) {
    // Execute code if user is not banned
}

在这里,语句内的代码if将执行 if userIsBannedis false。

复杂表达式和运算符优先级

逻辑运算符可以组合起来形成复杂的表达式,了解它们的优先级对于避免意外结果至关重要。JavaScript 在计算表达式时遵循特定的顺序:

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

但是,您可以使用括号来控制计算顺序,就像在代数表达式中一样。这是一个例子:

if (userIsAdmin || (userIsModerator && !userIsBanned)) {
    // Execute code based on complex conditions
}

在这种情况下,语句内的代码if将执行 if userIsAdministrue或 if userIsModeratoris trueand userIsBannedis false。

逻辑运算符的实际应用

现在我们已经很好地了解了基本的逻辑运算符,让我们探索它们在实际场景中的应用。

1.用户认证

用户身份验证是逻辑运算符的常见用例。您可以使用它们来验证用户凭据和权限。

if (isUsernameValid && isPasswordValid) {
    // Allow user to log in
}

2.表单验证

在 Web 表单中,逻辑运算符可用于验证用户输入。例如,您可以确保必填字段不为空,并且电子邮件地址遵循特定格式。

if (isNotEmpty(inputValue) && isEmailValid(inputValue)) {
    // Accept the input
}

3.访问控制

逻辑运算符可以方便地控制对网站上某些功能或内容的访问。例如,您可以限制管理员或版主的访问权限。

if (userIsAdmin || userIsModerator) {
    // Grant access to administrative features
}

4.错误处理

在错误处理中,逻辑运算符有助于确定错误的类型和严重性并触发适当的操作。

if (errorIsCritical || errorIsFatal) {
    // Show an error message and take necessary actions
}

短路评估

JavaScript 中逻辑运算符的显着优势之一是短路求值。这意味着一旦知道结果,计算就会停止,而不会不必要地计算剩余的表达式。让我们看看实际效果:

考虑以下代码:

const result = false && someFunction();

在此示例中,someFunction是一个可能耗时或资源密集型的函数。然而,由于短路计算,该函数不会被调用,因为第一个操作数 ( false) 已经保证结果将为false。

相反,使用 OR 运算符:

const result = true || someFunction();

在这种情况下,someFunction不会调用 ,因为第一个操作数 ( true) 保证结果将为true。

短路评估不仅可以提高性能,还可以让您编写更高效的代码,尤其是在处理可能昂贵的操作时。

处理虚假和真实的价值观

在 JavaScript 中,并非所有值都是显式的true或false。许多价值观被认为是“虚假的”或“真实的”。了解逻辑运算符如何处理这些值至关重要。

虚假价值观

以下值在 JavaScript 中被视为“虚假”:

  1. false:布尔值false。
  2. 0:数字零。
  3. ''(空字符串):空字符串。
  4. null:不存在任何值或对象。
  5. undefined:已声明但未赋值的变量。
  6. NaN:代表“非数字”。

当这些值用于逻辑表达式时,它们被视为false。

真实价值观

相反,以下值被视为“真实”:

  1. true:布尔值true。
  2. 除 之外的数字0。
  3. 非空字符串。
  4. 对象、数组和函数。
  5. 特殊对象,如Infinity、-Infinity、 和Date对象。

当这些值用于逻辑表达式时,它们被视为true。

这在实践中是如何运作的:

const x = 0;
const y = 'Hello';

if (x) {
    // This code won't execute because x is falsy
}

if (y) {
    // This code will execute because y is truthy
}

理解假值和真值对于在 JavaScript 中编写有效的条件逻辑至关重要。它允许您根据变量的实际内容而不是

而不是仅仅依靠true或false。

组合逻辑运算符

要创建更复杂的条件,您可以将多个逻辑运算符组合在一个表达式中。通过这样做,您可以在代码中实现复杂的决策过程。

让我们考虑一个组合逻辑 AND 和 OR 运算符的示例:

if ((userIsAdmin || userIsModerator) && !userIsBanned) {
    // Execute code based on complex conditions
}

在此代码中,执行代码的决定取决于两个条件:

  1. 用户是管理员或版主 ( userIsAdmin || userIsModerator)。
  2. 该用户未被禁止 ( !userIsBanned)。

只有当两个条件都满足时,语句中的代码才会if执行。

常见错误和陷阱

虽然逻辑运算符是强大的工具,但如果使用不当,它们可能会导致微妙的错误。以下是一些需要避免的常见错误:

  1. 错误的运算符优先级:组合运算符时始终使用括号来控制计算顺序。如果不这样做可能会导致意想不到的结果。

  2. 过于复杂的条件:避免创建过于复杂的条件。它们会使您的代码难以阅读和理解。如果您的情况跨越多条线,则可能值得将其分解为更小、更易于管理的部分。

  3. 不理解真值和假值:了解 JavaScript 如何将值视为真值或假值。未能掌握这个概念可能会导致代码中出现错误的逻辑。

  4. 混合数据类型:确保逻辑运算符的操作数具有相同的数据类型。混合数据类型可能会导致意外的类型强制。

  5. 忽略短路评估:利用短路评估来发挥您的优势。通过将最有可能失败的操作数放在前面来避免执行不必要的操作。

结论

逻辑运算符是JavaScript开发者工具箱中不可或缺的工具。它们使您能够创建条件逻辑、做出决策并处理 Web 应用程序中的各种场景。无论您是构建用户身份验证系统、验证用户输入、控制对功能的访问还是管理错误条件,逻辑运算符都可以为有效决策提供构建块。

通过掌握逻辑 AND、逻辑 OR 和逻辑 NOT 运算符的用法,并了解它们如何处理真值和假值,您可以编写干净、高效且健壮的代码。必须了解运算符优先级并避免常见陷阱,以确保代码按预期运行。

随着您不断磨练 JavaScript 技能,逻辑运算符将成为第二天性,使您能够创建动态和交互式 Web 应用程序,智能地响应用户输入和不断变化的条件。拥抱逻辑运算符的强大功能,您将释放构建更通用、响应更快的软件的潜力。

英文原文:https://javascript.withcodeexample.com/blog/logical-operators-in-javascript

链接: https://fly63.com/article/detial/12581

js除了Math.floor方法,还可以通过位运算|,>>实现向下取整

我们都知道通过Math.floor()方法可实现数值的向下取整,得到小于或等于该数字的最大整数。除了Math.floor方法,还可以使用位运算|,>>来实现向下取整哦

es6 扩展运算符 三个点(...)

扩展运算符( spread )是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。

巧用JS位运算

位运算的方法在其它语言也是一样的,不局限于JS,所以本文提到的位运算也适用于其它语言。位运算是低级的运算操作,所以速度往往也是最快的

js中使用位运算,让执行效率更高

平常的数值运算,其本质都是先转换成二进制再进行运算的,而位运算是直接进行二进制运算,所以原则上位运算的执行效率是比较高的,由于位运算的博大精深,下面通过一些在js中使用位运算的实例

js各种取整方式及方法_四舍五入、向上取整、向下取整

js实现:四舍五入、向上取整、向下取整等方法。parseInt、Math.ceil、Math.round、Math.floor、toFixed等的使用

JavaScript循环计数器

JS经常会遇到延迟执行的动作,并且失败后自动尝试,尝试N次之后就不再尝试的需求,今天刚好又遇到,于是写个闭包,以后不断完善继续复用。检查并计数第一个参数用来标记是尝试哪个动作的,第二个参数是最大尝试次数

js 位运算符_js按位运算符及其妙用

大多数语言都提供了按位运算符,恰当的使用按位运算符有时候会取得的很好的效果。在我看来按位运算符应该有7个:& 按位与、| 按位或、^ 按位异或、~ 按位非

PHP取整、四舍五入取整、向上取整、向下取整、小数截取

PHP取整数函数常用的四种方法:1.直接取整,舍弃小数,保留整数:intval(); 2.四舍五入取整:round(); 3.向上取整,有小数就加1:ceil(); 4.向下取整:floor()。

JavaScript 中的相等操作符 ( 详解 [] == []、[] == ![]、{} == !{} )

ECMAScript 中的相等操作符由两个等于号 ( == ) 表示,如果两个操作数相等,则返回 true。相等操作符会先转换操作数(通常称为强制转型),然后比较它们的相等性。

关于js开发中保留小数位计算函数(以向上取整或向下取整的方式保留小数)

前端工作中经常遇到数字计算保留小数问题,由于不是四舍五入的方式不能使用toFixed函数,本文采用正则表达式匹配字符串的方式,解决对数字的向上或向下保留小数问题:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!