JavaScript——逻辑与、或的应用

逻辑与

遵循的规则

• 如果第一个操作数是对象，则返回第二个操作数
• 如果第二个操作数是对象，则只有在第一个操作数的求值结果为true的情况下才会返回该对象
• 如果两个操作数都是对象，则返回第二个操作数
• 如果第一个操作数是null，则返回NaN
• 如果第一个操作数undefined，则返回undefined

注： 逻辑与操作属于短路操作，即如果第一个操作数能够决定结果，那么就不会再对第二个操作数求值。例如当第一个操作数是false，无论第二个操作数是上面值，结果都不再可能是true

开发中的应用

情景描述：在多数时候定义一个函数以及相应的参数的时候，但是这个参数有时候会用到，有时又不需要，大多时候是通过设置默认值，防止不传参数的时候报错，这样就会使用了默认值，有些时候甚至连默认值都不需要，那么这个时候就需要灵活使用与操作，例如

    function doSomething(fn) {
 		fn();
 		console.log("1111");
	}
	//定义一个函数
	function sayHi() {
		alert("sayHi");
	}
	//传入sayHi()参数调用doSomething方法不会报错，会正常执行
	doSomething(sayHi());
	//但是如果调用doSomething不传入参数，程序就会报错fn is not a function
	doSomething();

解决方法

    function doSomething(fn) {
 		fn && fn();  //由于第一个操作符是undefined  则返回undefined  程序并不会报错
 		console.log("1111");
	}
    //此时无论是传入方法参数或者不传，程序都会正常执行
    //传入sayHi()参数调用doSomething方法不会报错，会正常执行
	doSomething(sayHi());  //弹出sayHi  输出1111
	//但是如果调用doSomething不传入参数，程序就会报错fn is not a function
	doSomething(); //输出1111

逻辑或

遵循的规则

• 如果第一个操作数是对象，则返回第一个操作数
• 如果第一个操作数的求值结果为false，则返回第二个操作数
• 如果两个操作数都是对象，则返回第一个操作数
• 如果两个操作数都是null，则返回null
• 如果两个操作数都是NaN，则返回NaN
• 如果两个操作数都是undefined，则返回undefined

开发中的应用

情景描述：应用vue的插值表达式的时候，常常会出现，当一个参数存在我显示的内容是该参数，与参数不存在显示的不同，这种情景一顺手就敲出一个三元运算符…实则不是，如果是这种情况，只要通过逻辑或就可实现更简洁的代码，例如

{{user.name || ‘登录/注册’}}