JavaScript类型转换

梦里梦外; 2022-04-15 07:17 201阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]

**1.原始值到原始值的转换**

1.原始值转化为布尔值

所有的假值(undefined、null、0、-0、NaN、””)会被转化为 false，其他都会被转为 true。

2.原始值转化为字符串

都相当于 原始值 + “”

注意：null和undefined这两个值没有toSting()方法，但是可以通过+""方法或者通过String()函数转换成字符串。

var a = null+" "
    typeof a   //string
    
    var b = String(null);
    typeof b   //string

x+""相当于 String(x)。

3.原始值转化为数字

+" 66" // 66
    +" 6 7 " // NaN

布尔转数字：true -> 1, false -> 0  
字符串转数字：以数字表示的字符串可以直接会转为字符串，如果字符串头尾有空格会忽略，但是空格在中间，转换结果就是 NaN。

**2.原始值到对象的转换**

null 和 undefined 转对象直接抛异常。  
原始值通过调用 String()、Number()、Boolean()构造函数，转换为他们各自的包装对象。

**3.对象到原始值的转换**

1.对象转化为布尔都为true

2.对象到字符串：

如果对象有 toString() 方法，就调用 toString() 方法。如果该方法返回原始值，就讲这个值转化为字符串。
    如果对象没有 toString() 方法或者 该方法返回的不是原始值，就会调用该对象的 valueOf() 方法。如果存在就调用这个方法，如果返回值是原始值，就转化为字符串。

3.对象到数字

对象转化为数字做了跟对象转化为字符串做了想同的事儿，不同的是后者是先调用 valueOf 方法，如果调用失败或者返回不是原始值，就调用 toString 方法。

4.补充  
一些常用内置对象toString方法和valueOf的转换规则。

toString相关：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]

valueOf相关：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]

**附注：!\[\]转换成!true,但是\[\]转换成0，\[true\]转换成1.\[\]非空就转换成1**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]

**4.==运算符如何进行类型转换**

1.如果一个值是null，另一个值是undefined，则相等

2.如果一个是字符串，另一个值是数字，则把字符串转换成数字，进行比较

3.如果任意值是true，则把true转换成1再进行比较；如果任意值是false，则把false转换成0再进行比较

4.如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的 toString 或者 valueOf 方法。 js 核心内置类，会尝试 valueOf 先于 toString（可以理解为对象优先转换成数字）；例外的是 Date，Date 利用的是 toString 转换。非 js 核心的对象，通过自己的实现中定义的方法转换成原始值。

**5.+运算符如何进行类型转化**

1.如果作为一元运算符就是转化为数字，常常用来将字符串转化为数字

+"2"   //2
    +false   //0

2.如果作为二元运算符就有两种转换方式

*  两边如果有字符串，另一边一会转化为字符串进行相加
 *  如果没有字符串，两边都会转化为数字进行相加，对象也根据前面的方法转化为原始值数字。
 *  如果其中的一个操作数是对象,则将对象转换成原始值，日期对象会通过 toString() 方法进行转换，其他对象通过 valueOf（）方法进行转换，但是大多数方法都是不具备可用的 valueOf() 方法，所以还是会通过 toString() 方法执行转换。

流程图如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]

**6.实战分析**

1.[]+[] // ""

\_1. 首先运算符是 + 运算符而且很明显是二元运算符，并且有对象，所以选择最后一点，操作数是对象，将对象转换为原始值。

\_2. 两边对象都是数组，左边的数组先调用 valueOf() 方法无果，然后去调用 toString(), 方法，在 toString() 的转化规则里面有『将数组转化为字符串，用逗号分隔』，由于没有其他元素，所以直接是空字符串 “”。

\_3. 因为加号有一边是字符串了，所以另外一边也转为 字符串，所以两边都是空字符串 “”。

\_4. 所以加起来也是空字符串 “”。

(! + [] + [] + ![]).length // 9

\_1. 首先我们会看到挺多一元运算符，「+」、「！」，对于一元运算符是右结合性，所以可以画出以下运算顺序。

![在这里插入图片描述][20181123003528881.png]

\_2. 对于+\[\]，数组是会被转化为数字的而不是字符串，可见「+ 运算符如何进行类型转化」的第一条，所以经过第一步就会转化为

(!0 + \[\] + “false”).length

\_3. 第二步比较简单，0 转化为布尔值就是 false，所以经过第二步就转化为

(true + \[\] + “false”).length

\_4. 第三步中间的 \[\]会转为空字符串，在「+ 运算符如何进行类型转化」第二条的第三点，对象会被转转化为原始值，就是空字符，所以经过第三步之后就会变成

(“true” + “false”).length

\_5. 第五步就比较简单啦，最终就是

附录：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 5]

参考文章：[https://www.imooc.com/article/253958][https_www.imooc.com_article_253958]

--------------------

**下面是一些补充：**

**1.对数据类型有期待的语句和表达式：**

1、期待boolean类型的 ： if 语句 、 do while 语句 、 while do 语句 、 && || ！ （与或非逻辑表达式） 、 ? : （ 三目运算符）

2、期待number类型的 ： + - \* / % （算数运算符） 、 ++ – （增量/减量运算符） 、 > 、 >= 、 < 、 <= 数字比较

3、期待字符串的： + （字符串连接） 、 > 、 >= 、 < 、 <= 字母排序比较

4、特殊的 : == 、 != (不)相等运算符，在检测两个操作数是否相等时，会进行类型转换；（注意 ： === 、!== 是（不）严格相等运算符，是不会进行类型转换的）

需要说明的是，1中当然可以传入表达式，但是表达式返回的结果也肯定会返回boolean类型的值，或者返回值被转换为boolean；2和3有一些重复的运算符 ： + 、 > 、 >= 、 < 、 <= ，这些运算符在不同场景下发生自动转换的时候，会有不同的优先级。

有如下场景：

1 + 1   // 2  
    '1' + '1'  // '11' 
    '1' + 1   // "11"
    '1' + null   //  "1null"
    '1' + {}   //  "1[object Object]"
    '1' + new Date()  //  "1Wed Jun 20 2018 11:49:55 GMT+0800 (中国标准时间)"
    1 + {}   // "1[object Object]"
    1 + new Date()  //  "1Wed Jun 20 2018 11:56:56 GMT+0800 (中国标准时间)"
    1 + []   //  "1"
    1 + null  // 1

从例子中可以看到，+ 的转换其实是优先转换为字符串的，如果有一个操作数是对象的话，会转化为原始值（除了Date对象是调用toString()方式转换 ， 其他对象都会调用 valueOf() 进行转换 ， 但是由于多数对象只是简单的继承了valueOf() , 只会返回对象，而不是一个原始值，所以会再调用toString进行转换） ， 所以这里可以简单的理解为：都会转换为字符串 。 另一个操作数也会转换为字符串.

**“+”还有特殊的用法，就是转换为数字，如下。**

+ null   //  0
    + undefined  //  NaN
    + {}  //  NaN
    + new Date()  //  1529467646682
    + ["5"]  //  5
    + "4"  //  4
    
    +{}   //NaN
    +[]   //0

**> 、 >= 、 < 、 <= 这些比较运算符的规则和 + 类似，不过是会优先转换为数字进行比较。**

// 作用 ： 比较数值大小或者再字母表中的位置。也是期待数字和字符串！
    1、两个操作数中只要有一个不是字符串，则两个值都转为数字 
    "3" > "11"    //  true   字符串比较
    3 > "11"      // false   11 转换为数字　
    true > '0'    // true true 和 ‘0’ 都转换为数字 
    2、对象同样会转换为原始值（不过这里的Date对象也是优先调用valueOf ,返回的是毫秒数，其他的和上述 + 的一样），如果转换后有一个字不是字符串，则两个值也都需要转换为数字    
    
    1000 > new Date()  // false
    100000000000000000000000 > new Date()  //  true   date对象转换为数字
    "100000000000000000000000" > new Date()  //  true  左值也随着 date对象一起转换为数字
    '11' > ["3"]  //  false  数组转为字符串，所以这里是字符串比较

还可以查看：  
[https://www.imooc.com/article/39977][https_www.imooc.com_article_39977]  
[https://www.imooc.com/article/38254][https_www.imooc.com_article_38254]  
[https://www.imooc.com/article/37556][https_www.imooc.com_article_37556]  
[https://www.imooc.com/article/72694][https_www.imooc.com_article_72694]  
[https://www.imooc.com/article/263737][https_www.imooc.com_article_263737]  
[https://www.imooc.com/article/75329][https_www.imooc.com_article_75329]

[https://www.imooc.com/article/40069][https_www.imooc.com_article_40069]  
[https://www.imooc.com/article/39970][https_www.imooc.com_article_39970]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220415/3359158437a24a01a5ee7a32257386c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20220415/a28920d78cdf4608a658dac852ec8009.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]: /images/20220415/7b9bf600e6e7414287839a11c1c27017.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]: /images/20220415/f32d74cbbf654178877f020c98df4b1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]: /images/20220415/62a7123e96c84553a836e35e1444b05b.png
[20181123003528881.png]: /images/20220415/8e93d9051f2f45a1987431bfe3c3b748.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 5]: /images/20220415/3db99fa9b3124a1e95e6c09ec170e698.png
[https_www.imooc.com_article_253958]: https://www.imooc.com/article/253958
[https_www.imooc.com_article_39977]: https://www.imooc.com/article/39977
[https_www.imooc.com_article_38254]: https://www.imooc.com/article/38254
[https_www.imooc.com_article_37556]: https://www.imooc.com/article/37556
[https_www.imooc.com_article_72694]: https://www.imooc.com/article/72694
[https_www.imooc.com_article_263737]: https://www.imooc.com/article/263737
[https_www.imooc.com_article_75329]: https://www.imooc.com/article/75329
[https_www.imooc.com_article_40069]: https://www.imooc.com/article/40069
[https_www.imooc.com_article_39970]: https://www.imooc.com/article/39970