首页 web前端 js教程 Mastering Logical Operators in JavaScript: `||`, `&&`, and `!`

Mastering Logical Operators in JavaScript: `||`, `&&`, and `!`

Sep 19, 2024 pm 04:31 PM

Mastering Logical Operators in JavaScript: `||`, `&&`, and `!`

In this blog, we'll explore the logical operators in JavaScript: || (OR), && (AND), and ! (NOT). These operators are essential for creating complex conditions and controlling the flow of your programs. Let's dive in!

Logical Operator || (OR)

The || operator returns the first truthy value it encounters. If all values are falsy, it returns the last value.

Syntax:

result = value1 || value2 || value3;

登录后复制

Example:

let a = false;
let b = null;
let c = "Hello";

let result = a || b || c;
console.log(result); // Output: "Hello"

登录后复制

Explanation:

  • a is false (falsy).
  • b is null (falsy).
  • c is "Hello" (truthy).

The || operator returns the first truthy value, which is "Hello".

Logical Operator && (AND)

The && operator returns the first falsy value it encounters. If all values are truthy, it returns the last value.

Syntax:

result = value1 && value2 && value3;

登录后复制

Example:

let x = true;
let y = 10;
let z = 0;

let result = x && y && z;
console.log(result); // Output: 0

登录后复制

Explanation:

  • x is true (truthy).
  • y is 10 (truthy).
  • z is 0 (falsy).

The && operator returns the first falsy value, which is 0.

Logical Operator ! (NOT)

The ! operator returns the opposite boolean value of its operand.

Syntax:

result = !value;

登录后复制

Example:

let isTrue = true;
let isFalse = !isTrue;

console.log(isFalse); // Output: false

登录后复制

Explanation:

  • isTrue is true.
  • !isTrue returns false.

Practical Examples

Let's put everything together with some practical examples:

Using || for Default Values

function greet(name) {
  name = name || "Guest";
  console.log("Hello, " + name + "!");
}

greet("Alice"); // Output: Hello, Alice!
greet(); // Output: Hello, Guest!

登录后复制

Explanation:

  • If name is not provided, the || operator assigns the default value "Guest".

Using && for Conditional Execution

let user = {
  name: "John",
  age: 25,
  isAdmin: true
};

if (user.isAdmin && user.age > 18) {
  console.log("Welcome, Admin!");
} else {
  console.log("Welcome, User!");
}

登录后复制

Explanation:

  • The && operator checks if both conditions (user.isAdmin and user.age > 18) are true.

Using ! for Negation

let isLoggedIn = false;

if (!isLoggedIn) {
  console.log("Please log in.");
} else {
  console.log("Welcome back!");
}

登录后复制

Explanation:

  • The ! operator negates the value of isLoggedIn. If isLoggedIn is false!isLoggedIn is true.

Summary

  • || (OR): Returns the first truthy value or the last value if all are falsy.
  • && (AND): Returns the first falsy value or the last value if all are truthy.
  • ! (NOT): Returns the opposite boolean value of its operand.

Conclusion

Logical operators are powerful tools in JavaScript that allow you to create complex conditions and control the flow of your programs. By mastering ||, &&, and !, you'll be able to write more dynamic and efficient code. Keep practicing and exploring to deepen your understanding of logical operators in JavaScript.

Stay tuned for more in-depth blogs on JavaScript! Happy coding!

以上是Mastering Logical Operators in JavaScript: `||`, `&&`, and `!`的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

在JavaScript中替换字符串字符 在JavaScript中替换字符串字符 Mar 11, 2025 am 12:07 AM

在JavaScript中替换字符串字符

自定义Google搜索API设置教程 自定义Google搜索API设置教程 Mar 04, 2025 am 01:06 AM

自定义Google搜索API设置教程

示例颜色json文件 示例颜色json文件 Mar 03, 2025 am 12:35 AM

示例颜色json文件

8令人惊叹的jQuery页面布局插件 8令人惊叹的jQuery页面布局插件 Mar 06, 2025 am 12:48 AM

8令人惊叹的jQuery页面布局插件

10个jQuery语法荧光笔 10个jQuery语法荧光笔 Mar 02, 2025 am 12:32 AM

10个jQuery语法荧光笔

构建您自己的Ajax Web应用程序 构建您自己的Ajax Web应用程序 Mar 09, 2025 am 12:11 AM

构建您自己的Ajax Web应用程序

什么是这个'在JavaScript? 什么是这个'在JavaScript? Mar 04, 2025 am 01:15 AM

什么是这个'在JavaScript?

10 JavaScript和JQuery MVC教程 10 JavaScript和JQuery MVC教程 Mar 02, 2025 am 01:16 AM

10 JavaScript和JQuery MVC教程

See all articles