2

前言

说好听是说JS灵活, 说不好听就是JS的坑太多, JS类型转换就是一个大坑, JS的类型包括了原始类型的[null, undefined, String ,Number, Boolean],以及对象类型的[function, object];

JavaScript 是一种弱类型(或称动态类型)语言,即变量的类型是不确定的。

x = 5; // 5
x = x + 'A'; // '5A'

上面代码中,变量x起先是一个数值,后来是一个字符串,类型完全由当前的值决定,这就叫弱类型。

JS的数据类型

JavaScript中有五种原始数据类型:Undefined、Null、Boolean、Number以及String。

  1. Undefined数据类型的值只有一个:undefined。
    在JavaScript中,如果函数没有声明返回值,那么会返回undefined。
    如果typeof后面跟一个未定义的参数,也是返回undefined。

    function undefinedA(){}
    undefinedA();//返回undefined
    typeof abc;//变量abc未声明,返回undefined
  2. Null数据类型的值只有一个:null。
    null与undefined的关系:undefined实际上是从null派生出来的。其实所有的js的object对象的父对象都是null。

    undefined == null;//返回true
  3. typeof是一元运算符,后跟变量的名称,用于获取变量的数据类型,其返回值有5个:undefined、boolean、number、string以及object。

转换规则

  1. 转 boolean 规则:
    null, undefined, "", 0, -0, NaN 转换成布尔值是 false, 剩下的全转化 true;

  2. 转 number 规则:

    • string '2.3.1' => NaN;
      非数字形式的,如str,str2.3,2.3.3.3,a+3.2都将会转换成非数字及NaN

    Number('str');//NaN
    Number('2.3.3.3');//NaN
    Number('a+1.2');//NaN
    Number('2.3');//2.3
    • null, '', false, [] => 0;
      null,空字符串,FALSE,空数组,都将会转换成数字0(这个可能在隐式类型转换中看到的比较多)

    Number(null);//0
    Number('');//0
    Number(false);//0
    Number([]);//0
    • undefined => NaN;
      undefined即未定义,转换为非数字

    Number(undefined);//NaN
    • object => x Number(object.toString())
      如果无法从valueOf()方法中获取Primitive值,那么调用object的toString()方法;如果toString()返回的是Primitive值,则将该Primitive值转换成number后返回。(Primitive这个暂时没懂)

    Number([2]);//2
    Number([2,3]);//NaN
    Number({});//NaN
  3. 隐式类型转换 ==

    • 有布尔值则转换为数值

      1 == true;//true
      0 == false;//true
    • 字符串数值,则字符串转换为数值

      '2' == 2;//true

      根据上面两条,可以想到一个很有趣的转换,如下

      !!'2' == true;//true,bool值全转为数字,字符串转数字,数字前加非规则为,非0的都转1
    • 只有一个是对象,则对象会调用toString() valueOf()

      "[object Object]" == {id:1};//true,这里的对象进行调用了toString()方法
      "[object Function]" == {id:1};//false
    • null == undefined

      null == undefined;//true
    • NaN != NaN

      NaN != NaN
    • 对象==,比较内存地址

      var a = {id:1};
      var b = {id:1};
      a == b;//false,对象比较的内存地址

转换函数

  1. 强制转换:parseInt,parseFloat,Number,String,Boolean

    下面的例子如下,以Number为例

    Number(false);//0 
    Number(true);//   1 
    Number(undefined);//   NaN 
    Number(null);//   0 
    Number( "5.5 ");//   5.5 
    Number( "56 ");//   56 
    Number( "5.6.7 ");//   NaN 
    Number(new   Object());//   NaN 
    Number(100);//   100  
  2. 隐式类型转换:==,-,+,*,if,>=,<=,while,for in,alert

    隐式类型转换在比较以及判断,还有做算术运算的时候比较常见

    • 比较运算

    '2' == 2;//true;
    '2' > 0;//true;
    • while,for in, alert运算

    alert(new Boolean(false));//false,转成字符串
    • 算术运算

    '2'+1;//'21'
    1+true;//2
    '2'+true;//'2true'
    '2'-1;//1
    '210'-'10';//100
    '2'*'3';//6

参考

  1. 下表作为参考, 来自js权威指南:

    原始类型和对象类型 转换成String 转换成Number 转换成Boolean 转换成Object
    undefined "undefined" NaN false throws TypeError
    null "null" 0 false throws TypeError
    true "true" 1 new Boolean(true)
    false "false" 0 new Boolean(false)
    ""(empty string) 0 false new String("");Object("")
    "1.2" (nonempty, numeric) 1.2 true new String("1.2");Object("1.2")
    "one" (nonempty, non-numeric) NaN true new String("one");Object("one")
    0 "0" false new Number(0);Object(0)
    -0 "0" false new Number(-0);Object(-0)
    NaN "undefined" false new Number(NaN);Object(NaN)
    Infinity "Infinity" true new Number(Infinity);Object(Infinity)
    -Infinity "-Infinity" true new Number(-Infinity);Object(-Infinity)
    1 (finite, non-zero) "1" true new Number(1);Object(1)
    {} (any object) NaN true
    [] (empty array) "" 0 true
    [9] (1 numeric elt) "9" 9 true
    ['a'] (any other array) use join() method NaN true
    function(){} (any function) "undefined" NaN true

fania
63 声望3 粉丝