JavaScript系列文章:自动类型转换

jerry_yang 8年前
   <p>我们都知道,JavaScript是类型松散型语言,在声明一个变量时,我们是无法明确声明其类型的,变量的类型是根据其实际值来决定的,而且在运行期间,我们可以随时改变这个变量的值和类型,另外,变量在运行期间参与运算时,在不同的运算环境中,也会进行相应的自动类型转换。</p>    <p>自动类型转换一般是根 <strong>运行环境</strong> 和 <strong>操作符</strong> 联系在一起的,是一种隐式转换,看似难以捉摸,其实是有一定规律性的,大体可以划分为: <strong>转换为字符串类型</strong> 、 <strong>转换为布尔类型</strong> 、 <strong>转换为数字类型</strong> 。今天我们就介绍一下这几种转换机制。</p>    <h2><strong>1. 转换为字符串类型(to string)</strong></h2>    <p>当 <strong>加号“+”作为二元操作符(binary)</strong> 并且 <strong>其中一个操作数为字符串类型</strong> 时,另一个操作数将会被无条件转为字符串类型:</p>    <pre>  <code class="language-javascript">// 基础类型    var foo = 3 + '';            // "3"    var foo = true + '';         // "true"    var foo = undefined + '';    // "undefined"    var foo = null + '';         // "null"      // 复合类型    var foo = [1, 2, 3] + '';    // "1,2,3"    var foo = {} + '';           // "[object Object]"      // 重写valueOf()和toString()    var o = {      valueOf: function() {          return 3;      },      toString: function() {          return 5;      }  };    foo = o + '';                // "3"    o = {      toString: function() {          return 5;      }  };    foo = o + '';                // "5"  </code></pre>    <p>从上面代码中可以看到,对于基础类型,会直接转为与字面量相一致的字符串类型,而对于复合类型,会先试图调用对象的valueOf()方法,如果此方法返回值是引用类型,则再调用此返回值的toString()方法,上面我们定义了一个对象,包含valueOf()和toString()方法,然后和一个空字符串进行运算,可以看得出来,它是调用了valueOf()方法,然后我们重写此对象,将valueOf()移除,也就是不重写object的valueOf()方法,从最后的结果来看,它最终是调用了toString()方法,然后将返回的数字类型5与空字符串进行运算,最终得到一个字符串类型的值。</p>    <h2><strong>2. 转为布尔类型(to boolean)</strong></h2>    <h3><strong>a. 数字转为布尔类型(from number)</strong></h3>    <p>当数字在逻辑环境中执行时,会自动转为布尔类型。 <strong>0和NaN会自动转为false,其余数字都被认为是true</strong> ,代码如下:</p>    <pre>  <code class="language-javascript">// 0和NaN为false,其余均为true    if (0) {      console.log('true');  } else {      console.log('false');    // output: false  }    if (-0) {      console.log('true');  } else {      console.log('false');    // output: false  }    if (NaN) {      console.log('true');  } else {      console.log('false');    // output: false  }    // 其余数字均为true    if (-3) {      console.log('true');    // output: true  } else {      console.log('false');  }      if (3) {      console.log('true');    // output: true  } else {      console.log('false');  }  </code></pre>    <p>从上面的代码中可以看出,非0负值也会被认为是true,这一点需要注意。</p>    <h3><strong>b. 字符串转为布尔类型(from string)</strong></h3>    <p>和数字类似,当字符串在逻辑环境中执行时,也会被转为布尔类型。 <strong>空字符串会被转为false,其它字符串都会转为true</strong> ,代码如下:</p>    <pre>  <code class="language-javascript">// 空字符串为false    if ('') {      console.log('true');  } else {      console.log('false');    // output: false  }    // 其他字符串均为true    if ('0') {      console.log('true');    // output: true  } else {      console.log('false');  }    if ('false') {      console.log('true');    // output: true  } else {      console.log('false');  }  </code></pre>    <h3><strong>c. undefined和null转为布尔类型(from undefined and null)</strong></h3>    <p>当 <strong>undefined和null</strong> 在逻辑环境中执行时, <strong>都被认为是false</strong> ,看下面代码:</p>    <pre>  <code class="language-javascript">// undefined和null都为false    if (undefined) {      console.log('true');  } else {      console.log('false');    // output: false  }      if (null) {      console.log('true');  } else {      console.log('false');    // output: false  }  </code></pre>    <h3><strong>d. 对象转为布尔类型(from object)</strong></h3>    <p>当对象在逻辑环境中执行时,只要当前引用的对象不为空,都会被认为是true。如果一个对象的引用为null,根据上面的介绍,会被转换为false。虽然使用typeof检测null为"object",但它并不是严格意义上的对象类型,只是一个对象空引用的标识。</p>    <p>另外,我们这里的逻辑环境 <strong>不包括比较操作符(==)</strong> ,因为它会根据valueOf()和toString()将对象转为其他类型。</p>    <p>现在我们来看一下对象类型的示例:</p>    <pre>  <code class="language-javascript">// 字面量对象  var o = {      valueOf: function() {          return false;      },      toString: function() {          return false;      }  };    if (o) {      console.log('true');    // output: true  } else {      console.log('false');  }    // 函数  var fn = function() {      return false;  };    if (fn) {      console.log('true');    // output: true  } else {      console.log('false');  }    // 数组  var ary = [];    if (ary) {      console.log('true');    // output: true  } else {      console.log('false');  }    // 正则表达式  var regex = /./;    if (regex) {      console.log('true');    // output: true  } else {      console.log('false');  }  </code></pre>    <p>可以看到,上面的对象都被认为是true,无论内部如何定义,都不会影响最终的结果。</p>    <p>正是由于对象总被认为是true,使用基础类型的包装类时,要特别小心:</p>    <pre>  <code class="language-javascript">// 以下包装对象都被认为是true    if (new Boolean(false)) {      console.log('true');    // output: true  } else {      console.log('false');  }    if (new Number(0)) {      console.log('true');    // output: true  } else {      console.log('false');  }    if (new Number(NaN)) {      console.log('true');    // output: true  } else {      console.log('false');  }    if (new String('')) {      console.log('true');    // output: true  } else {      console.log('false');  }  </code></pre>    <p>根据们上面介绍的,它们对应的基础类型都会被转为false,但使用包装类实例的时候,引擎只会判断其引用是否存在,不会判断内部的值,这一点初学者需要多多注意。当然我们也可以不使用new关键字,而是显示的调用其包装类函数,将这些值转为布尔类型:</p>    <pre>  <code class="language-javascript">if (Boolean(false)) {      console.log('true');  } else {      console.log('false');    // output: false  }    if (Number(0)) {      console.log('true');  } else {      console.log('false');    // output: false  }    if (Number(NaN)) {      console.log('true');  } else {      console.log('false');    // output: false  }    if (String('')) {      console.log('true');  } else {      console.log('false');    // output: false  }  </code></pre>    <p>对于Boolean类,有一个特别需要注意的是,当传入一个字符串时,它不会去解析字符串内部的值,而是做个简单地判断,只要不是空字符串,都会被认为是true:</p>    <pre>  <code class="language-javascript">if (Boolean('false')) {      console.log('true');    // output: true  } else {      console.log('false');  }    if (Boolean('')) {      console.log('true');  } else {      console.log('false');    // output: false  }  </code></pre>    <p>上面介绍了这么多,还有几个例子需要提一下,那就是逻辑非、逻辑与和逻辑或操作符,连用两个逻辑非可以把一个值转为布尔类型,而使用逻辑与和逻辑或时,根据上面的规则,参与运算的值会被转换为相对应的布尔类型:</p>    <pre>  <code class="language-javascript">// 下面几个转为false    var isFalse = !!0;            // false    var isFalse = !!NaN;            // false    var isFalse = !!'';           // false    var isFalse = !!undefined;    // false    var isFalse = !!null;         // false    // 下面都转为true    var isTrue = !!3;             // true    var isTrue = !!-3;            // true    var isTrue = !!'0';           // true    var isTrue = !!{};            // true    // 逻辑与    var foo = 0 && 3;             // 0    var foo = -3 && 3;            // 3    // 逻辑或    var foo = 0 || 3;             // 3    var foo = -3 || 3;            // -3  </code></pre>    <h2><strong>3. 转为数字类型(to number)</strong></h2>    <p>操作数在数字环境中参与运算时,会被转为相对应的数字类型值,其中的转换规则如下:</p>    <p>i. 字符串类型转为数字(from string): 空字符串被转为0,非空字符串中,符合数字规则的会被转换为对应的数字,否则视为NaN</p>    <p>ii. 布尔类型转为数字(from boolean): true被转为1,false被转为0</p>    <p>iii. 对象类型转为数字(from object): valueOf()方法先试图被调用,如果调用返回的结果为基础类型,则再将其转为数字,如果返回结果不是基础类型,则会进一步调用返回值的toString()方法,最后再试图将返回结果转为数字</p>    <p>iv. null被转为0,undefined被转为NaN</p>    <p>一个其他类型的值被转换为数字,跟其参与运算的操作符有很密切的联系,下面我们就来详细介绍:</p>    <p>当 <strong>加号“+”作为一元操作符(unary)</strong> 时,引擎会试图将操作数转换为数字类型,如果转型失败,则会返回NaN,代码如下所示:</p>    <pre>  <code class="language-javascript">var foo = +'';            // 0    var foo = +'3';           // 3    var foo = +'3px';         // NaN    var foo = +false;         // 0    var foo = +true;          // 1    var foo = +null;          // 0    var foo = +undefined;     // NaN  </code></pre>    <p>上面代码中,对于不符合数字规则的字符串,和直接调用Number()函数效果相同,但和parseInt()有些出入:</p>    <pre>  <code class="language-javascript">var foo = Number('3px');      // NaN    var foo = parseInt('3px');    // 3  </code></pre>    <p>可以看出,parseInt对字符串参数比较宽容,只要起始位置符合数字类型标准,就逐个解析,直到遇见非数字字符为止,最后返回已解析的数字部分,转为数字类型。</p>    <p>当 <strong>加号“+”作为二元操作符</strong> 时,我们上面也提到过,如果一个操作数为字符串,则加号“+”作为字符串连接符,但如果两个操作数都不是字符串类型,则会作为加法操作符,执行加法操作,这个时候,其他数据类型也会被转为数字类型:</p>    <pre>  <code class="language-javascript">var foo = true + 1;          // 2    var foo = true + false;      // 1    var foo = true + null;       // 1    var foo = null + 1;          // 1    var foo = null + undefined;  // NaN    var foo = null + NaN;        // NaN  </code></pre>    <p>上面加法运算过程中都出现了类型转换,true转为1,false转为0,null转为0,undefined转为NaN,最后一个例子中,null和NaN运算时,是先转为0,然后参与运算,NaN和任何其他数字类型运算时都会返回NaN,所以最终这个结果还是NaN。</p>    <p>对于undefined转为NaN似乎很好理解,但为什么null会转为0呢?这里也有些历史渊源的,熟悉C的朋友都知道,空指针其实是设计为0值的:</p>    <pre>  <code class="language-javascript">// 空指针的值为0    int *p = NULL;    if (p == 0) {      printf("NULL is 0");    // output: NULL is 0  }  </code></pre>    <p>编程语言的发展是有规律的,语言之间也存在着密切的关联,新的语言总是会沿用老的传统,继而添加一些新的特性。从上面的例子中,我们发现,null被转为0其实很好理解,一点也不奇怪。</p>    <p>另外,我们可别忘了减号“-”操作符,当 <strong>减号“-”作为一元操作符(unary negation)</strong> 时,也会将操作数转换为数字,只不过转换的结果与上面相反, <strong>合法的数字都被转为负值</strong> 。</p>    <p>除加号“+”以外的其他二元操作符,都会将操作数转为数字,字符串也不例外(如果转型失败,则返回NaN继续参与运算):</p>    <pre>  <code class="language-javascript">var foo = '5' - '2';             // 3    var foo = '5' * '2';             // 10    var foo = '5' / '2';           // 2.5    var foo = '5' % '2';             // 1    var foo = '5' << '1';          // 10    var foo = '5' >> '1';          // 2    var foo = '5' ** '2';          // 25      var foo = '5' * true;          // 5    var foo = '5' * null;          // 0    var foo = '5' * undefined;     // NaN    var foo = '5' * NaN;             // NaN  </code></pre>    <p>上面的操作符中,位移和求幂操作符平时用的不多,不过在某些场景下(比如算法中)还是挺实用的。我们都知道,JavaScript中的数字类型都以浮点型存储,这就意味着我们不能想C和Java那样直接求整除结果,而是通过相关的函数进一步处理实现的,如果通过位移可以简化不少,而求幂操作也可以直接通过求幂运算符算出结果,看下面代码:</p>    <pre>  <code class="language-javascript">// 浮点型运算  var foo = 5 / 2;                // 2.5    // 整除操作  var foo = Math.floor(5 / 2);    // 2    // 向右移一位实现整除  var foo = 5 >> 1;                    // 2    // 求幂函数  var foo = Math.pow(5, 2);       // 25    // 求幂运算  var foo = 5 ** 2;                    // 25  </code></pre>    <p>除了上面的操作符之外,递增和递减操作符也会将操作数转为数字,下面以前缀递增操作符为例:</p>    <pre>  <code class="language-javascript">var foo = '';    ++foo;    // foo: 1      var foo = '3';    ++foo;    // foo: 4      var foo = true;    ++foo;    // foo: 2      var foo = null;    ++foo;    // foo: 1      var foo = undefined;    ++foo;    // foo: NaN      var foo = '3px';    ++foo;    // foo: NaN  </code></pre>    <p>上面就是基本数据类型在数字环境下的转换规则。对于对象类型,同样有一套转换机制,我们上面也提到了,valueOf()方法和toString()方法会在不同的时机被调用,进而返回相应的数据,根据返回值再进行下一步的转换。由于篇幅限制,关于自动类型转换的后续内容,博主安排在下一篇中讲解,敬请期待。</p>    <p><strong>参考资料:</strong></p>    <p><a href="/misc/goto?guid=4959722271482911173" rel="nofollow,noindex">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators</a></p>    <p><a href="/misc/goto?guid=4959722271574704700" rel="nofollow,noindex">http://jibbering.com/faq/notes/type-conversion/</a></p>    <p><a href="/misc/goto?guid=4959722271666432268" rel="nofollow,noindex">http://stackoverflow.com/questions/18808226/why-is-typeof-null-object</a></p>    <p> </p>    <p>来自:http://www.cnblogs.com/liuhe688/p/5918589.html</p>    <p> </p>