JavaScript中的逻辑运算符||和&&

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

不管是在学习还是工作中，我们应该对逻辑运算符都比较熟悉，自己也在回头复习，可能你会觉得简单，但是基础不牢地动山摇。

我对它们的理解

在某些语言中(比如php)，这个操作符返回的是布尔值。不知道大家怎么样，至少我自己在一段时间没有回顾基础之后，差点就掉进去，险些认为这两个操作符在Javascript中也返回布尔值，可能是经常用于一些条件判断语句，记忆逐渐模糊（My God!）。

实际上在复习了一遍之后，觉得它们叫逻辑运算符似乎有些不太贴切，叫选择运算符可能会更恰当。

为什么呢？因为它们的返回值是两个操作数当中的一个，并不是布尔值。

const a = 123;
const b = "abc";
const c = null;
console.log(a || b); // 123
console.log(a && b); // "abc"
console.log(c || b); // "abc" 
console.log(c && b); // null

在JavaScript中，|| 和 && 会先对第一个操作数进行条件判断，如果它不是布尔值，会进行隐式转换为布尔值，然后进行条件判断。

逻辑或 ||：当第一个操作数条件判断的结果为真，就返回第一个操作数的值，否则就返回第二个操作数的值。

比如上面代码的第一条输出，a为123，经过隐式转换为true，所以返回a的值；而第三条输出，c为null，经过隐式转换是false，所以返回第二个操作数也就是b的值。

逻辑与 &&：当第一个操作数条件判断的结果为真，就返回第二个操作数的值，如果为假就返回第一个操作数的值。正好与逻辑或||相反。

所以，根据它们的逻辑，理解成"选择运算符"会好一些，选择返回哪个操作数的值。

开发中的一些应用

逻辑或 ||

在给参数的赋值中，或许你经常能够看到这样的代码，防止在调用函数的时候没有传参，给参数一个默认值，你当然可以在函数形参处给它们准备好默认值，但这里主要讲的是参数的赋值。

function foo(a,b) {
a = a || "hello";
b = b || "world";
}

实际上这种赋值方式与三元运算符->a = a ? a : "hello"类似，但是它们在某些时候又有一些细微的区别。

当a是一个表达式或者是一个函数的时候，它在三元运算符中可能会被执行两次：1.判断的时候执行一次 2.判断为真时再执行一次，获取执行结果作为返回值；而在使a||"hello"的时候，a只执行一次，执行结果用作条件判断和返回结果

逻辑与 &&

在日常开发中逻辑与 && 的使用频率也很高，条件判断这些场景就不说了，基本是都会用到。 还有一种常见的场景就是调用函 数，利用&&的短路特性：

    const a = true 
    function test(){
        console.log('test');
    }
    a && test()  // test函数只有在a条件判断为真时才会执行，如果条件判断不通过，test函数就不会被执行。

虽然有些人会觉得隐式转换存在一些诟病，但是不得不承认在某些时候它能够简化代码。