关于js代码中与或运算符||&&的妙用

Posted 2020-08-21

　　看bootstrap时看到如下一行javascript代码产生了疑惑。

 return window.pageYOffset || e.scrollTop

 ||在这里的作用是什么呢？

首先明确概念，在js逻辑运算中，0、""、null、false、undefined、NaN都会判为false，其他都为true。

a&& b :如果执行a后返回true，则执行b并返回b的值；如果执行a后返回false，则整个表达式返回a的值，b不执行；

a || b :如果执行a后返回true，则整个表达式返回a的值，b不执行；如果执行a后返回false，则执行b并返回b的值；

&& 优先级高于 ||;

其次在几乎所有语言中都遵循”短路原理“，&&前面为false就不判断第二个表达式，||前面为true也不判断后面。

所以这行代码就是返回滚动条的位置，如果pageYOffset得不到结果就执行scrollTop。

同样，

var attr = attr || “”；

 

这个运算经常用来判断一个变量是否已定义，如果没有定义就给他一个初始值

另外!!的作用是把一个其他类型的变量转成的bool类型。

js中||和&&的特性帮我们精简了代码的同时，也带来了代码可读性的降低，所以利弊就需要自己的权衡了。