阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JS 逻辑运算符

      功能

      逻辑运算符通常用于布尔型(逻辑)值。这种情况下,它们返回一个布尔值。然而,&& 和 || 运算符会返回一个指定操作数的值,因此,这些运算符也用于非布尔值。这时,它们也就会返回一个非布尔型值。

      语法

      var a = 3;
      var b = -2;
      
      console.log(a > 0 && b > 0);
      // expected output: false
      
      console.log(a > 0 || b > 0);
      // expected output: true
      
      console.log(!(a > 0 || b > 0));
      // expected output: false
      

      说明

      逻辑运算符通常与布尔(逻辑)值一起使用,当它们使用时,它们将返回布尔值。

      &&

      逻辑与。

      ||

      逻辑或。

      !

      逻辑非

      描述

      逻辑运算符如下表所示 (其中 expr 可能是任何一种类型,不一定是布尔值):

      运算符语法说明
      逻辑与,AND(&&)expr1 && expr2若 expr1 可转换为 true,则返回 expr2;否则,返回 expr1。
      逻辑或,OR(
      逻辑非,NOT(!)!expr若 expr 可转换为 true,则返回 false;否则,返回 true。

      如果一个值可以被转换为 true,那么这个值就是所谓的 truthy,如果可以被转换为 false,那么这个值就是所谓的 falsy。

      会被转换为 false 的表达式有:

      • null;
      • NaN;
      • 0;
      • 空字符串("" or '' or ``);
      • undefined。

      尽管 && 和 || 运算符能够使用非布尔值的操作数,但它们依然可以被看作是布尔操作符,因为它们的返回值总是能够被转换为布尔值。

      如果要显式地将它们的返回值(或者表达式)转换为布尔值,请使用双重非运算符(即!!)或者 Boolean 构造函数。

      短路计算

      由于逻辑表达式的运算顺序是从左到右,也可以用以下规则进行"短路"计算:

      • (some falsy expression) && (expr) 短路计算的结果为假。
      • (some truthy expression) || (expr) 短路计算的结果为真。

      短路意味着上述表达式中的 expr 部分不会被执行,因此 expr 的任何副作用都不会生效(举个例子,如果 expr 是一次函数调用,这次调用就不会发生)。造成这种现象的原因是,整个表达式的值在第一个操作数被计算后已经确定了。看一个例子:

      function A(){ console.log('called A'); return false; }
      function B(){ console.log('called B'); return true; }
      
      console.log( A() && B() );
      // logs "called A" due to the function call,
      // then logs false (which is the resulting value of the operator)
      
      console.log( B() || A() );
      // logs "called B" due to the function call,
      // then logs true (which is the resulting value of the operator)
      

      Operators precedence

      请注意,由于运算符优先级的存在,下面的表达式的结果却不相同。右侧被小括号括起来的操作变成了独立的表达式。

      false &&  true || true      // 结果为 true
      false && (true || true)     // 结果为 false
      

      布尔值转换规则

      将 AND 转换为 OR

      以下涉及布尔运算的操作:

      bCondition1 && bCondition2
      

      总是等于:

      !(!bCondition1 || !bCondition2)
      

      将 OR 转换为 AND

      以下涉及布尔运算的操作:

      bCondition1 || bCondition2
      

      总是等于:

      !(!bCondition1 && !bCondition2)
      

      删除嵌套的小括号

      由于逻辑表达式是从左往右计算的,所以,通常可以按照下面的规则删除小括号。

      删除嵌套的 AND

      以下涉及布尔运算的操作:

      bCondition1 || (bCondition2 && bCondition3)
      

      总是等于:

      bCondition1 || bCondition2 && bCondition3
      

      删除嵌套的 OR

      以下涉及布尔运算的操作:

      bCondition1 && (bCondition2 || bCondition3)
      

      总是等于:

      !(!bCondition1 || !bCondition2 && !bCondition3)
      

      规范

      规范状态备注
      ECMAScript 1st Edition (ECMA-262)StandardInitial definition.
      ECMAScript 5.1 (ECMA-262)StandardDefined in several sections of the specification: Logical NOT Operator, Binary Logical Operators
      ECMAScript 2015 (6th Edition, ECMA-262)StandardDefined in several sections of the specification: Logical NOT Operator, Binary Logical Operators
      ECMAScript Latest Draft (ECMA-262)DraftDefined in several sections of the specification: Logical NOT Operator, Binary Logical Operators
      目录
      目录