js技巧:巧用运算符&&

397 浏览发布于 作者 zouyang (欢迎转载-请注明出处链接)留下评论分享按钮

一、&&运算符在变量赋值时的运用(短路原理):

1、先看一个示例:

var box = true && 123;
console.log(box);	//123

var box = false && 123;
console.log(box);	//false

var box = 0 && 123;
console.log(box);	//0

var box = -1 && 123;
console.log(box);	//123

从上例可以看出,&&运算符左侧如果为真,则赋值右侧值(反之,则赋值左侧值)。

2、知识点:

&&运算符左侧部分转布尔值后为true,则赋值&&运算符右侧的(否则赋值左侧),相当于左侧是个条件判断,为真则继续赋值右侧。
当左侧为 null/NaN/undefined,会赋值为 null/NaN/undefined :


console.log( null && 123 );	//null

console.log( NaN && 123 );	//NaN

console.log( undefined && 123 );	//undefined

3、进阶:

利用&&运算符我们可以写出更加简洁的代码:


//示例1:if条件执行的简化
// if(true) DoSomething...  简化为  true && DoSomething... 
var box1 = true, box2 = true,box3 = true,box4 = false,box5 = true;
box1 && console.log("1");  //1
box2 && console.log("2");  //2
box3 && console.log("3");  //3
box4 && console.log("4");  //不打印任何东西
box5 && console.log("5");  //5

//示例2:判断后的赋值操作
var box1;
var box2 = 1;
if( box2 )
{
	box1 = box2;
}
console.log( box1 );  //1

//改写为:
var box1 = window.box2 && 1;
console.log( box1 );  //1



//示例3:多个&&的情况
var box1 = 1 && 2 && 3 && 4;  //前面都为真,最后赋值给4
console.log( box1 );	//4

var box2 = 1 && 2 && 0 && 4;  //前面到0时,就剩0 && 4,所以最后赋值给0
console.log( box2  ); 	//0

//示例4:在 React 组件内条件判断显示需要的组件
function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div> ); }

二、&&运算符在条件判断时的运用:

1、先看一个示例:

var x = 1, y = 2, z = 3;
if( x==1 && y==2 )
{
  console.log(true);  //打印出true ,因为x==1 和 y==2 这两个条件都为真,则整体返回真
}
console.log( x==1 && y==3 );  //false
console.log( x==1 && y==2 && z == 4 );  //false

2、知识点:

&&运算符用于条件判断时,必须左右两侧全部为真才返回真,否则假(只要其中有一个)

三、实现连续的条件函数执行,比如:分别执行三个函数

示例1:
function box1(){
    console.log( "01" );
    return true;     //返回 真,才会让第二个函数得以继续执行
}
function box2(){
    console.log( "02" );
    return true;     //返回 真,才会让第三个函数得以继续执行
}
function box3(){
    console.log( "03" );
}
box1()&&box2()&&box3()  //01  02  03

示例2:
如果第一个函数返回 假,则不执行后面函数:
function box1(){
    console.log( "01" );
    return false
}
function box2(){
    console.log( "02" );
    return true
}
function box3(){
    console.log( "03" );
}
box1()&&box2()&&box3()  //01


(完)

想要打赏,请点击这里

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注