深入理解JS中逻辑或（||）和逻辑与（&&）

sanyang 发布于2019-08-23 14:24 / 2567人阅读

摘要：如果第一项的值为时，则执行后面一项的运算，返回的是第二项执行运算后的值再来看多一个例子，自己多动手尝试看看就明白了。

先来看一个关于逻辑或的例子：

var b = 0
var a = b++ || b++
console.log(b)      // 2
var c = ++b || ++b
console.log(a)      // 1
console.log(c)      // 3
console.log(b)      // 3

关于 ++b和b++的区别，后++的运算等级没有赋值运算符（=）高， 这里不再作过多的解释，

首先从全局来看，关于的b的运算总共执行了4次，每次都自身+1，那么按道理来说，如果这些运算都执行了，b的最后的值正常来说应该是4，那为什么最后的结果是3呢？

关于逻辑或(||) 我自己总结如下：

①、首先如果第一项的值不是Boolean值的话，会转为Boolean类型的，在数值上，0和-0在转为Boolean时为false，其余为true，在其他值上诸如null，undefined，NaN，空string类型等会转为false，可以自己尝试一下

console.log(Boolean(NaN))                 // false
console.log(Boolean(null))                // false
console.log(Boolean(undefined))           // false
console.log(Boolean(""))                  // false
console.log(Boolean(" 0"))                // true

②、如果第一项的值为true时，则后面一项则不执行，返回的是第一项执行运算后的值
网上看到的是说如果第一项为true，返回的也是true，这是不对的说法。

③、如果第一项的值为false时，则执行后面一项的运算，返回的是第二项执行运算后的值 
再来看多一个例子，自己多动手尝试看看就明白了。

var b = 0
var a = (typeof b++) || b++
console.log(b)               //1        
var c = ++b || ++b
console.log(a)               // number   
console.log(c)               // 2        
console.log(b)               // 2

-------------------------- 来个分割线 ----------------------------------
看一个关于逻辑与的例子

var b = 0
var a = (typeof b++) && b++ 
console.log(b)                // 2
var c = ++b && ++b
console.log(a)                // 1
console.log(c)                // 4
console.log(b)                // 4

关于逻辑与(&&) 我自己总结如下：

①、逻辑与和逻辑或一样，都需要把前后两项进行Boolean转换再比较
②、如果第一项的值为true时，则执行后面一项的运算，返回的是第二项执行运算后的值
③、如果第一项的值为false时，则后面一项则不执行，返回的是第一项执行运算后的值

专线服务云服务器 asp &amp&amp逻辑 java逻辑和或运算 js数据和逻辑分离 js中 &ampamp

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100549.html

ahooks useRequest源码深入解读

　　大家会发现，自从 React v16.8 推出了 Hooks API，前端框架圈并开启了新的逻辑复用的时代，从此无需在意 HOC 的无限套娃导致性能差的问题，同时也解决了 mixin 的可阅读性差的问题。这里也有对于 React 最大的变化是函数式组件可以有自己的状态，扁平化的逻辑组织方式，更加友好地支持 TS 类型声明。　　在运用Hooks的时候，除了 React 官方提供的，同时也支持我们...

3403771864 2022-11-06 17:32 评论0 收藏0
JS中逻辑运算符 &amp;&amp; 的理解

摘要：然而，和运算符会返回一个指定操作数的值，因此，这些运算符也用于非布尔值。例如返回值为返回值为返回值为除此之外的值，都会让判断继续执行，直到最后一个值。 JS中逻辑运算符 && 的理解从一个场景开始我们试想这样一个场景，有这样一个对象，其数据结构为： const obj = { a: { b: { c: i am c ...

caiyongji 2019-08-26 10:11 评论0 收藏0
深入理解Flex布局 -- flex-grow &amp; flex-shrink &amp; fl

摘要：我希望实现一个左中右三列的布局，其中左右部分固定宽度，中间部分自适应实现起来很简单，代码如下到此为止一切都很美好。解决方法是给加上此时的完整代码如下宽度为的内容完整的在这里实战经验到此结束，下面我们再深入学习涉及到的知识点。欢迎关注我的公众号睿Talk，获取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言最近在项目...

sydMobile 2019-08-30 15:55 评论0 收藏0
ES2018 学习笔记（2）&amp;&amp; 和 || 的运算优先级

摘要：为什么比优先级高起因偶然在网上搜索运算符优先级，几乎每个版本都告诉读者比优先级更高，包括这样的权威网站也不例外。这与自己经验不符它们应该是优先级一样的。为什么 && 比 || 优先级高？起因偶然在网上搜索 js 运算符优先级，几乎每个版本都告诉读者 && 比 || 优先级更高，包括 MSN 这样的权威网站也不例外。 MDN Operator_Precedence 这与自己经验不符...

james 2019-08-23 10:47 评论0 收藏0
常用列表页常见hook封装解析

　　我们今天来讲讲关于ahooks 源码，我们目标主要有以下几点：　　深入了解 React hooks。　　明白如何抽象自定义 hooks，且可以构建属于自己的 React hooks 工具库。　　小建议：培养阅读学习源码的习惯，工具库是一个对源码阅读不错的选择。　　列表页常见元素　　后台管理系统中常见典型列表页包括筛选表单项、Table表格、Pagination分页这三部分。　　针对使用 Ant...

3403771864 2022-11-05 16:18 评论0 收藏0