我有一群奇形怪状的小伙伴，总会问我一些奇形怪状的问题。
昨天有一个叫周三胖（因崇拜某国领导人以及结合其个人特点所以姓周，号三胖⊙﹏⊙）的朋友，向我发了这么一张图片：
兄弟，上面那几句什么意思？
呔！三胖休得坑贫道。老衲不会！
大哥，我是真不会，求讲解？
%#@！#￥&
.....
经过三胖的一番软磨硬泡，死缠烂打，威逼利诱之后，我终于倒在三胖的花言巧语，甜言蜜语之中。
我balabala.....
吃瓜群众：我们瓜都吃完了你什么时候进入正题？
==============一脸懵逼的吃瓜群众分割线==============
好吧，我们进入正题，抛去上面的代码，我写下如下代码
function foo(){
var a = 1;
var b = 2;
var c = false;
var d = true;
console.log(c || (a = 1111),"a此刻的值：",a);
console.log(d || (b = 2222),"b此刻的值：",b);
}
foo();
各位看官且说会输出神马？
好吧，浏览器输出如下
why???
且慢。我们再来修改一下foo函数:
function foo(){
var a = 1;
var b = 2;
var c = false;
var d = true;
console.log(c && (a = 1111),"a此刻的值：",a);
console.log(d && (b = 2222),"b此刻的值：",b);
}
foo();
然后我们在浏览器中会看到如下：
ok，下面进入讲解部分：
&& 和 || 运算符在JavaScript中我更喜欢用初中物理中的电力并联串联来形容， || 运算符相当于并联线路图，而&&运算符则是串联，鉴于年代久远，老夫又出身文科转投工科，就不向各位理工高手看官介绍何为串联并联。
三胖：你分明就是不会!
去去去，盒饭拿好，赶紧回公司撸你代码!
咳咳，咱们继续。
|| 操作符会首先对第一个操作数进行判断，如果第一个为真，则直接返回第一个操作数的判断结果，对第二个操作数是啥不会进行判断运算，如果第一个为假值，则会去判断第二个操作数并对第二个操作数进行执行操作，而后返回执行操作判断值。所以对于||的说明我们可以用代码这么整理：
第一个操作数 || 第二个操作数
代码解释：
if(第一个操作数){
return 第一个操作数;
}
else{
return 第二个操作数;
}
进一步对foo中 c || (a = 1111) 套用上述解释就是：
if(c){
return c;
}
else{
return (a = 1111); //此处在浏览器直接这么写会报错，建议先运算再取出返回值
}
同理 d || (b = 2222) 的套用就是
if(d){
return d;
}
else{
return (b = 2222); //此处在浏览器直接这么写会报错，建议先运算再取出返回值
}
如此一来就会返回出上面的结果。
|| 运算符在我们处理事件兼容时广泛的被应用，比如：
e = e || event;
这所运用的思想就是这样一个思想，如果e为false或者undefined，则会把event赋值给e。
同时在除了在event中的应用外我们还应用在函数的传参上，比如：
function test(a){
a = a || 111;
console.log(a);
}
用此为函数形参指定默认参数，但是这么做其实是不安全的，比如当我调用test函数时我传入实参一个""(空字符串)或者传入实参0，此时浏览器会输出
在浏览器中会将""(空字符串)和0以及很多其它的假值进行隐式类型转换，所以单纯的进行这样一个判断是不严谨和不安全的，所以建议各位看官少用。
这是一个知识点。
三胖：甭废话，盒饭我快吃完了你才讲这么点？
我：哥屋恩...
各位看官别走，咱们继续（微笑脸）。
&& 运算符则和||正好相反，如果第一个操作数为真，则进行第二个操作数的判断运算，首先它会对第二个操作数进行运算，拿到第二个操作数的返回值，而后返回第二个操作数的返回值。如果第一个操作数为假，则进入第二个操作数的判断，直接返回false。
三胖：什么如果否则的，看的我都晕了。
我：
ko，咱们继续。
根据对||运算符的套路。我们继续将&&符转换为半代码半中文语言：
操作数一 && 操作数二
变身：
if(第一个操作数){
return 第二个操作数;
}
else{
return false;
}
继续对上面的 c && (a = 1111) 进行套用：
if(c){
return (a = 1111); //此处在浏览器直接这么写会报错，建议先运算再取出返回值
}
else{
return false;
}
同理 d && (b = 2222) 的解释如下
if(d){
return (b = 2222); //此处在浏览器直接这么写会报错，建议先运算再取出返回值
}
else{
return false;
}
如此输出结果如上。
三胖：嗯。（若有所思脸）
&&运算符一般用在不确定某一对象下是否有某一属性时的判断，比如我有如下代码
var list = {
obj : {},
array : [1,2,3,4,5]
}
在我不确定array是否为list下的属性时通常我们这么写
if(list.hasOwnProperty("array")){
//dosomething
}
else{
//dosomething
}
结合&&符我们可以这么写 :
list.hasOwnProperty("array") && dosomething
对比以上两种写法，很明显在代码简洁性上，第二种写法完胜，但是在代码可读性上完败，两种方式都可以，这取决于个人习惯，我个人比较喜欢第二种写法。
我：三胖，回答我一个问题，回答完你就可以打卡下班了，知道逻辑运算符之间的优先级吗？
三胖：不知道。
我：哥屋恩....
三胖：得嘞（开心脸）。
滴，学生卡。
o(╯□╰)o
回来，你给我回来。
算了，各位看官，我们继续。
现在有如下代码:
a = "hello"; b = false; c = false; console.log(a || b && c)
各位看官，再次猜测会输出什么。
按照正常从左道右的逻辑思维我们先拿到 a || b 的值，而后我们再与 c 进行&&运算，最后它会输出 false
然而，事与愿违。
浏览器最终输出----hello。
这里就体现了逻辑运算符之间的优先级关系，事实上浏览器在解析运算时是这样做的：
a || (b && c)
也就是先拿到 b && c 的值，而后再与 a 进行 || 运算，最后返回结果。
这也就是说在进行逻辑运算时 || 运算符的优先级低于 && 运算符。但是并不建议大家这么书写，这样会导致逻辑关系不明朗，代码可读性差的后果，所以各位看官在书写这样的代码时还是加上一个()为妙（手动滑稽）。
以上就是本次对逻辑运算符的浅谈随笔，如有不对，欢迎指出。文中我与三胖的日常大多实为剧情需要虚构而出，如有雷同实属巧合，语言风格非喜且轻喷。
我是南北东西，一条游上岸的咸鱼，我的目标是翻个身，继续晒。
博客园首发传送地址http://www.cnblogs.com/blog-i...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/83614.html
我有一群奇形怪状的小伙伴，总会问我一些奇形怪状的问题。 昨天有一个叫周三胖（因崇拜某国领导人以及结合其个人特点所以姓周，号三胖⊙﹏⊙）的朋友，向我发了这么一张图片：showImg(https://segmentfault.com/img/bVPFiz?w=1148&h=96); 兄弟，上面那几句什么意思？ 呔！三胖休得坑贫道。老衲不会！ 大哥，我是真不会，求讲解？ %#@！#￥& ..... 经过...
我有一群奇形怪状的小伙伴，总会问我一些奇形怪状的问题。 昨天有一个叫周三胖（因崇拜某国领导人以及结合其个人特点所以姓周，号三胖⊙﹏⊙）的朋友，向我发了这么一张图片：showImg(https://segmentfault.com/img/bVPFiz?w=1148&h=96); 兄弟，上面那几句什么意思？ 呔！三胖休得坑贫道。老衲不会！ 大哥，我是真不会，求讲解？ %#@！#￥& ..... 经过...
摘要：如果第一项的值为时，则执行后面一项的运算，返回的是第二项执行运算后的值再来看多一个例子，自己多动手尝试看看就明白了。 先来看一个关于逻辑或的例子： var b = 0 var a = b++ || b++ console.log(b) // 2 var c = ++b || ++b console.log(a) // 1 console.log(c) //...
摘要：这个时候我就有点犯迷糊了，为什么逻辑运算符能这么用呢由于是出身，所以对这样用感觉很奇怪。 这篇文章主要介绍了js中的 || 与 && 运算符详解,需要的朋友可以参考下 一 js中逻辑运算符在开发中可以算是比较常见的运算符了，主要有三种：逻辑与&&、逻辑或||和逻辑非！。 当&&和|| 连接语句时，两边的语句会转化为布尔类型（Boolean），然后再进行运算，具体的运算规则如下： 两边条...
摘要：这个时候我就有点犯迷糊了，为什么逻辑运算符能这么用呢由于是出身，所以对这样用感觉很奇怪。 这篇文章主要介绍了js中的 || 与 && 运算符详解,需要的朋友可以参考下 一 js中逻辑运算符在开发中可以算是比较常见的运算符了，主要有三种：逻辑与&&、逻辑或||和逻辑非！。 当&&和|| 连接语句时，两边的语句会转化为布尔类型（Boolean），然后再进行运算，具体的运算规则如下： 两边条...
阅读 2288·2023-04-25 14:22
阅读 3733·2021-11-15 18:12
阅读 1293·2019-08-30 15:44
阅读 3215·2019-08-29 15:37
阅读 638·2019-08-29 13:49
阅读 3454·2019-08-26 12:11
阅读 866·2019-08-23 18:28
阅读 1581·2019-08-23 14:55
