JavaScript 里有三个逻辑运算符:||
(或),&&
(与),!
(非)。这些运算符却可以被应用于任意类型的值,而不仅仅是布尔值。他们的结果也同样可以是任意类型。关于他们的运算规则很简单,望名知意。
基本用法:
||
(或)
如下,a 或者 b 有一个为真,就会执行打印语句。
let a = 0,b = 2;
if(a || b){
console.log(a, b);
}
&&
(与)
如下,a 和 b 必须都为真,才会执行打印语句。
let a = 0, b = 2;
if (a && b) {
console.log(a, b);
}
!
(非)
如下,对 a 的值取反,为真时才会执行打印语句。
let a = 0;
if (!a) {
console.log(a);
}
补充:在使用非运算时建议用!!
代表true,!
代表false,!! 代表强制转化成true,这样做的目的就是保证值只能在true/false中取。
let a = 1;
if (!!a) {//!!a 强制转换为布尔值"true",打印语句被执行
console.log(a);
}
if (!a) {//!a 是一个假值,打印语句不执行
console.log(a);
}
以上是基本用法。。。。
下面来说一说"&&“和”||"产生的短路运算
先来看一波打印语句中的逻辑运算执行结果
console.log( false && true ); // false
console.log( true && false); // false
console.log( 123 && '中国'); // 中国
console.log(1 && 0); // 0
console.log( undefined && 0); // undefined
console.log(null && 1); // null
console.log(1 && 0 && 2);;//0
在&&
的运算中,代码从左往右执行,如果都为真,则返回最后一个值,当遇到假值的时候,就会发生短路,并且返回这个假值,代码不再往下执行。
console.log( true || true ); // true
console.log( 123 || '中国'); // 123
console.log( false || true ); // true
console.log( true || false); // true
console.log(1 || 0); // 1
console.log( undefined || 0); // 0
console.log(null || 1); // 1
console.log(0 || 1 || 2);//1
在||
的运算中,代码从左往右执行,如果都为假,则返回最后一个假值,当遇到真值的时候,就会发生短路,并且返回这个真值,代码不再往下执行。
由上可得:
if(a > = 5){
alert(“hello world”);
}
//可以写成:
a > = 5 && alert(“hello world”);
于是就有了一些疯狂的想法
先听需求:
假设对成长速度显示规定如下:
成长速度为5显示1个箭头;
成长速度为10显示2个箭头;
成长速度为12显示3个箭头;
成长速度为15显示4个箭头;
其他都显示都显示0各箭头。
普通条件语句写法
var add_level = "" ;
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写了
但是如果用短路运算的原理,一行就能够解决掉了!!!
let add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;
附赠一个数组替换的🌰
let arr = [1, 2, 3, 4, 5]
let newArr=arr.map(item => { return item && "🐶" })
console.log(newArr);//[ '🐶', '🐶', '🐶', '🐶', '🐶' ]