zoukankan      html  css  js  c++  java
  • 你不知道的JavaScript--Item3 隐式强制转换

    JavaScript的数据类型分为六种,分别为null,undefined,boolean,string,number,object

    object是引用类型,其它的五种是基本类型或者是原始类型。我们可以用typeof方法打印来某个是属于哪个类型的。不同类型的变量比较要先转类型,叫做类型转换,类型转换也叫隐式转换。隐式转换通常发生在运算符加减乘除,等于,还有小于,大于等。。

    typeof '11'  //string       
    typeof(11)  //number
    '11' < 4     //false

    1、基本类型的转换

    下面先讲加减乘除:

    1. 字符串加数字,数字就会转成字符串。

    2. 数字减字符串,字符串转成数字。如果字符串不是纯数字就会转成NaN。字符串减数字也一样。两个字符串相减也先转成数字。

    3. 乘,除,大于,小于跟减的转换也是一样。

    //隐式转换 + - * == / 
    // + 
    10 + '20'    //'2010'
    // -
    10 - '20'    //-10
    10 - 'one'   //NaN
    10 - '100a'  //NaN
    // *
    10*'20'      //200
    '10'*'20'    //200
    // /
    20/'10'      //2
    '20'/'10'    //2
    '20'/'one'  //NaN

    4、加法操作顺序是敏感的

    类似这样的混合表达式有时令人困惑,因为 JavaScript 对操作顺序是敏感的。例如,表达式:

    1+2+"3";  //"33"

    由于加法运算是自左结合的(即左结合律),因此,它等同于下面的表达式:

    (1+2)+"3";  //"33"

    与此相反,表达式:

    1+"2"+3;  //"123"

    的计算结果为字符串“123”。左结合律相当于是将表达式左侧的加法运算包裹在括号中。

    5、再来看看一组 ==

    • 1.undefined等于null

    • 2.字符串和数字比较时,字符串转数字

    • 3.数字为布尔比较时,布尔转数字

    • 4.字符串和布尔比较时,两者转数字

    // ==
    undefined == null;    //true
    '0' == 0;            //true,字符串转数字
    0 == false;           //true,布尔转数字
    '0' == false;       //true,两者转数字
    null == false;       //false
    undefined == false;  //false

    7个false值:false,0,-0,“”,NaN,null以及undefined,所有其他值都是truth

    6、NaN,不是一个数字

    NaN 是一个特殊值,说明某些算术运算(如求负数的平方根)的结果不是数字。方法 parseInt() 和 parseFloat() 在不能解析指定的字符串时就返回这个值。对于一些常规情况下返回有效数字的函数,也可以采用这种方法,用 Number.NaN 说明它的错误情况。

    Math.sqrt(-2)
    Math.log(-1)
    0/0
    parseFloat('foo')

    对于很多JavaScript的初学者来说,它的第一个陷阱是调用typeof时返回结果的通常是你想不到的:

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

    这情情况下,NaN并不意味着是一个数字,它的类型是数字。明白吗?
    因为typeof 返回的是字符串,有六种:“number”、”string”、”boolean”、”object”、”function”、”undefined

    保持冷静,因为下面还有很多混乱的地方。让我们比较两个NaN:

    var x = Math.sqrt(-2);
    var y = Math.log(-1);
    console.log(x == y);      // false

    也许这是因为我们没有使用严格等价(===)操作?显然不是。

    var x = Math.sqrt(-2);
    var y = Math.log(-1);
    console.log(x === y);      // false
    

    直接比较两个NaN呢?

    console.log(NaN === NaN); // false

    因为有很多方法来表示一个非数字,所以一个非数字不会等于另一个为NaN的非数字,它还是有一定道理的。

    但是当然,解决方案现在已经有了。让我们认识一下全局函数isNaN

    console.log(isNaN(NaN));      // true

    唉,不过 isNaN() 也有它自己的很多缺陷呀:

    console.log(isNaN('hello'));  // true
    console.log(isNaN(['x']));    // true
    console.log(isNaN({}));       // true
    

    这样又产生 了很多不同的解决方案。其中一个是利用 了NaN的非反射性质(例如, 看看 Kit Cambridge 的笔记)

    var My = {
      isNaN: function (x) { return x !== x; }
    }

    不过幸运的是,在即将到来的ECMAScript 6中, 有一个Number.isNaN() 方法提供可靠的NaN值检测。
    换句话说,只有在参数是真正的NaN时,才会返回true

    console.log(Number.isNaN(NaN));            // true
    console.log(Number.isNaN(Math.sqrt(-2)));  // true
    console.log(Number.isNaN('hello'));        // false
    console.log(Number.isNaN(['x']));          // false
    console.log(Number.isNaN({}));             // false

    2、引用类型的转换

    基本类型间的比较相对简单。引用类型和基本类型的比较就相对复杂一些,先要把引用类型转成基本类型,再按上述的方法比较。

    1、引用类型转布尔全是true。

    比如空数组,只要是对象就是引用类型,所以[]为true。引用类型转数字或者字符串就要用valueOf()或者toString();对象本身就继承了valuOf()和toString(),还可以自定义valueOf()和toString()。根据不同的对象用继承的valueOf()转成字符串,数字或本身,而对象用toString就一定转为字符串。一般对象默认调用valueOf()。

    1.对象转数字时,调用valueOf();

    2.对象转字符串时,调用toString();

    先看看下面的例子:

    0 == [];        // true, 0 == [].valueOf(); ---> 0 == 0;
    '0' == [];      // false, '0' == [].toString(); ---> '0' == '';
    2 == ['2'];     // true, 2 == ['2'].valueOf(); ---> 2 == '2' ---> 2 == 2;
    '2' == [2];     // true, '2' == [2].toString(); ---> '2' =='2';
    
    [] == ![];      //true, [].valueOf() == !Boolean([]) -> 0 == false ---> 0 == 0;

    对象转成数字时,调用valueOf(),在这之前先调用的是toString();所以我猜valueOf方法是这样的。So上面的例子 0 == []要改成下面更合理。无论如何,[]最后是转成0的。

    var valueOf = function (){
        var str = this.toString();    //先调用toString(),转成字符串
        //...
    }
    0 == [];        // true, 0 == [].valueOf(); -> 0 == '0' -> 0 == 0;

    自定义的valueOf()和toString();

    1. 自定义的valueOf()和toString()都存在,会默认调用valueOf();

    2. 如果只有toString(),则调用toString();

    var a = [1];
    
    a.valueOf = function (){ return 1;}
    a.toString = function (){ return '1';}
    
    a + 1;         // 2, valueOf()先调用

    去掉valueOf()就会调用toString()。

    var a = [1];
    
    a.valueOf = function (){ return 1;}
    a.toString = function (){ return '1';}
    
    a + 1;         // 2, 先调用valueOf()
    //去掉valueOf
    delete a.valueOf;
    a + 1;        // '11', 调用toString()

    如果返回其它会怎么样呢?

    var a = [1];
    
    a.valueOf = function (){return ;}
    a.toString = function (){return 1 ;};
    
    1 - a;        //NaN

    其它对象 调用valueOf()转成不同的类型:

    var a = {};
    a.valueOf();    //Object {}
    var a = [];
    a.valueOf();    //[]    自己本身
    var a = new Date();
    a.valueOf();    //1423812036234  数字
    var a = new RegExp();
    a.valueOf();    //    /(?:)/  正则对象

    引用类型之间的比较是内存地址的比较,不需要进行隐式转换,这里不多说。

    [] == [] //false 地址不一样

    var a = [];
    b = a;
    b == a //true

    2、显式转换

    显式转换比较简单,可以直接用类当作方法直接转换。

    Number([]); //0
    String([]); //”
    Boolean([]); //true

    还有更简单的转换方法。

    3 + ” // 字符串’3’
    +’3’ // 数字3
    !!’3’ // true


    系列文章导航:

    1、你不知道的JavaScript–Item1 严格模式

    2、你不知道的JavaScript–Item2 浮点数精度

    3、你不知道的JavaScript–Item3 隐式强制转换

    4、你不知道的JavaScript–Item4 基本类型和基本包装类型(引用类型)

    5、你不知道的JavaScript–Item5 全局变量

    6、你不知道的JavaScript–Item6 var预解析与函数声明提升(hoist )

    7、你不知道的JavaScript–Item7 函数和(命名)函数表达式

    8、你不知道的JavaScript–Item8 函数,方法,构造函数调用

    9、你不知道的JavaScript–Item9 call(),apply(),bind()与回调

    10、你不知道的JavaScript–Item10 闭包(closure)

    11、你不知道的JavaScript–Item11 arguments对象

    12、你不知道的JavaScript–Item12 undefined 与 null

    13、你不知道的JavaScript–Item13 理解 prototype, getPrototypeOf 和_ proto_

    14、你不知道的JavaScript–Item14 使用prototype的几点注意事项

    15、你不知道的JavaScript–Item15 prototype原型和原型链详解

    16、你不知道的JavaScript–Item16 for 循环和for…in 循环的那点事儿

    17、你不知道的JavaScript–Item17 循环与prototype最后的几点小tips

    18、你不知道的JavaScript–Item18 JScript的Bug与内存管理

    19、你不知道的JavaScript–Item19 执行上下文(execution context)

    20、你不知道的JavaScript–Item20 作用域与作用域链(scope chain)

    21、你不知道的JavaScript–Item21 漂移的this


    持续更新中……………….

    版权声明:本文为小平果原创文章,转载请注明:http://blog.csdn.net/i10630226

  • 相关阅读:
    vue全局变量定义和修改
    vue格式化显示json数据
    javascript cookie 操作
    bootsrap Collapse用法
    django form 的内置字段类型
    django(channel)到 ubuntu
    django 模型操作
    django 单点登录思路-装饰器
    浏览器右下角提示实现
    django websocket
  • 原文地址:https://www.cnblogs.com/dingxiaoyue/p/4948223.html
Copyright © 2011-2022 走看看