15天学会JavaScript(视频教学版)
上QQ阅读APP看书,第一时间看更新

3.7 ECMAScript逻辑运算符及表达式

在ECMAScript语法中,逻辑运算占有非常重要的地位。为什么这么讲呢?主要是因为在程序中会有大量的条件判断语句是依赖于逻辑运算来完成的。下面对这些逻辑运算符逐一进行介绍。

3.7.1 逻辑运算符与表达式概述

逻辑运算符用来确定变量或值之间的逻辑关系。关于ECMAScript语法规范中定义的逻辑运算符规则详见表3-10。

表3-10 ECMAScript逻辑运算符与表达式

3.7.2 ToBoolean逻辑值转换操作

在ECMAScript语法规范中,定义了转换逻辑值的ToBoolean操作,用于将各种类型的值转换为逻辑值,具体规则详见表3-11。

表3-11 ECMAScript语法ToBoolean操作

下面,来看一个关于ToBoolean操作的代码示例(详见源代码ch03目录中ch03-js-operator-toBoolean.html文件)。

【代码3-27】

   01  <script type="text/javascript">
   02       console.log("ToBoolean(null) = " + Boolean(null));
   03       console.log("ToBoolean(Undefined) = " + Boolean(undefined));
   04       console.log("ToBoolean(true) = " + Boolean(true));
   05       console.log("ToBoolean(false) = " + Boolean(false));
   06       console.log("ToBoolean(+0) = " + Boolean(+0));
   07       console.log("ToBoolean(-0) = " + Boolean(-0));
   08       console.log("ToBoolean(NaN) = " + Boolean(NaN));
   09       console.log("ToBoolean(1) = " + Boolean(1));
   10       console.log("ToBoolean('EcmaScript') = " + Boolean("EcmaScript"));
   11       console.log("ToBoolean('') = " + Boolean(""));
   12  </script>

关于【代码3-27】的分析如下:

这段代码主要就是使用ToBoolean操作将一些原始值或特殊值转换为Boolean类型的值。这里要注意的是,ECMAScript语法中并没有ToBoolean这个方法(这与String类型的toString()方法是不同的),不过可以使用Boolean()方法进行强制类型转换。

页面效果如图3.30所示。

图3.30 ECMAScript逻辑运算(ToBoolean操作)

从第02行和第03行代码输出的结果来看,通过Boolean()方法对原始值null和undefined强制类型转换后,返回值均是布尔值false;

从第04行和第05行代码输出的结果来看,通过Boolean()方法对布尔值强制类型转换后,返回值仍是原布尔值;

从第06行和第07行代码输出的结果来看,通过Boolean()方法对+0和-0强制类型转换后,返回值均是布尔值false;

从第08行代码输出的结果来看,通过Boolean()方法对原始值NaN强制类型转换后,返回值是布尔值false;

从第09行代码输出的结果来看,通过Boolean()方法对数值1强制类型转换后,返回值均是布尔值true;

从第10行和第11行代码输出的结果来看,通过Boolean()方法对字符串强制类型转换后,非空字符串的返回值是布尔值true,空字符串的返回值是false。

3.7.3 AND运算符及表达式

在ECMAScript语法定义中,AND运算符用于执行逻辑“与”运算,用双和号(&&)来表示。关于ECMAScript语法中定义的逻辑AND运算符的规则详见表3-12。

表3-12 ECMAScript逻辑运算符(AND)规则

另外,对于逻辑AND运算中的运算数可以是任何类型,不一定非是Boolean类型值。而如果某个运算数不是原始的Boolean型值,那么逻辑AND运算后的结果并不一定返回Boolean类型值。

关于ECMAScript语法中对逻辑与运算内容的具体说明如下:

  • 如果一个运算数是对象,另一个是Boolean类型值true,才会返回该对象;
  • 如果两个运算数都是对象,则返回第二个对象;
  • 如果某个运算数是原始值null,仍返回原始值null;
  • 如果某个运算数是原始值NaN,仍返回原始值NaN;
  • 如果某个运算数是原始值undefined,仍返回原始值undefined。

下面,来看一个逻辑AND运算符表达式的代码示例(详见源代码ch03目录中ch03-js-operator-logical-and.html文件)。

【代码3-28】

   01  <script type="text/javascript">
   02       var b_11 = true && true;
   03       console.log("true && true = " + b_11);
   04       var b_10 = true && false;
   05       console.log("true && false = " + b_10);
   06       var b_01 = false && true;
   07       console.log("false && true = " + b_01);
   08       var b_00 = false && false;
   09       console.log("false && false = " + b_00);
   10       var b_null = null && true;
   11       console.log("null && true = " + b_null);
   12       var b_NaN = NaN && true;
   13       console.log("NaN && true = " + b_NaN);
   14       var b_undefined = undefined && true;
   15       console.log("undefined && true = " + b_undefined);
   16  </script>

关于【代码3-28】的分析如下:

这段代码主要就是使用逻辑AND运算符(&&)对原始值和特殊值进行了逻辑“与”操作运算。

页面效果如图3.31所示。从第03行、第05行、第07行和第09行代码输出的结果来看,Boolean值之间的逻辑AND运算返回值与表3-12中的定义是一致的。

从第11行、第13行和第15行代码输出的结果来看,原始值null、NaN和undefined与其他运算数之间的逻辑AND运算的返回值仍是其本身。

图3.31 ECMAScript逻辑运算符(AND)

3.7.4 OR运算符及表达式

在ECMAScript语法定义中,OR运算符用于执行逻辑“或”运算,用符号(||)来表示。关于ECMAScript语法中定义的逻辑OR运算符的规则详见表3-13。

表3-13 ECMAScript逻辑运算符(OR)规则

另外,与逻辑AND运算符一样,逻辑OR运算中的运算数也可以是任何类型的,不一定非是Boolean类型值。而如果某个运算数不是原始的Boolean型值,那么逻辑OR运算后的结果并不一定返回Boolean类型值。

关于ECMAScript语法中对OR运算内容的具体说明如下:

  • 如果一个运算数是对象且其左边的运算数值均为false,则返回该对象;
  • 如果两个运算数都是对象,则返回第一个对象;
  • 如果最后一个运算数是null,并且其他运算数值均为false,则返回null;
  • 如果最后一个运算数是NaN,并且其他运算数值均为false,则返回NaN;
  • 如果最后一个运算数是undefined,并且其他运算数值均为false,则返回undefined。

下面,来看一个逻辑OR运算符表达式的代码示例(详见源代码ch03目录中ch03-js-operator-logical-or.html文件)。

【代码3-29】

   01  <script type="text/javascript">
   02       var b_11 = true || true;
   03       console.log("true || true = " + b_11);
   04       var b_10 = true || false;
   05       console.log("true || false = " + b_10);
   06       var b_01 = false || true;
   07       console.log("false || true = " + b_01);
   08       var b_00 = false || false;
   09       console.log("false || false = " + b_00);
   10       var b_null_true = null || true;
   11       console.log("null || true = " + b_null_true);
   12       var b_true_null = true || null;
   13       console.log("true || null = " + b_true_null);
   14       var b_null_false = null || false;
   15       console.log("null || false = " + b_null_false);
   16       var b_false_null = false || null;
   17       console.log("false || null = " + b_false_null);
   18       var b_NaN_true = NaN || true;
   19       console.log("NaN || true = " + b_NaN_true);
   20       var b_true_NaN = true || NaN;
   21       console.log("true || NaN = " + b_true_NaN);
   22       var b_NaN_false = NaN || false;
   23       console.log("NaN || false = " + b_NaN_false);
   24       var b_false_NaN = false || NaN;
   25       console.log("false || NaN = " + b_false_NaN);
   26       var b_undefined_true = undefined || true;
   27       console.log("undefined || true = " + b_undefined_true);
   28       var b_true_undefined = true || undefined;
   29       console.log("true || undefined = " + b_true_undefined);
   30       var b_undefined_false = undefined || false;
   31       console.log("undefined || false = " + b_undefined_false);
   32       var b_false_undefined = false || undefined;
   33       console.log("false || undefined = " + b_false_undefined);
   34  </script>

关于【代码3-29】的分析如下:

这段代码主要就是使用逻辑OR运算符(||)对原始值和特殊值进行了逻辑“或”操作运算。

页面效果如图3.32所示。

图3.32 ECMAScript逻辑运算符(OR)

从第03行、第05行、第07行和第09行代码输出的结果来看,Boolean值之间的逻辑OR运算返回值与表3-13中的定义是一致的;

从第11行、第13行、第15行和第17行代码输出的结果来看,原始值null与Boolean值的逻辑OR运算返回值则比较复杂。null与true逻辑OR运算,不论前后顺序如何均会返回true;而null与false逻辑OR运算,如果null不在表达式的最后则返回false,而如果null在表达式的最后则返回null,这与我们在前文中的描述是一致的;

同样的,原始值NaN、undefined与Boolean值的逻辑OR运算的返回值与原始值null是类似的。

以上就是对逻辑OR运算符(||)的测试,其返回值比逻辑AND运算符(&&)更为复杂,希望能帮助读者进一步理解逻辑运算符的使用。

3.7.5 NOT运算符及表达式

在ECMAScript语法定义中,NOT运算符用于执行逻辑“非”运算,用感叹号(!)来表示。NOT运算符与逻辑AND运算符、逻辑OR运算符不同的是逻辑NOT运算符的返回值一定是Boolean类型值。

关于ECMAScript语法中对逻辑NOT运算符内容的具体说明如下:

  • 如果运算数是对象,则返回值为false;
  • 如果运算数是数字0,则返回值为true;
  • 如果运算数是除0以外的任何数字,则返回值为false;
  • 如果运算数是null,则返回值为true;
  • 如果运算数是NaN,则返回值为true;
  • 如果运算数是undefined,则返回值为true。

下面,来看一个逻辑NOT运算符表达式的代码示例(详见源代码ch03目录中ch03-js-operator-logical-not.html文件)。

【代码3-30】

   01  <script type="text/javascript">
   02       var b_01 = !true;
   03       console.log("!true = " + b_01);
   04       var b_00 = !false;
   05       console.log("!false = " + b_00);
   06       var b_0 = !0;
   07       console.log("!0 = " + b_0);
   08       var b_1 = !1;
   09       console.log("!1 = " + b_1);
   10       var b_null = !null;
   11       console.log("!null = " + b_null);
   12       var b_NaN = !NaN;
   13       console.log("!NaN = " + b_NaN);
   14       var b_undefined = !undefined;
   15       console.log("!undefined = " + b_undefined);
   16       var obj = new Object();
   17       console.log("!object = " + !obj);
   18  </script>

关于【代码3-30】的分析如下:

这段代码主要就是使用逻辑NOT运算符(!)对原始值和特殊值进行了逻辑“非”操作运算。

页面效果如图3.33所示。

图3.33 ECMAScript逻辑运算符(NOT)

从第03行、第05行、第07行和第09行代码输出的结果来看,对Boolean值、0和1的逻辑NOT运算返回值与预期是一致的;

从第11行、第13行和第15行代码输出的结果来看,对原始值null、NaN和undefined的逻辑NOT运算返回值均为true;

从第17行代码输出的结果来看,对象类型的逻辑NOT运算的返回值为false。

以上就是对逻辑NOT运算符(!)的测试,读者可以对比参考前面介绍的逻辑AND运算符(&&)和逻辑OR运算符(||)来进行学习,加深对逻辑运算符的理解,以便耿活应用。