typeof里的满城风雨

前言

  JavaScript是一门弱类型（或许是编程）脚本 语言，因此JavaScript在声明变量时无需确定变量的类型，JavaScript在运行时会自动判断该变量属于什么类型。那么问题来了，JavaScript是依据什么来判断一个变量的类型呢？
答：JavaScript提供了typeof操作符，用来检测并返回一个变量的类型（返回值为String型，下文有详细解释）。

typeof 操作符

   typeof 是一个运算符，在使用过程中有2种使用不同的表现方式，其结果是一样的，根据自己的习惯选择表现方式即可。① typeof( 表达式、变量名或者是固定值 ) ；② typeof 变量名；第一种是对表达式、变量或固定值做运算，看起来比较有归属感；第二种主要是对变量做运算会方便一些。

typeof 操作符的返回值

在我们现在使用的JavaScript中typeof 可以返回以下 六种 数据类型，返回值类型为字符串：

• ‘undefined’ ——> 未定义的变量或值（没有声明的变量或者是声明但没有赋值的变量）
• ‘boolean’ ——> 布尔类型的变量或值
• ‘string’ ——> 字符串类型的变量或值
• ‘number’ ——> 数字类型的变量或值
• ‘object’ ——> 引用类型的变量或值，或者null（null最早是用来为空对象占位的，属于历史遗留问题；）
• ‘function’ ——> 函数类型的变量或值

拓展： typeof 在 ES 旧版本中的返回值除了以上六种外还有symbol 一共有七种; symbol 在此不再赘述，感兴趣同学可以自行查找相关资料。

typeof 操作符示例

<!--上述展示效果的详细代码-->
<script>
    console.log("1.a=> " + typeof( a ));

    var b ;
    console.log("2.b=> " + typeof( b ));

    var c = 123 ;
    console.log("3.c=> " + typeof( c ));

    var d = "abc" ;
    console.log("4.d=> " + typeof( d ));

    var e = true ;
    console.log("5e.=> " + typeof( e ));

    var f = [1,'a',undefined] ;
    console.log("6.f=> " + typeof( f ));

    var f1 = {
        firstName : 'sanFeng' ,
        lastName : 'Zhang',
        gender : 'male',
        age : 26 
    } ;
    console.log("7.f1=> " + typeof( f1 ));

    var f2 = null ;
    console.log("6.f2=> " + typeof( f2 ));

    var g = function abc(){  } ;
    console.log("9.g=> " + typeof( g ));

    console.log("10.typeof( c )=> " + typeof( typeof( c ) ));
</script>

注意： 综上所述 typeof 操作符对于判断对象的类型都会返回’object’，考虑到看到此文的同学可能有些需要判断某个实例是否为该对象的实例，那么此时就需要用到 instanceof 操作符，关于 instanceof 操作符的相关用法在后续的博文中会择机记录，记录完毕酌情考虑在此放一个关联链接。

typeof 类型转换

1.显式转换

1. Number() ; 转换对象被强制转换成数字类型并被返回，如果转不成有效数字就返回NaN ( not a number ) ;

console.log(typeof(NaN));     // 'number'

console.log(Number('123'));      //123
console.log(Number('123abc'));     //NaN
 console.log(Number('abc'));     //NaN
console.log(Number(true));      //1
console.log(Number(false));     //0
console.log(Number(''));       //0
console.log(Number(null));     //0
console.log(Number(undefined));     //NaN
console.log(Number('-1'));     //-1

2. parseInt() ; 有俩种功能分别是：取整和进制转换；

<script>
    // ①被转换对象强制转换成整数,数据类型为number型；如果转换不成有效数据就返回NaN ;返回值类型为number (到非数字位截断不四舍五入)
    console.log(parseInt('123.236'));   //123
    console.log(parseInt('12a.236'));   //12
    console.log(parseInt('a23.236'));   //NaN
    console.log(parseInt( 123.456 ));   //123
    // ②以目标基底为准转换为十进制数字 parseInt( mix , radix )   radix取值范围为：2——32
    var a = 1010110 ,
        b = 02 ;
    
    console.log(parseInt( a , 2 ));   //86  告诉程序这个变量a是二进制的需要转换成十进制；
    console.log(parseInt( b , 16 ));  //2   告诉程序这个变量b是十六进制的需要转换成十进制；
</script>

3. parseFloat() ; 被转换对象强制转换成浮点数，如果转换不成有效数字返回NaN ;返回值类型为number ;

<script>
    console.log(parseFloat( 123 ));       //123  
    console.log(parseFloat( 123.235 ));   //123.235
    console.log(parseFloat( '123.a' ));   //123
    console.log(parseFloat( '123.12' ));  //123.12
    console.log(parseFloat( 'a23.12' ));  //NaN
</script>

4. String(mix) ; 被转换对象强制转换成字符串类型，属于碰瓷队员，只要经过它就是字符串了；

<script>
    console.log(String( 123 ));         //123
    console.log(String( true ));        //true
    console.log(String( null ));        //null
    console.log(String( undefined ));   //undefined
</script>

5. toString() ; 转换成字符串或者是把十进制数字转换成其他进制，详见代码；

<script>
    //①变量.toString(),就可以把目标变量转换成字符串，注意：null和undefined不可以使用tostring()方法，否则会报错。
    var a = 1256 ,
        b = true ,
        c = null ,
        d = undefined ;

    console.log(a.toString());   //1256
    console.log(b.toString());   //true
    //console.log(c.toString());   //Uncaught TypeError: Cannot read property 'toString' of null
    //console.log(d.toString());   //Uncaught TypeError: Cannot read property 'toString' of undefined
    //②变量.toString(radix);把十进制数字转成目标进制的数字；必须是数字类型，否则只是转换成了字符串了；
    var num = 86 ,
        string = '123' ,
        str = 'abc',
        blo = true
    console.log(num.toString(2));   //1010110   把十进制数字86转成成2进制；
    console.log(string.toString(2));   //123   
    console.log(str.toString(2));   //abc   
    console.log(blo.toString(2));   //true   
</script>

6. Boolean() ; 布尔类型转换，非真既假；

<script>
    console.log(Boolean(2));   //true
    console.log(Boolean('2'));   //true
    console.log(Boolean("a"));   //true
    console.log(Boolean(''));   //false
    console.log(Boolean(null));   //false
    console.log(Boolean(undefined));   //false
    console.log(Boolean(true));   //true
    console.log(Boolean(false));   //false
</script>

2.隐式转换

1. isNaN() ;是不是一个数字（这个说法比较晦涩，说白了就是判断是否是非数即不是数字，不是数字就返回true否则返回false），如果是数字类型的就返回false，如果不是一个数子类型的就返回true；
   隐式类型转换规则：在isNaN( ) 的运算过程中括号里首先条调取的是Number( )函数，如果合法的数字模式就返回false如果不能转换成一个合法的数字的话就返回true；

<script>
    //隐式类型转换；
    console.log(isNaN(123));    //false
    console.log(isNaN("abc"));  //true   因为它转换的结果就不是数字类型的
    console.log(isNaN(undefined));  //true
    console.log(isNaN(null));   //false
    console.log(isNaN(true));  //false   因为布尔值在调用Number()函数后会返回 0 和 1
    console.log(isNaN(false));  //false
    console.log(isNaN(NaN));    //true
</script>

2. 和数学符号+、-号相关的带有隐式类型转换的符号；
   ①++ 自增；②- - 自减；③+ 数学符号正号；④- 数学符号负号；
   隐式类型转换规则：开始做运算最先也是隐式的调用Number()；

<script>
    var snum = "123";
    snum++;
    console.log(snum + " : " + typeof(snum)); //124 : number

    var tstr = "abc";
    tstr++;
    console.log(tstr + " : " + typeof(tstr)); // NaN : number

    var astr = +"abc";
    console.log(astr + " : " + typeof(astr)); //NaN : number
    
    //即使转换不成number类型的数字，但是它的类型也已经变成number类型的NaN了。 
</script>

3. 字符串连接符号+（注意：作为字符串连接租用的时候不读作加号）
   隐式类型转换规则：在开始运算时最先内部隐式调用的是String()，当字符串连接符号两侧有一个是字符串类型时，那就会调用String()把两个都变成字符串。

<script>
    var str = "a" + 1;
    console.log(str + " : " + typeof(str)); //a1 : string

    var str1 = "1" + 1;
    console.log(str1 + " : " + typeof(str1)); //11 : string

    var str2 = 2 +"1" + 1;
    console.log(str2 + " : " + typeof(str2)); //211 : string
</script>

4. 运算符 - 减号，* 乘号，/ 除号，% 模号
   隐式类型转换规则：在开始运算时最先内部隐式调用的是Number()，如果转不成数字类型的就返回NaN。

<script>
    var mul  = "1" * 1;
    console.log(mul + " : " + typeof(mul));   // 1 : number

    var nmul  = "a" * 1;
    console.log(nmul + " : " + typeof(nmul));   // NaN : number
</script>

5. 运算符 > 大于号，< 小于号， <= 小于等于号 , >= 大于等于号 , == 等于号
   隐式类型转换规则：在开始运算时首先要对符号俩边的类型进行统一（优先转换位数字类型）再进行对比，如果是有一端是数字那么就会尝试将另一端也转成数字格式再进行对比，如果是字符串参与运算那么对比的就是ASC编码；字符串对比从第一位的起到分出胜负位为准；最后都是返回布尔值；

<script>
    var a = "3" > 2;
    console.log(a +":" + typeof(a));    //true:boolean

    var b = "a" > 2;
    console.log(b +":" + typeof(b));    //false:boolean

    var c = "前" > "后";
    console.log(c +":" + typeof(c));    //false:boolean

    var d = "121" > "021";
    console.log(d +":" + typeof(d));    //true:boolean

    var e = "201" > "278";
    console.log(e +":" + typeof(e));    //false:boolean

    var f = undefined == null;
    console.log(f +":" + typeof(f));    //true:boolean

    var g = NaN == NaN;
    console.log(g +":" + typeof(g));    //false:boolean
</script>

点拨：隐式转换类型通过一系类看似复杂的转换之后最终分别转换成了数字类型、字符串类型和布尔类型三种；

提示：① === 全等于号对比的是类型和值都相等了才会返回true，对比的过程中不会自动进行隐式类型转换；② 关于未声明的变量使用报错问题，未声明变量放在typeof()里不会报错，会输出‘undefined’；

附件：ASCII表