掌握 JavaScript 中的逻辑运算符:`||`、`&&` 和 `!`
来源:dev.to
2024-11-23 16:06:57
0浏览
收藏
“纵有疾风来,人生不言弃”,这句话送给正在学习文章的朋友们,也希望在阅读本文《掌握 JavaScript 中的逻辑运算符:`||`、`&&` 和 `!`》后,能够真的帮助到大家。我也会在后续的文章中,陆续更新文章相关的技术文章,有好的建议欢迎大家在评论留言,非常感谢!

在本博客中,我们将探讨 javascript 中的逻辑运算符:|| (or)、&& (and) 和 ! (not) )。这些运算符对于创建复杂条件和控制程序流程至关重要。让我们潜入吧!
逻辑运算符 || (或)
|| 运算符返回它遇到的第一个真值。如果所有值都是假的,则返回最后一个值。
语法:
result = value1 || value2 || value3;
示例:
let a = false; let b = null; let c = "hello"; let result = a || b || c; console.log(result); // output: "hello"
说明:
- a 是假 (假)。
- b 为 null (假)。
- c 是“你好” (真实)。
|| 运算符返回第一个真值,即 "hello".
逻辑运算符 && (and)
&& 运算符返回它遇到的第一个假值。如果所有值均为真,则返回最后一个值。
语法:
result = value1 && value2 && value3;
示例:
let x = true; let y = 10; let z = 0; let result = x && y && z; console.log(result); // output: 0
说明:
- x 为 true (真实)。
- y 是 10 (真实)。
- z 是 0 (假)。
&& 运算符返回第一个假值,即 0.
逻辑运算符! (不是)
! 运算符返回其操作数的相反布尔值。
语法:
result = !value;
示例:
let istrue = true; let isfalse = !istrue; console.log(isfalse); // output: false
说明:
- 为真 为真。
- !istrue 返回false。
实际例子
让我们用一些实际例子将所有内容放在一起:
使用|| 对于默认值
function greet(name) {
name = name || "guest";
console.log("hello, " + name + "!");
}
greet("alice"); // output: hello, alice!
greet(); // output: hello, guest!
说明:
- 如果未提供名称,则||运算符会分配默认值“guest”。
使用 && 进行条件执行
let user = {
name: "john",
age: 25,
isadmin: true
};
if (user.isadmin && user.age > 18) {
console.log("welcome, admin!");
} else {
console.log("welcome, user!");
}
说明:
- && 运算符检查两个条件(user.isadmin 和user.age > 18)是否都为真。
使用! 对于否定
let isLoggedIn = false;
if (!isLoggedIn) {
console.log("Please log in.");
} else {
console.log("Welcome back!");
}
说明:
- ! 运算符对 isloggedin 的值取反。如果 isloggedin 为 false,则 !isloggedin 为 true。
总结
- || (or):返回第一个真值或最后一个值(如果所有值均为假值)。
- && (and):返回第一个假值或最后一个值(如果所有值均为真值)。
- ! (not):返回其操作数的相反布尔值。
结论
逻辑运算符是 javascript 中强大的工具,可让您创建复杂的条件并控制程序的流程。通过掌握 ||、&& 和 !,您将能够编写更动态、更高效的代码。不断练习和探索,加深对 javascript 中逻辑运算符的理解。
请继续关注有关 javascript 的更多深入博客!快乐编码!
以上就是本文的全部内容了,是否有顺利帮助你解决问题?若是能给你带来学习上的帮助,请大家多多支持golang学习网!更多关于文章的相关知识,也可关注golang学习网公众号。
版本声明
本文转载于:dev.to 如有侵犯,请联系study_golang@163.com删除
Element-UI Cascader 多选性能优化:如何兼顾数据完整性和渲染效率?
- 上一篇
- Element-UI Cascader 多选性能优化:如何兼顾数据完整性和渲染效率?
- 下一篇
- 如何在电脑上看股市?
查看更多
最新文章
-
- 文章 · 前端 | 5小时前 |
- JavaScript日期格式化方法全解析
- 325浏览 收藏
-
- 文章 · 前端 | 5小时前 |
- HTML5边框定位不占位技巧
- 405浏览 收藏
-
- 文章 · 前端 | 5小时前 |
- CSSLint优化技巧与样式提升方法
- 413浏览 收藏
-
- 文章 · 前端 | 5小时前 |
- CSSSticky定位技巧:滚动与固定结合应用
- 293浏览 收藏
-
- 文章 · 前端 | 5小时前 |
- 统一图标风格,FontAwesome全站应用指南
- 356浏览 收藏
-
- 文章 · 前端 | 5小时前 |
- JavaScript动态加载模块技巧解析
- 119浏览 收藏
-
- 文章 · 前端 | 5小时前 |
- LinuxHelix加速技巧与重构指南
- 182浏览 收藏
-
- 文章 · 前端 | 5小时前 | 顶层await
- 顶层await用法详解与实战技巧
- 288浏览 收藏
-
- 文章 · 前端 | 6小时前 |
- 表单数据保留与自动清理技巧
- 120浏览 收藏
-
- 文章 · 前端 | 6小时前 |
- EventLoop机制解析与执行顺序控制技巧
- 392浏览 收藏
-
- 文章 · 前端 | 6小时前 |
- Tailwind任意值类解决方法详解
- 321浏览 收藏
-
2. CSS 样式使用 ::after 伪元素来在图片上叠加文字:
.im">

