JavaScript中的逻辑运算的返回值(逻辑与&&,逻辑或||,逻辑非!)

本文详细解释了JavaScript中逻辑与、逻辑或及逻辑非运算符的运作机制与返回值特点,帮助读者理解如何利用这些特性进行高效编程。

在JavaScript中,逻辑与非或经常用在条件判断语句中:

if( a || b ){
//same code.
}

直观的感觉是逻辑或运算会返回一个布尔值:true和false

但常常也会看到这样的条件赋值写法:

var x=a||b;

这会让一些初学JS的朋友感到困惑,这难道是把布尔值赋给了变量x?。


本文试图说明一下这种条件赋值语句的写法原理及其后果。


首先,在JS中,是允许用表达式赋值的。在用表达式赋值时,所赋的值并非表达式本身,而是表达式的运算结果。

        var a= 5;
        var b= 6;
        var c= a+b;
        console.log(c);//结果为11


        var a= 5;
        var b= 6;
        var c= a+b;
        a= 10;
        console.log(c);//结果是11,并非16

        var b= 6;
        var c= a+b;
        console.log(c);//Uncaught ReferenceError: a is not defined<span style="font-family:Arial, Helvetica, sans-serif;">。a未定义。</span>

        var b= 6;
        var c= a+b;
        var a= 5;
        console.log(c);//NaN,a虽然定义了,但在引用时,其并未赋值。


以上几段代码说明。a+b这个表达式并非是在其赋值变量c被引用时才进行计算,而是在其赋值之前先计算,然后将结果赋值给C。但系统会提前收集这些变量,所以在第三段代码中a未定义,但最后一段代码中,a并非未定义。


明白了这个,文首所提到的条件赋值方法即可理解,无论是逻辑与非或,其做为表达式时,都是遵循表达式的规则的。不同的是,其运算的结果。

逻辑与的运算规则,左右两者同为true时,为true;有一者为false时,为false。

但是其返回值并非是返回布尔类型的true和false,而是返回其运算符左右两旁的一个值。

当有一个false时,返回false一侧的值;

当有两个false时,返回运算符之前(左侧)的值;

当有两个true时,返回运算符之后(右侧)的值。

这样既保证了在条件判断语句中,逻辑与的运算规则,又给了一个返回值。逻辑与运算属于短路运算,在按从左向右的运算顺序运算时,如果一个为假,即停止运算,并返回为假的值。

条件判断语句则是对返回值的再一次布尔类型判断。

下面这段代码可以看出其返回值及其位置关系:

        var a={};
        var b=56;
        //window.abcdefg为一个不存在的对象,
        console.log(window.abcdefg && null);   //undefined
        console.log(null && window.abcdefg);   //null
        console.log(a && null);                //null
        console.log(window.abcdefg && a);      //undefined
        console.log(a && b);                   //56
        console.log(b && a);                   //object {}

逻辑或的运算规则,一个为true时为true,一个为false时为false。

其返回值与运算符的关系,正好同逻辑与相反。

当有一个true时,返回true一侧的值;

当有两个true时,返回运算符之前(左侧)的值;

当有两个false时,返回运算符之后(右侧)的值。



逻辑非运算因为只有一个值参与运算,所以比较简单。对运算符右侧的值先转为布尔值,再取反。

然后将结果返回,所以其返回值为布尔值。这一点与逻辑与和逻辑非不同。

有时候在需要一个布尔值时,可以用两次逻辑非运算来获取。


以上内容在《JavaScript高级程序设计》一书中(望远镜封面)有更详细的说明。






<think>我们正在处理用户的问题:前端开发中使用逻辑、非运算符的使用方法和示例。 根据用户的问题,我们需要提供逻辑运算符(&&, ||, !)的使用方法和示例。 注意:用户要求的是前端开发中的使用,因此我们以JavaScript为例。 参考引用: 引用[1]和[3]提到了JavaScript中的逻辑运算符,特别是&&和||的短路求值特性。 引用[2]提到了XPath中的逻辑运算符,但用户问题明确是前端开发,所以我们主要关注JavaScript。 引用[4]是关于Less中的逻辑运算符,用户问题关系不大。 因此,我们将重点放在JavaScript中的逻辑运算符。 回答结构: 1. 简要介绍逻辑运算符在JavaScript中的作用。 2. 分别介绍逻辑(&&)、逻辑(||)、逻辑非(!)的使用方法,包括它们的短路特性。 3. 提供每个运算符的示例代码,并解释其运行机制。 4. 讨论在实际开发中的应用场景(如条件渲染、默认值设置等)。 注意:用户要求使用中文回答,并且按照系统级指令,数学表达式使用$...$,独立公式使用$$...$$(但本问题可能不涉及复杂数学公式,所以可能用不到,但如果有表达式,比如布尔表达式,我们可以用行内数学表达式)。 我们开始编写回答。</think>### JavaScript逻辑运算符的使用方法示例 在前端开发中,逻辑运算符(`&&`、`||`、`!`)是控制程序流程的核心工具,它们通过短路求值特性实现高效的条件判断。以下是详细解析: --- #### 1. 逻辑运算符 `&&` **特性**:当所有表达式为真时返回最后一个真值,遇假立即停止求值(短路特性) **应用场景**:条件渲染、链式条件判断 **示例**: ```javascript // 组件条件渲染 isLoggedIn && user.isVIP && <VIPContent /> // 安全访问嵌套属性 const userName = user && user.profile && user.profile.name; // 执行链式操作 isValid && submitForm() && showSuccess(); ``` *说明*:当 `isLoggedIn` 为假时,React 不会渲染 `VIPContent` 组件[^3]。 --- #### 2. 逻辑运算符 `||` **特性**:返回第一个真值表达式结果,全假时返回最后一个假值 **应用场景**:设置默认值、错误回退 **示例**: ```javascript // 设置默认值 const theme = userTheme || "light"; // API 数据回退 const data = fetchData() || getCachedData() || { status: "empty" }; // 浏览器兼容方案 const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); ``` *说明*:`theme` 优先使用 `userTheme`,若为则回退到 `"light"`[^1]。 --- #### 3. 逻辑非运算符 `!` **特性**:对布尔值取反,常配合 `!!` 转换为布尔类型 **应用场景**:状态切换、显式类型转换 **示例**: ```javascript // 切换布尔状态 let isOpen = false; button.onclick = () => isOpen = !isOpen; // 显式转换为布尔值 const hasItems = !!cart.items.length; // 等价于 Boolean(cart.items.length) // 表单验证 const isValid = !(username === "" || password === ""); ``` --- #### 4. 复合逻辑运算 **优先级规则**:`!` > `&&` > `||`(可通过括号 `()` 调整优先级) **示例**: ```javascript // 权限校验:VIP 管理员且非试用用户 const canEdit = (user.isVIP || user.isAdmin) && !user.isTrial; // 等价于 const canEdit = user.isVIP || (user.isAdmin && !user.isTrial); // 注意优先级差异 ``` --- ### 关键特性总结 | 运算符 | 短路特性 | 返回值规则 | 典型应用场景 | |--------|------------------|-----------------------------|--------------------| | `&&` | 遇假立即停止 | 全真→末值 / 遇假→假值 | 条件渲染、安全访问 | | `||` | 遇真立即停止 | 遇真→真值 / 全假→末值 | 默认值、兼容处理 | | `!` | 无短路(单操作数)| 布尔取反 | 状态切换、类型转换 | > **短路求值本质**: > 对于 `A && B`,若 $A$ 为假则 $B$ 不执行; > 对于 `A || B`,若 $A$ 为真则 $B$ 不执行[^1][^3]。 通过合理运用这些特性,可显著提升代码可读性和执行效率。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值