js 与或运算符 || && 妙用

JS中 逻辑或 || 逻辑与 && 的使用方法总结,js中逻辑

JS中 逻辑或 ||  逻辑与 && 的使用方法总结
    //1、在if判断中
    //if(1==1 || 2==3){}//->两个条件中只要有一个条件为真,整体就为真 "或者"
    //if(1==1 && 2==3){}//->两个条件中只有条件都为真,整体就为真 "并且"

    //2、是两个值求其中一个的时候
    //1||2 ->1 "逻辑或" 首先看左边的值是真还是假,如果是真,返回的是左边的值,如果是假返回的是右边的值

    //1&&2 ->2 "逻辑与" 首先看左边的值是真还是假,如果是真,返回的是右边的值,如果是假返回的是左边的值

    //如何看真假?
    //只有 0、NaN、null、undefined、空字符串 为假,其余都是真

    //我们在真实项目中应用逻辑或进行数据的初始化
    //需求:求两个数的和,如果第二个数没有传递的话,我们默认加零
    function sum(num1, num2) {
//        if (typeof num2 === "undefined") {//->说明num2没有传递值,默认值是undefined,此时我们让它的值变为0
//            num2 = 0;
//        }
        num2 = num2 || 0;//->undefined||0 ->num2=0 等价于上面的判断
        console.log(num1 + num2);
    }
    //sum(100);//->num1=100 num2=undefined

    //3、当||和&&同时出现的时候,&&的优先级大于||
    console.log(0 || 1 && 2 || 3);
    //1 && 2 ->2
    //0 || 2 ->2
    //2 || 3 ->2

逻辑或 || 逻辑与 的使用方法总结,js中逻辑
JS中 逻辑或 || 逻辑与 的使用方法总结 //1、在if判断中 //if(1==1 ||
2==3){}//-两个条件中只要有…

参考资料)

js中操作符 || 和 &&

一、第一部分(引子)

js中操作符 || 和 &&

先来介绍一下在js中由其他数据类型转化为boolean时到底是转化成true还是false
js中,当以下值转成boolean类型的时候,会被转换成false

0
“”(空串)
false
威尼斯网址开户网站,undefined
null
NaN

其余的则会被转化为true

这里顺便说一句,js中将数据转化为boolean类型的方式有
1.Boolean()
2.!!

 

//eg
var value = 5;

console.log(typeof value);//number

console.log(typeof Boolean(value));//boolean

console.log(typeof !!value);//boolean

 

二、第二部分(规则说明)

好了,下面言归正传,下面来介绍几条规则:

  1. a || b
    当!!a为true时,返回值为a;当!!a为false时,返回值为b

  2. a && b
    当!!a为true时,返回值为b;当!!a为false时,返回值为a

  3. && 优先级高于 ||

  4. 有多个&&,从左到右两两执行;||同理

 

//eg

console.log(true || 0);//true

console.log(0 || 1);//1

console.log(null || undefined);//undefined

console.log(undefined || null);//null

console.log(null && "rgy");//null

console.log(undefined && "rgy");//undefined

console.log(1 || 2 || 4);//1

console.log(1 && 2 && 4);//4

console.log(1 && 0 && 4);//0

console.log((1 && 3 || 0)) && 4);//4

console.log(1 && (3 || 0 && 4));//3

console.log(1 && 3 || 0 && 4);//3

console.log(0 && 4 || 1 && 3);//3

 

三、第三部分(应用)

  1. callback && callback();

这个想必大伙不陌生吧,如果callback存在,则执行callback(),它等价于
if(callback){
callback();
}

  1. this.count = this.count || 0;

这个在实现简单的讲数器的时候比较常用

  1. var obj = obj || {};

一般用于传参的obj,做个初始化

 

  1. 示例:
    成长速度为5显示1个箭头;
    成长速度为10显示2个箭头;
    成长速度为12显示3个箭头;
    成长速度为15显示4个箭头;
    其他都显示都显示0各箭头。

要求:根据成长速度的值显示箭头数

最通用也是最容易想到的方式无非是 if else 语句,或者是 switch case 语句
这当然是可以的,不过在js中却有更为简洁的方法:

 

1).
var add_step = 12;
var add_level = 
(add_step == 5 && 1) || 
(add_step == 10 && 2) || 
(add_step == 12 && 3) || 
(add_step == 15 && 4) || 0; 
console.log(add_level);

2).
var add_step = 120;
var add_level = {'5':1,'10':2,'12':3,'15':4}[add_step] || 0; 
console.log(add_level);

 

当然&&与||的应用还有很多,远远不限于上面所列的这些,事实上,js中&&与||十分强大

但是需要注意的一点就是:js中||和&&的特性帮我们精简了代码的同时,
也带来了代码可读性的降低。这个和正则表达式是一个道理,能够精简代码,
但是可读性会降低,建议使用这样的方式的时候注意写上必要的注释

 

四、第四部分(逗号操作符)

既然说到了操作符,这里顺便说一下js中的逗号操作符

定义:
逗号运算符,它将先计算左边的参数,再计算右边的参数值,然后返回最右边参数的值。

先来2个case体会一下:

 

1.
var a = 9, b = 19;

function test(){
 return a++, b++, a * b;
}

var c = test();

console.log(a);//10
console.log(b);//20
console.log(c);//200

分析:
表达式 a++, b++, a * b 从左到右开始计算,
a的值变为10,b的值变为20,a * b的值自然就为200了

2.
console.log((1, 0, 3, alert("kkk")));//kkk

tip:
不过逗号操作符在赋值的时候要注意一下:

 

 

这样就会报错:
var a = 10;
var b = a++, 20;
console.log(b);
这个应该和“=”的优先级有关

改成这样就行了:
var a = 10;
var b = (a++, 20);
console.log(b);//20

 

|| 和 一、第一部分(引子) js中操作符
|| 和
先来介绍一下在js中由其他数据类型转化为boolean时到底是转化成true还是false
js中,…

首先出个题:
威尼斯网址开户网站 1
如图:
假设对成长速度显示规定如下:
成长速度为5显示1个箭头;
成长速度为10显示2个箭头;
成长速度为12显示3个箭头;
成长速度为15显示4个箭头;
其他都显示都显示0各箭头。
用代码怎么实现?

var re = /&/g;
var str = “”;

A||B

差一点的if,else:
Js代码

str.replace(re,”&”);

  如果A能转换成true则返回A,否则返回B
 因此,在boolean环境(在if的条件判断中)中使用时,
二者操作结果中只要有一个为true,返回true;二者操作结果都为false时返回false.

复制代码 代码如下:

varstr=””;
str.replace(re,””);…

只有 0、null、undefined、空字符串 为假,其余都是真

var add_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 if(add_step == 15){
add_level = 4;
}
else {
add_level = 0;
}

例如:

稍好些的switch:
Js代码

o1=true || true      // t || t 结果为 true

复制代码 代码如下:

o2=false || true      // f || t 结果为 true

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;
case 15 : add_level = 4;
break;
default : add_level = 0;
break;

o3=true || false      // t || f 结果为 true

}如果需求改成:
成长速度为>12显示4个箭头;
成长速度为>10显示3个箭头;
成长速度为>5显示2个箭头;
成长速度为>0显示1个箭头;
成长速度为<=0显示0个箭头。

o4=false || (3 == 4)  // f || f 结果为 false

那么用switch实现起来也很麻烦了。

o5=”Cat” || “Dog”    // t || t 结果为 Cat

那么你有没有想过用一行就代码实现呢?
ok,让我们来看看js强大的表现力吧:
Js代码

o6=false || “Cat”    // f || t 结果为 Cat

复制代码 代码如下:

o7=”Cat” || false    // t || f 结果为 Cat

var add_level = (add_step==5 && 1) || (add_step==10 && 2) ||
(add_step==12 && 3) || (add_step==15 && 4) || 0;

实际项目中

更强大的,也更优的:

//1、在if判断中

Js代码

//if(1==1 || 2==3){}//->两个条件中只要有一个条件为真,整体就为真
“或者”

复制代码 代码如下:

//if(1==1 && 2==3){}//->两个条件中只有条件都为真,整体就为真 “并且”

var add_level={‘5′:1,’10’:2,’12’:3,’15’:4}[add_step] || 0;

//2、用作函数传参时参数的判断  
是两个值求其中一个的时候【下面求和就是一个例子】

第二个需求:
Js代码

//1||2 ->1 “逻辑或”
首先看左边的值是真还是假,如果是真,返回的是左边的值,如果是假返回的是右边的值

复制代码 代码如下:

//1&&2 ->2 “逻辑与”
首先看左边的值是真还是假,如果是真,返回的是右边的值,如果是假返回的是左边的值

var add_level = (add_step>12 && 4) || (add_step>10 && 3) ||
(add_step>5 && 2) || (add_step>0 && 1) || 0;

3、用作对象的判断

首先我们来梳理一下一个概念,请你一定要记住:在js逻辑运算中,0、””、null、false、undefined、NaN都会判为false,其他都为true(好像没有遗漏了吧,请各位确认下)。这个一定要记住,不然应用||和&&就会出现问题。
这里顺便提下:经常有人问我,看到很多代码if(!!attr),为什么不直接写if(attr);
其实这是一种更严谨的写法:
请测试 typeof 5和typeof
!!5的区别。!!的作用是把一个其他类型的变量转成的bool类型。
下面主要讨论下逻辑运算符&&和||。
几乎所有语言中||和&&都遵循“短路”原理,如&&中第一个表达式为假就不会去处理第二个表达式,而||正好相反。
js也遵循上述原则。但是比较有意思的是它们返回的值。
代码:var attr = true && 4 && “aaa”;
那么运行的结果attr就不是简单的true或这false,而是”aaa”
再来看看||:
代码:var attr = attr ||
“”;这个运算经常用来判断一个变量是否已定义,如果没有定义就给他一个初始值,这在给函数的参数定义一个默认值的时候比较有用。因为js不像php可以直接在型参数上定义func($attr=5)。再次提醒你记住上面的原则:如果实参需要是0、””、null、false、undefined、NaN的时候也会当false来处理。

let  params={

if(a >=5){
alert(“你好”);
}
可以写成:
a >= 5 && alert(“你好”);
这样只需一行代码就搞定。但是需要注意的一点就是:js中||和&&的特性帮我们精简了代码的同时,也带来了代码可读性的降低。这就需要我们自己来权衡了。
一方面精简js代码,能实质性的减少网络流量,尤其是大量应用的js公用库。个人比较推荐的做法是:如果是相对复杂的应用,请适当地写一些注释。这个和正在表达式一样,能够精简代码,但是可读性会降低,对读代码的人要求会高些,最好的办法就是写注释。

pageNo:page||query.pageNo,

我们可以不使用这些技巧,但是我们一定要能看懂,因为这些技巧已经广泛应用,尤其是像JQuery等js框里的代码,不理解这些你就很难看懂别人的代码。
像var Yahoo = Yahoo || {};这种是非常广泛应用的。
ok,最后让我们来看一段jQuery中的代码吧:

pageSize:query.pageSize

Js代码

};

复制代码 代码如下:

//如何看真假?

var wrap =
    // option or optgroup
    !tags.indexOf(“<opt”) &&
    [ 1, “<select multiple=’multiple’>”, “</select>” ]
||

//只有 0、null、undefined、空字符串 为假,其余都是真

    !tags.indexOf(“<leg”) &&
    [ 1, “<fieldset>”, “</fieldset>” ] ||

//我们在真实项目中应用逻辑或进行数据的初始化

    tags.match(/^<(thead|tbody|tfoot|colg|cap)/) &&
    [ 1, “<table>”, “</table>” ] ||

//需求:求两个数的和,如果第二个数没有传递的话,我们默认加零

    !tags.indexOf(“<tr”) &&
    [ 2, “<table><tbody>”, “</tbody></table>”
] ||

function sum(num1, num2) {

    // <thead> matched above
    (!tags.indexOf(“<td”) || !tags.indexOf(“<th”)) &&
    [ 3, “<table><tbody><tr>”,
“</tr></tbody></table>” ] ||

//        if (typeof num2 === “undefined”)
{//->说明num2没有传递值,默认值是undefined,此时我们让它的值变为0

    !tags.indexOf(“<col”) &&
    [ 2, “<table><tbody></tbody><colgroup>”,
“</colgroup></table>” ] ||

//            num2 = 0;

    // IE can’t serialize <link> and <script> tags
normally
    !jQuery.support.htmlSerialize &&
    [ 1, “div<div>”, “</div>” ] ||

//        }

    [ 0, “”, “” ];

num2 = num2 || 0;//->undefined||0 ->num2=0 等价于上面的判断

    // Go to html and back, then peel off extra wrappers
    div.innerHTML = wrap[1] + elem + wrap[2];

console.log(num1 + num2);

    // Move to the right depth
    while ( wrap[0]– )
        div = div.lastChild;

}

这段代码是作者用来处理 $(html)
时,有些标签必须要约束的,如<option>必须在<select></select>之内的。
可能你也发现了作者还有一个很巧的地方就是 !tags.indexOf(“<opt”)
,作者很巧很简单的就实现了startWith的功能了,没有一点多余的代码。jquery源代码中还有很多如此精妙的代码,大家可以去学习学习。

//sum(100);//->num1=100 num2=undefined

如图: 假设对成长速度显示规定如下:
成长速度为5显示1个箭头; 成长速度为10显示2个箭头;
成长速度为12显示3个箭头;…

//3、当||和&&同时出现的时候,&&的优先级大于||

console.log(0 || 1 && 2 || 3);

//1 && 2 ->2

//0 || 2 ->2

//2 || 3 ->2

相关文章