最近重新翻开原生 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,
这是他们的基本定义,我们都再熟悉不过了,看似好像没有什么大用,其实这三个运算符在我们编写代码中所起到的重要作用。
首先看几个例子
- vara = 0 || 1 || 2;// a = 1
- varb = 1 || 0 || 3;// b = 1
- varc = 0 || 0 || 0;// c = 0
- vara = 0 && 1 && 2;// a = 0
- varb = 1 && 0 && 3;// b = 0
- varc = 0 && 0 && 0;// c = 0
- vard = 1 || 2 || 4;//c = 4
- OK.看完上面的栗子,你会发现逻辑运算符不是简单的返回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 大大减少代码量
首先出个题:假设:成长速度为 5 显示 1 个箭头;成长速度为 10 显示 2 个箭头;成长速度为 12 显示 3 个箭头;其他都显示都显示 0 各箭头。
用代码怎么实现?(例子来源于网上的一个贴吧里)
最简单的
- varadd_level = 0;
- if(add_step == 5){
- add_level = 1;
- }else if(add_step == 10){
- add_level = 2;
- }else if(add_step == 12){
- add_level = 3;
- }else {
- add_level = 0;
- }
稍好些的 switch:
- var add_level = 0;
- switch (add_step) {
- case 5:
- add_level = 1;
- break;
- case 10:
- add_level = 2;
- break;
- case 12:
- add_level = 3;
- break;
- default:
- add_level = 0;
- break;
- }
更好的
- varadd_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || 0;
更更好的
- var add_level = {
- '5': 1,
- '10': 2,
- '12': 3
- } [add_step] || 0;等同于下面的代码:
- var obj = {
- '5': 1,
- '10': 2,
- '12': 3
- };
- var add_level = json[add_step] || 0;
如果需求改成:成长速度为 > 12 显示 4 个箭头;成长速度为 > 10 显示 3 个箭头;成长速度为 > 5 显示 2 个箭头;成长速度为 > 0 显示 1 个箭头;成长速度为 <=0 显示 0 个箭头。
- varadd_level = (add_step>12 && 4) || (add_step>10 && 3) || (add_step>5 && 2) || (add_step>0 && 1) || 0;
- console.log(add_level);
哇塞,是不是发现我们的代码一下子就少了很多,但需要注意的一点就是:一方面精简 js 代码,能实质性的减少网络流量,尤其是大量应用的 js 公用库。同时,也带来了代码可读性的降低,个人比较推荐的做法是:如果是相对复杂的应用,请适当地写一些注释。
我们可以不使用这些技巧,但是我们一定要能看懂,因为这些技巧已经广泛应用,不理解这些你就很难看懂别人的代码。
关于!运算符
很多代码写 if(!!attr),为什么不直接写 if(attr);其实这是一种更严谨的写法,如下:
- 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,自己想想吧。。。
另附:JS 运算符优先级(从高到低列出)
运算符 | 描述 |
. [] () | 字段访问、数组下标、函数调用以及表达式分组 |
++ -- - ~ ! delete new typeof void | 一元运算符、返回数据类型、对象创建、未定义值 |
* / % | 乘法、除法、取模 |
+ - + | 加法、减法、字符串连接 |
<<>> >>> | 移位 |
<<=> >= instanceof | 小于、小于等于、大于、大于等于、instanceof |
== != === !== | 等于、不等于、严格相等、非严格相等 |
& | 按位与 |
^ | 按位异或 |
| | 按位或 |
&& | 逻辑与 |
|| | 逻辑或 |
?: | 条件 |
= oP= | 赋值、运算赋值 |
, | 多重求值 |
如有错误,欢迎指正。
来源: http://www.cnblogs.com/moqing/p/6714085.html