js技巧：巧用运算符&&

一、&&运算符在变量赋值时的运用（短路原理）：

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

（完）