前言

javaScript是一门可以自由进行数据类型转换的编程语言,类型转换是javaScript很重要的特色(坑点很多!!!),大家想以后写出更多严谨的代码(少出一些莫名其妙的Bug),还是需要好好掌握这个基础知识,下面我跟大家一起来探讨下JS的类型转换。

类型介绍

我们都知道JS的数据类型总共分为两大类原始类型对象类型
原始类型有 Null、Undefined、 Boolean、 String、 Number、 Symbol(ES6)。
对象类型有 Object
关于这些数据类型的定义和介绍,网络上已经有很多的相关知识,这里就不再说了,给小伙伴推荐一个最权威的文档 http://www.ecma-international...

类型转换

  1. Null 和 Undefined
    Null表示一个空对象。但是空对象也是一个对象,所以typeof null === 'object'
    Undefined表示声明一个变量,但是却还没有赋值。
    如果有其他类型想转换为Undefined或者Null类型,直接赋值就可以了。

    var num = 10;  
        console.log(typeof num) // "number"
        num = undefined;
        console.log(typeof num) // "undefined"

    没啥好说的

  2. Boolean
    Boolean类型是一个基本的类型,其他类型转换为Boolean类型规范如下
    clipboard.png
    链接地址: http://www.ecma-international...

    下面我总结了一些需要用到转换为boolean类型的场景

    A. 强转为Boolean

    var a = Boolean(1)  // typeof a => 'boolean', a=> true
    var b = Boolean(null) // b => false
    var d = new Boolean(false) // typeof d => 'object', new Boolean 返回的是Object, 请注意Boolean 和 new Boolean的区别

    B. ! ! 隐式转换
    ! 会对数据进行Boolean的隐式转换,规则如上表格。
    举个例子

    var a = !0 // a => true , 0的boolean为false,!进行取反, 于是a => true

    在开发中, 我们通过 ! ! 来获取变量的boolean值

    C. if 判断
    if 是一个很常见的判断逻辑,当我们使用if去进行逻辑判断的时候,javaScript首先会获取数据的boolean值,规则如上表格, 然后再进行判断

    if (0) {console.log(true)} else {console.log(false)} // 打印false
    
    if ([]) {console.log('array')} // 打印 array  
    
    if ({}) {console.log('object')} //  打印 object
    
    if ('') {console.log(true)} else { console.log(false)} // 打印 false
  3. Number
    Number类型是一个基本的类型,其他类型转换为Number类型规范如下

    clipboard.png
    链接地址: http://www.ecma-international...
    除了String和Object外, 其他类型转为Number类型都好理解。
    对于理解String与Object转Number类型,有几点个人的的心得,希望对大家有所帮助 (PS: 如果大家有时间的话,还是好好研究官方的规范。)

    一. 0个空格(即'')或者多个空格(' '),返回结果是0
    二. 把字符串左右两边的("或者')和空格都拿掉,如果这是一个数字类型,说明此字符能转化为Number类型,否则返回NaN
    三. 对象类型,首先调用valueof方法,返回基本类型的话,就执行上表格中的转换规则。否则,就调用toString方法,对返回的字符执行上表格中的转换规则

    示例如下:

    +null // => 0。  +、- 都能隐式的把数据类型转为Number类型 
    +'' // => 0。
    +true // => 1。  
    +'0x12' // => 18。   0x12为16进制数
    +'1.2e2'  // =>120。  1.2e2为科学计数法  
    +'a' // => NaN。
    +[] // => 0。 [].valueOf是[], [].toString() => '', +''=> 0
    +['22'] // => 22. ['22'].toString() => '22', +'22' => 22

    留一个思考题。+Date() => NaN, +new Date() => 1518332170387能拿到时间戳。大家可以想一下为什么?

  4. String
    String类型是一个基本的类型,其他类型转换为String类型规范如下
    clipboard.png
    链接地址: http://www.ecma-international...
    其他类型在转为为String类型时候,规则应该是很简单明确,这里补充一些的注意事项
    一. + 左右两边只要有一边是字符串,另外一边就会按照上表格的规则把转为字符串,然后合并返回。

    '1' + 1 // => '11'
    undefined + 'a' // => 'undefineda'
    '时间' + new Date() // => '时间Sun Feb 11 2018 15:15:42 GMT+0800 (CST)', new Date().toString() => Sun Feb 11 2018 15:15:42 GMT+0800 (CST)

    二. 数字类型转换为字符串默认是10进制

    var a = 0x15; console.log(a.toString()) //=> '21'
    1.2e2 + '10' // => "12010", 1.2e2 => 120, 120 + '10'=> '12010'
  5. Object
    Object是一个对象类型,所以其他类型转化为Object通常都是new......。
    下面是<<javaScript权威指南>>中提供的转换方式
    clipboard.png
    不多说了......


火星田园犬
933 声望685 粉丝

小心驾驶, 专业埋雷