JS不可不知的逻辑与(&&)或(||)非(!)。

最近重新翻开原生JS,又得到很多不同的体会,虽然现在开发框架那么多,但很多思想都还是离不开原生的基础。今天呢,我就根据自己的学习总结一下逻辑与(&&)和逻辑或(||)和逻辑非(!)。

** 基本定义**
** ||**:逻辑或,只有表达式的值都为false,才返回false,其他情况返回true 比如:(8>5)&&(4<6),返回true;(8<5)&&(4<6),返回false。

** &&**:逻辑与,若两边表达式的值都为true,才返回true;比如: (8>5)&&(4<6),返回true;(8<5)&&(4<6),返回false。

** !**:逻辑非,若表达式的值为true,则返回false;若表达式的值为false,则返回true 比如:!(9>2),返回false;!(9<2),返回true,
     基本定义,我们都再熟悉不过了,看似好像没有什么大用,其实这三个运算符在我们编写代码中所起到的重要作用。

** 首先看几个例子**

var a = 0 || 1 || 2;  // a = 1 
var b = 1 || 0 || 3;  // b = 1 
var c = 0 || 0 || 0;  // c = 0 
var a = 0 && 1 && 2;  // a = 0 
var b = 1 && 0 && 3;  // b = 0 
var c = 0 && 0 && 0;  // c = 0
var d = 1 || 2 || 4;  // d = 1

     可见,逻辑运算符不是简单的返回true/false,而是返回了某一个内容,其实它的判断过程是这样的:
** 逻辑运算符是从前往后依次判断,判断到那个能得出最终结论的地方,就会停止往下判断并返回最后判断的那个内容,不管它是真是假。**
比如:
||运算符:只要一个为真就为真,所以你可以认为它会从前往后一直按顺序在找真,找到真就返回那个真。找不到也返回最后一个判断的那个值。

 0 || 1 || 2,判断到1就知道结果肯定是真,不再继续判断,返回1。 
 1 || 0 || 3, 判断到第一个就知道结果是真,不再继续判断,返回1。
 0 || 0 || 0;一直判断到了最后一个,才知道结果为假,返回最后一个判断的0。

同理:&&运算符是只要一个为假就为假,所以它会从前往后一直找假的,返回最后一个判断的值。

实际应用

** 1 给函数参数定义默认值**

var a = a||2; 
//判断过程:如果变量a是真就停止判断,返回a,如果a是假就继续判断,所以返回2. 实际上就是给a起了个默认值2。 
也等同于: 
if(a){ a = a  }else{ a =2 }
//因为js不像php可以直接在型参数上定义func($attr=5)一个默认值,所以可以通过这种方法给参数定义默认值。
//(顺便提醒一下,最新的es6标准已经可以定义函数参数默认值了。)
//可以看出用逻辑运算符既节省代码又实现功能

** 2 减少代码量**
** 题目**:假设:如果a=5的时b=1,a=10的时b=2,a=12的时候b=3,其他情况b=0, 用代码怎么实现?

** 最简单的**

var b= 0;
if(a == 5){ 
  b = 1;
}else if(a == 10){ 
  b= 2;
}else if(a == 12){
   b= 3;
}else { 
   b = 0;
}

** 稍好些的switch:**

var b = 0; 
switch(a){ 
   case 5 :  b = 1; break;
   case 10 : b = 2; break; 
   case 12 : b = 3; break; 
   default : b = 0; break;
}

更好的

var b = (a==5 && 1) || (a==10 && 2) || (a==12 && 3) || 0;

进阶

var b ={'5':1,'10':2,'12':3}[a] || 0;
等同于下面的代码:
var obj = {'5':1,'10':2,'12':3};
var b = json[a] || 0;

如果需求改成
如果a>5的时b=1,a>10的时b=2,a>12的时候b=3,其他情况b=0, 用代码怎么实现?

var b = (a>12 && 3) || (a>10 && 2) || (a>5 && 1) || 0;

是不是发现代码一下子就少了很多,但需要注意的一点就是:
优点:js代码精简,能减少网络流量,尤其是大量应用的js。
缺点:代码可读性的降低,
推荐:如果是相对复杂的应用,请适当地写一些注释。
我们可以不使用这些技巧,但是我们一定要能看懂,因为这些技巧已经广泛应用,不理解这些你就很难看懂别人的代码。

关于!运算符
很多代码写if(!!a),为什么不直接写if(a);因为这样写更严谨
如下:

console.log(typeof 5); //number
console.log(typeof !!5); //boolean

可以看出:!可以把变量转成的bool类型。不管!后面是什么类型,逻辑非都会将它转成布尔类型

&& (逻辑与) 和||(逻辑或)的优先级
混合使用的时候要注意他们的优先级:&& (逻辑与) 优先级高于||(逻辑或)

**return a && b || c **

先算a&&b,a 是 false ,a&&b就是返回a,再算a||c,则肯定返回 c;如果a是true ,则要看B。

先讲到这里,希望能帮助到一些人。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容