JS数据类型转换

[conan1992]

1. 类型转换种类

• 转换成布尔值
• 转换成数字
• 转换成字符串

  2. 转换

  原始值	转换目标	结果
  number	布尔值	除了0、-0、NaN都为true
  string	布尔值	除了空串都为true
  undefined、null	布尔值	false
  引用类型	布尔值	True
  number	字符串	5=》‘5’
  Boolean	字符串	'true'
  数组	字符串	[1,2]=》‘1,2’
  对象	字符串	‘[object Object]’
  string	数字	‘1’=》1，‘a’=> NaN
  数组	数字	空数组为0，存在一个元素且为数字转数字，其他情况为NaN
  null	数字	0
  除了数组的引用类型	数字	NaN
  Symbol	数字	抛错

  注意"Boolean 转字符串"这行结果指的是 true 转字符串的例子 null == 0 => false

  var bool = true
  console.log(bool.toString())// "true"

  3. == 和 ===

  JavaScript 有两种比较方式：严格比较运算符和转换类型比较运算符。对于严格比较运算符（===）来说，仅当两个操作数的类型相同且值相等为 true，而对于被广泛使用的比较运算符（==）来说，会在进行比较之前，将两个操作数转换成相同的类型。对于关系运算符（比如 <=）来说，会先将操作数转为原始值，使它们类型相同，再进行比较运算。

• 严格比较运算符(===) 左右两边不仅值要相等，类型也要相等
• 转换类型比较运算符(==)

  比较操作符会为两个不同类型的操作数转换类型，然后进行严格比较。当两个操作数都是对象时，JavaScript会比较其内部引用，当且仅当他们的引用指向内存中的相同对象（区域）时才相等，即他们在栈内存中的引用地址相同。

4. ==类型转换规则

• 两边的类型是否相同，相同的话就比较值的大小，例如1==2，返回false
• 判断的是否是null和undefined，是的话就返回true
• null 和 undefined是相等的
• 判断的类型是否是String和Number，是的话，把String类型转换成Number，再进行比较
• 判断其中一方是否是Boolean，是的话就把Boolean转换成Number，再进行比较
• 如果其中一方为Object，且另一方为String、Number或者Symbol，会将Object转换成字符串，再进行比较

  console.log({a: 1} == true);//false
  console.log({a: 1} == "[object Object]");//true

  5. 对象转原始类型流程

  对象转原始类型，会调用内置的[ToPrimitive]函数，对于该函数而言，其逻辑如下：

• 如果Symbol.toPrimitive()方法，优先调用再返回
• 调用valueOf()，如果转换为原始类型，则返回
• 调用toString()，如果转换为原始类型，则返回
• 如果都没有返回原始类型，会报错 注：图片截取自MDN

  var obj = {
    value: 1,
    toString(){
      return 2
    },
    valueOf(){
      return 3
    },
    [Symbol.toPrimitive](){
      return 4
    }
  }
  console.log( obj + 1)// 5

  6 运算符的类型转换

• -、*、/、%这四种都会把符号两边转成数字来进行运算
• +由于不仅是数字运算符，还是字符串的连接符，所以分为两种情况：
  • 两端都是数字则进行数字计算(一元正号+b这种情况相当于转换为数字)
  • 有一端是字符串，就会把另一端也转换为字符串进行连接 注意点： (+号对于对象的转换)
• +b的情况就相当于转为数字
• +号两边有值则判断两边值的类型，若两边都为数字则进行数字计算，若有一边是字符串，就会把另一边也转换为字符串进行连接

  var b = {}
  console.log(+b)//NaN
  console.log(b + 1)//“[object object]1”
  console.log(1 + b)//“1[object object]”
  console.log(b + '')//“[object object]”

7. 拓展

• [] == ![]结果是什么？为什么？ 首先右边![]得到布尔值，由于[]作为一个引用类型转换为布尔值为true, 因此![]为false，进而在转换成数字，变为0。左边空数组转换成数字也为0，所以答案为true
• 如何让if(a == 1 && a == 2)条件成立？

  var a = {
    value: 1,
    toString: function(){
      return this.value++
    }
  }
  if(a == 1 && a == 2){
    console.log(true)
  }
  或者
  var a = {
    value: 1,
    valueOf: function(){
      return this.value++
    }
  }
  if(a == 1 && a == 2){
    console.log(true)
  }

• 输出什么？

  console.log({} + [])//"[object object]"
  console.log([2] - [] + function () {})//"2function(){}" 函数是会转换为源代码字符串的。

• 让if(a == 1 && a == 2 && a == 3)条件成立的办法
  • 重写Symbol.primitive或者valueOf或者toString

    var a = {
    value: 0,
    [Symbol.toPrimitive](hint){
    console.log(hint)
    return ++this.value
    }
    }
    if(a == 1 && a == 2 && a == 3){
    console.log("in")
    }

  • 利用数组转为字符串会隐式调用join() 对象如果是数组的话，当我们不重写其toString()方法，在转换为字符串类型的时候，默认实现就是将调用join()方法的返回值作为toString()的返回值

    let a = [1, 2, 3]
    a['join'] = function () {
    return this.shift()
    }
    if (a == 1 && a == 2 && a == 3) {
    console.log('成立')
    }

• 让if (a === 1 && a === 2 && a === 3)条件成立

参考：

• 003: JS数据类型之问——转换篇
• 总结-运算符的类型转换