- Javascript 基础教程
- Javascript - 首页
- JavaScript - 路线图
- JavaScript - 概述
- JavaScript - 特性
- JavaScript - 启用
- JavaScript - 放置
- JavaScript - 语法
- JavaScript - Hello World
- JavaScript - Console.log()
- JavaScript - 注释
- JavaScript - 变量
- JavaScript - let 语句
- JavaScript - 常量
- JavaScript - 数据类型
- JavaScript - 类型转换
- JavaScript - 严格模式
- JavaScript - 保留关键字
- JavaScript 运算符
- JavaScript - 运算符
- JavaScript - 算术运算符
- JavaScript - 比较运算符
- JavaScript - 逻辑运算符
- JavaScript - 位运算符
- JavaScript - 赋值运算符
- JavaScript - 条件运算符
- JavaScript - typeof 运算符
- JavaScript - 空值合并运算符
- JavaScript - 删除运算符
- JavaScript - 逗号运算符
- JavaScript - 分组运算符
- JavaScript - Yield 运算符
- JavaScript - 展开运算符
- JavaScript - 幂运算符
- JavaScript - 运算符优先级
- JavaScript 控制流
- JavaScript - If...Else
- JavaScript - While 循环
- JavaScript - For 循环
- JavaScript - For...in
- Javascript - For...of
- JavaScript - 循环控制
- JavaScript - Break 语句
- JavaScript - Continue 语句
- JavaScript - Switch Case
- JavaScript - 用户定义迭代器
- JavaScript 函数
- JavaScript - 函数
- JavaScript - 函数表达式
- JavaScript - 函数参数
- JavaScript - 默认参数
- JavaScript - Function() 构造函数
- JavaScript - 函数提升
- JavaScript - 自执行函数
- JavaScript - 箭头函数
- JavaScript - 函数调用
- JavaScript - Function call()
- JavaScript - Function apply()
- JavaScript - Function bind()
- JavaScript - 闭包
- JavaScript - 变量作用域
- JavaScript - 全局变量
- JavaScript - 智能函数参数
- JavaScript 对象
- JavaScript - Number
- JavaScript - Boolean
- JavaScript - Strings
- JavaScript - Arrays
- JavaScript - Date
- JavaScript - DataView
- JavaScript - Handler
- JavaScript - Math
- JavaScript - RegExp
- JavaScript - Symbol
- JavaScript - Sets
- JavaScript - WeakSet
- JavaScript - Maps
- JavaScript - WeakMap
- JavaScript - 可迭代对象
- JavaScript - Reflect
- JavaScript - TypedArray
- JavaScript - 模板字面量
- JavaScript - 标记模板
- 面向对象 JavaScript
- JavaScript - 对象
- JavaScript - 类
- JavaScript - 对象属性
- JavaScript - 对象方法
- JavaScript - 静态方法
- JavaScript - 显示对象
- JavaScript - 对象访问器
- JavaScript - 对象构造函数
- JavaScript - 原生原型
- JavaScript - ES5 对象方法
- JavaScript - 封装
- JavaScript - 继承
- JavaScript - 抽象
- JavaScript - 多态
- JavaScript - 解构赋值
- JavaScript - 对象解构
- JavaScript - 数组解构
- JavaScript - 嵌套解构
- JavaScript - 可选链
- JavaScript - 全局对象
- JavaScript - Mixins
- JavaScript - 代理
- JavaScript 版本
- JavaScript - 历史
- JavaScript - 版本
- JavaScript - ES5
- JavaScript - ES6
- ECMAScript 2016
- ECMAScript 2017
- ECMAScript 2018
- ECMAScript 2019
- ECMAScript 2020
- ECMAScript 2021
- ECMAScript 2022
- JavaScript 异步
- JavaScript - 异步
- JavaScript - 回调函数
- JavaScript - Promise
- JavaScript - Async/Await
- JavaScript - 微任务
- JavaScript - Promise 化
- JavaScript - Promise 链式调用
- JavaScript - 定时事件
- JavaScript - setTimeout()
- JavaScript - setInterval()
- JavaScript Cookies
- JavaScript - Cookies
- JavaScript - Cookie 属性
- JavaScript - 删除 Cookies
- JavaScript 浏览器 BOM
- JavaScript - 浏览器对象模型
- JavaScript - Window 对象
- JavaScript - Document 对象
- JavaScript - Screen 对象
- JavaScript - History 对象
- JavaScript - Navigator 对象
- JavaScript - Location 对象
- JavaScript - Console 对象
- JavaScript Web APIs
- JavaScript - Web API
- JavaScript - History API
- JavaScript - Storage API
- JavaScript - Forms API
- JavaScript - Worker API
- JavaScript - Fetch API
- JavaScript - Geolocation API
- JavaScript 事件
- JavaScript - 事件
- JavaScript - DOM 事件
- JavaScript - addEventListener()
- JavaScript - 鼠标事件
- JavaScript - 键盘事件
- JavaScript - 表单事件
- JavaScript - Window/Document 事件
- JavaScript - 事件委托
- JavaScript - 事件冒泡
- JavaScript - 事件捕获
- JavaScript - 自定义事件
- JavaScript 错误处理
- JavaScript - 错误处理
- JavaScript - try...catch
- JavaScript - 调试
- JavaScript - 自定义错误
- JavaScript - 扩展错误
- JavaScript 重要关键字
- JavaScript - this 关键字
- JavaScript - void 关键字
- JavaScript - new 关键字
- JavaScript - var 关键字
- JavaScript HTML DOM
- JavaScript - HTML DOM
- JavaScript - DOM 方法和属性
- JavaScript - DOM Document
- JavaScript - DOM 元素
- JavaScript - DOM 属性 (Attr)
- JavaScript - DOM 表单
- JavaScript - 修改 HTML
- JavaScript - 修改 CSS
- JavaScript - DOM 动画
- JavaScript - DOM 导航
- JavaScript - DOM 集合
- JavaScript - DOM NodeList
- JavaScript - DOM DOMTokenList
- JavaScript 杂项
- JavaScript - Ajax
- JavaScript - 异步迭代
- JavaScript - Atomics 对象
- JavaScript - Rest 参数
- JavaScript - 页面重定向
- JavaScript - 对话框
- JavaScript - 页面打印
- JavaScript - 验证
- JavaScript - 动画
- JavaScript - 多媒体
- JavaScript - 图像地图
- JavaScript - 浏览器
- JavaScript - JSON
- JavaScript - 多行字符串
- JavaScript - 日期格式
- JavaScript - 获取日期方法
- JavaScript - 设置日期方法
- JavaScript - 模块
- JavaScript - 动态导入
- JavaScript - BigInt
- JavaScript - Blob
- JavaScript - Unicode
- JavaScript - 浅拷贝
- JavaScript - 调用栈
- JavaScript - 引用类型
- JavaScript - IndexedDB
- JavaScript - Clickjacking 攻击
- JavaScript - 柯里化
- JavaScript - 图形
- JavaScript - Canvas
- JavaScript - 防抖
- JavaScript - 性能
- JavaScript - 样式指南
JavaScript - 逻辑运算符
JavaScript 逻辑运算符
JavaScript 中的逻辑运算符通常与布尔操作数一起使用,并返回布尔值。JavaScript 中主要有三种逻辑运算符 - && (AND),|| (OR),和 ! (NOT)。这些运算符用于控制程序的流程。
虽然逻辑运算符通常与布尔值一起使用,但它们可以与任何类型一起使用。对于每个非布尔值,运算符将其转换为布尔值。假值被转换为 false,真值被转换为 true。
JavaScript 中有六个假值:false、null、undefined、0(零)、""(空字符串)、NaN。除假值之外的值都被视为真值。因此,非零数字、非空字符串等都是真值。
&& 和 || 运算符根据条件返回操作数之一的值。因此,如果操作数是非布尔值,则它们返回非布尔值。! 运算符始终返回布尔值。
操作数可以是字面量、变量或表达式。在执行逻辑运算之前,它们首先会被评估为布尔等价物。
在下表中,我们给出了逻辑运算符及其描述和示例。假设:x = true,y = false。
运算符 | 描述 | 示例 |
---|---|---|
&& | 逻辑 AND | (x && y) 为 false。 |
|| | 逻辑 OR | (x || y) 为 true。 |
! | 逻辑 NOT | !(x) 为 false。 |
JavaScript 逻辑 AND (&&) 运算符
逻辑 AND (&&) 运算符从左到右计算操作数。如果第一个操作数可以转换为 false,则它将返回第一个操作数的值,否则它将返回第二个操作数的值。
x && y
在上面的表达式中,如果 x 是假值,则它将返回 x 的值,否则它将返回 y 的值。
上述规则适用于所有类型的操作数,无论它们是布尔值、数字还是字符串等。
让我们首先讨论布尔操作数。一般来说,对于一组布尔操作数,如果两个操作数都为 true,则它将返回 true,否则它将返回 false。
true && true; // returns true true && false;// returns false false && true; // returns false false && false; // returns false
对于数字操作数,&& 运算符将返回第一个操作数,如果它是假值(0、-0 和 0n),否则返回第二个操作数。
0 && 10; // returns 0 10 && 20; // returns 20 20 && 0; // returns 0
对于字符串值,空字符串被转换为 false,非空字符串被转换为 true。请看下面的例子。
let str1 = ''; let str2 = 'Hello'; let str3 = 'World'; console.log(str1 && str2); // returns '' empty string console.log(str2 && str3); // returns World
让我们看看 && 运算符如何处理 null 和 undefined -
null && true // return null undefined && true // returns undefined
对于所有上述示例,您都注意到,如果第一个操作数可以转换为 false,则它返回第一个操作数的值,否则返回第二个操作数的值。
示例
现在让我们看一个逻辑表达式的示例。
<html> <body> <div id="output"></div> <script> const x = 3; const y = -2; document.getElementById("output").innerHTML = x > 0 && y > 2; </script> </body> </html>
这里 x > 0 被评估为 true,而 y > 2 被评估为 false。最终表达式变为 true && false,其结果为 false。
多个 && 运算符
如果在一个表达式中有多个 && 运算符,&& 运算符会从左到右依次计算表达式,并将每个操作数转换为布尔值。如果结果为假,则返回该操作数的值并终止执行。如果所有操作数都为真,则返回最后一个操作数的值。
10 && null && false; // returns null true && 10 && 20; // returns 20
JavaScript 逻辑或 (||) 运算符
逻辑或 (||) 运算符也从左到右依次计算操作数。如果第一个操作数可以转换为真,则返回第一个操作数的值,否则返回第二个操作数的值。
x || y
在上面的表达式中,如果 x 是真值,则返回 x 的值,否则返回 y 的值。
虽然 || 是一个逻辑运算符,但它可以应用于任何类型的操作数,而不仅仅是布尔值。
让我们首先讨论布尔操作数。一般来说,对于一组布尔操作数,如果两个操作数都为 假,则返回假,否则返回 真。
true || true; // returns true true || false; // returns true false || true; // returns true false || false; // returns false
对于数字操作数,|| 运算符如果第一个操作数为真值(非 0、-0 和 0n),则返回第一个操作数,否则返回第二个操作数。
0 || 10; // returns 10 10 || 20; // returns 10 20 || 0; // returns 20
对于字符串值,空字符串被转换为 false,非空字符串被转换为 true。请看下面的例子。
示例
<html> <body> <div id="output"></div> <script> let str1 = ''; let str2 = 'Hello'; let str3 = 'World'; document.getElementById("output").innerHTML = str1 || str2 + "<br>" + str2 || str3; </script> </body> </html>
让我们看看 && 运算符如何处理 null 和 undefined -
null || true; // returns true undefined || true; // returns true
在以上所有示例中,您都注意到,如果第一个操作数可以转换为真,则返回第一个操作数的值,否则返回第二个操作数的值。
示例
现在让我们看一个带有表达式的例子:
<html> <body> <div id="output"></div> <script> const x = 3; const y = -2; document.getElementById("output").innerHTML = x > 0 || y > 2; </script> </body> </html>
多个 || 运算符
在一个表达式中,我们可能有多个 || 运算符。|| 运算符会从左到右依次计算表达式,并将每个操作数转换为布尔值。如果结果为真,则返回该操作数的值并终止执行。如果所有操作数都为假,则返回最后一个操作数的值。
null || 10 || false // returns 10 false || null || undefined // returns undefined
JavaScript 逻辑非 (!) 运算符
逻辑非 (!) 运算符是一个一元运算符。如果操作数可以转换为真,则返回假,否则返回真。
!x
如果 x 为真值,则 NOT (!) 运算符返回假。如果 x 为假值,则返回真。
与逻辑 AND 和 OR 运算符一样,此逻辑 NOT 运算符也可以与非布尔操作数一起使用。但它始终返回一个布尔值。
示例
<html> <body> <div id="output"></div> <script> document.getElementById("output").innerHTML = !true + "<br>" + !false + "<br>" + !0 + "<br>" + !20 + "<br>" + !('Hello World') </script> </body> </html>
逻辑运算符优先级
JavaScript 中的表达式可能包含多个逻辑运算符。在这种情况下,运算符根据其优先级进行计算。NOT (!) 运算符具有最高优先级。然后 AND (&&) 运算符的优先级高于 OR (||) 运算符。
- 逻辑非 (!)
- 逻辑与 (&&)
- 逻辑或 (||)
示例
让我们检查以下示例:
<html> <body> <div id="output"></div> <script> document.getElementById("output").innerHTML = (false || true && !false) // returns true </script> </body> </html>
逻辑非 (!) 运算符具有最高优先级,因此 !false 会计算为 true。因此,表达式现在看起来像 "false || true && true"。&& 的优先级高于 ||,因此接下来 "true && true" 将被计算。现在表达式看起来像 "false || true"。最后 "false || true" 将被计算为 true。
短路求值
逻辑表达式从左到右计算。这些表达式会进行短路求值。以下是短路求值的规则:
- false && any_value 返回 false
- true || any_value 返回 true
any_value 部分不会被计算,因此它对最终结果没有任何影响。