一文让你彻底记住js的隐式转化

之前写过一篇文章[[js让人诟病的这些feature]]中提出过一个疑问.

这个问题一开始我想简单了.认为只要记住一些特性就可以了.所以直接用穷举法来进行规律的总结.

但是当遇到console.log(Number([])) 的结果是0, 而console.log(Number([1, 2])) 的结果是NaN.都什么乱七八糟的,里面必有蹊跷.虽然能够强背背下来, 但是作为一个有追求的程序员还是要弄明白它是怎么一回事的.

console.log({} - {}) // NaN
console.log([] - []) // 0
console.log([] - [1, 2]) // NaN
console.log([] == ![]) // true
console.log({} == {}) // false
复制代码

要理解上面打印的结果,就是要理解Number([]) 的值,Number([1, 2])的值, Number({})的值, 以及Boolean([])返回的值. 下面慢慢说道.

一、包装类

Boolean()

Boolean只有两种结果,true和false.

• Boolean结果为false的类型,我们通常称他为 falsey, 中文叫虚值. 这些值在 [[[js让人诟病的这些feature]] 有所提及,即,

0、null、undefined、false、''、NaN

有些文章把-0和+0算成两个

上面这些都是原始值转原始值.其他的都是true

如果是引用值转原始值都为true. 还有下面这些一时间想不起来的引用类型.

Boolean(/d/)
Boolean(new Error())
console.log(Boolean(Symbol()))
复制代码

扩展

还有一种容易弄混的typeof 返回结果, node环境中:

console.log(typeof Date())
console.log(typeof new Date()) 
console.log(Date()) // Thu Jan 13 202l2 22:29:36 GMT+0800 (中国标准时间)
console.log(new Date()) // 2022-01-13T14:29:36.660Z
复制代码

Number()

引用类型转换Number

易错点出现在Number() 上面. 尤其是引用类型转化为原始类型. 了解了这个,开头的例子就能够理解了.

我们只有在知道了Number(引用类型)的规则才能够判断引用类型转化为原始类型的结果什么,不然是不可能判断得出的饿,靠猜走不远.

1. 我们假设有如下这么一个对象

const obj = {
  toString() {
    return 2	
  },
  valueOf() {
    return 1	
  }
}
复制代码

2. 我们Number()包裹它

console.log(Number(obj))
复制代码

打印出的结果是1. 哦,有意思的来了,

consot obj = {
  toString() {
    return 2	
  },
  valueOf() {
    return {}
  }
}
console.log(Number(obj)) // 2
复制代码

让我们让valueOf 返回的值是对象的时候, 打印出 2 , 反之则直接打印出String原始值,再转化为number类型.

一般来说valueof 就是代表值,没有意义,也不用处理. 值是什么就是什么,比如说[1, 2, 3].valueOf() 直接打印就是[1, 2, 3].

我们也可以通过这个方法来解决[[让 a == 1 && a == 2 && a == 3 成立]]的问题.

所以我们很容易得出这么一个规律: 当valueOf 返回值是引用类型的时候, 就去拿toString 返回的值. 展开来说就是:

1. 如果valueOf返回原始值,就Number包装之后返回
2. 如果valueOf返回的对象,就去toString()方法中找
3. 如果toString() 返回原始值,就Number包装之后返回
4. 如果toString()返回的是对象,且是自己重写的.那么就直接报错
5. 如果不是充血的,那么就调用Obejct.prototye.toString方法

这里显然还涉及到了[[原型链]]的问题,所以说其实隐式转化的问题不是想象中的那么简单的.

而我们创建的对象基本没讲过会创建这两个方法.所以它很显然就是继承至Object上面的方法. 也就是说,我们在研究这个问题的是,就是在研究Object.prototype.toString.call() 返回的值.

console.log(Object.prototype.tostring.call('123'));

console.log(Object.prototype.toString.call(123));

console.log(object.prototype.tostring.call(true));

console.log(Object.prototype.tostring.call(undefined));

console.log(Object.prototype.tostring.call(null));

console.log(Object.prototype.tostring.call(function){}));

console.log(Object.prototype.toString.call([1,2,3]));

console.log(Object.prototype.tostring.call(ff));
复制代码

打印的结果如下:

[object string]
[object Number]
[object Boolean]
[object Undefined]
[object Null]
[object Functionl]
[object Arrayl]
[object objectl]
复制代码

原始类型转Number

console.log(Number(undefined)) // NaN
console.log(Number (null)) // 0
console.log(Number(true)) // 1
console.log(Number (false)) // 0
console.log(Number(NaN)) // NaN
console.1og(Number (Infinity))// Infinity
console.log(Number('') // 0
console.log(Number(' ') // 0
console.log(Number('123')) // 123
复制代码

上面没啥好说的, 背下就行. 需要注意的是Number的值,除了我们平时使用的的数字意义之外,还有NaN、Infinity.

还有这些混淆点是需要注意的:

console.log((123).toString()) // 123
console.log(undefined.toString()) // 报错
console.log(nul.toString()) // 报错
复制代码

undefined 和 null 没有包装类, 本身又是基础类型 ,自然没有其他乱码七糟的方法. 所以报错.

扩展

Argument和document

console.log(Object.toString.call(argument)) // [object Argument]
console.log(Object.toString.call(document)) // [object HTMLDocument]
复制代码

HTMLDocument是浏览器给我们提供的对象类型.

由此也可以得知Object.prototype.toString 方法的运用之广, 识别类型之多, 比起typeof 简陋的返回值强大得多. 当然每个都有每个使用的场景就是了.

手写typeof

typeof是jscore自带,而且也不是语法糖. 我一开始看到这个面试题的时候是懵逼的. 难道要手写typeof的引擎代码? 解释一下从js第一个版本就存在的typeof null为object吗?

但是还真有公司考这个, 有点睿智,大聪明. 所以我看了看网上别人对于这的解析... 就是利用Object.prototype.toString.call()返回的结果,在进行字符串的切割,之后后面那个单词返回出去.

就这? 脱裤子放屁,多此一举.

Number转化非二进制

Number(0xfff) // 4095
Number(070) // 56
复制代码

Number可以直接识别不同位数转化成十进制.

parseInt和Number关系

Number('123abc') // NaN
Number('ad123') // NaN
Number('  123') // 123
复制代码

而[[parseInt]]就很好的解决了这个问题,它可以说是对于Number()很好的一个补充

parseInt('123abc') // 123
parseInt('123asd1') // 123
parseInt('ad123') // NaN
parseInt('  123') // 123
复制代码

String()

Object.prototype.toString

对于String()的使用依旧使用Number()使用的例子

const obj = {
  toString() {
    return 2	
  },
  valueOf() {
    return 1	
  }
}
复制代码

当我触发String(obj)的时候,就和Number()完全相反.

console.log(String(obj)) // 2
复制代码

直接访问的是toString()方法.

const obj = {
  toString() {
    return {}
  },
  valueOf() {
    return 1	
  }
}

console.log(String(obj)) // 1
复制代码

但是如果toString() 返回的是引用类型的话, 就往valueOf()方法上面找. 可以说和Number()的完全相反,但是也符合情理 .

通过重写toString()和valueOf()的方法来了解内部的运行规则是一种很好的方式.

如果不重写的话,Object.prototype.toString.call(对象), 返回值参看Number()部分的内容.

console.log(String({})) // [object Object]
复制代码

Array.prototype.toString

这个记忆上没啥好说的, 直接把外面的[]给拆了就行.

console.log(String([1])) // '1'
console.log(String([1, 2])) // '1, 2'
console.log(Array.prototype.toString.call([1])) // '1'
console.log(Array.prototype.toString.call([1, 2])) // '1, 2'
复制代码

二、隐式转化触发规则

前面说了显示转化的规律. 下面是能够触发隐式转化的规则.

和运算符规则是和[[运算符的优先级]],在这里不提,可自行查阅.

布尔的隐式转化

当出现判断的时候,会出现隐式转化.

if,
switch,
while,
for(; ;),
&&,
||,
!,
!!,
? : 三元
复制代码

number的隐式转化

只要有小学的知识都知道运算符,它是用于数字之间的计算的.在JavaScript中也是基本是一样的.

+ - * % == ~~ & | ~ ^ << <<< 等, 位运算符 、算术运算符

隐式转化最难的情况

== !== >= <= < >

如下例子, 也是面试的高频题目,背下来之余,还是要知道得到这样结果的过程.

console.log([] == ![]) // true
复制代码

个人觉得隐式转化最复杂的就是这个例子了.再复杂大不了加上优先级. 回到这个例子中, 看似比较的是两个数组,或者说两个特殊对象.其实不全是.来解析这个例子:

1. 看到 等号 这个比较运算法就应该明白 等号 两边都要转化成Number类型
2. 从左到右的话,Number([]), [] 是引用类型,无法直接拿到原始值
3. valueOf拿不到值,就走Array.prototype.toString.call([]).从上面可以知道, 它返回的是去掉[],即字符串''.
4. 此时左边为Number(''). 所以左边返回的自然是0.

此时这个题目为0 == ![]. 接下来右边的转化,这就简单了.

1. 在Boolean()一节当中,就可以知道,除了falsey之外,其他都是ture.而此时在!的加持下,[]会进行Boolean()
2. 此时右边为true. !true就为false
3. Number(false)的结果为0

由上而得出 0 == 0 的结果为true.运用上面的知识点可以很好的解析问题,下面的这个例子就更加简单了.

console.log({} == {}) // false
console.log({} != {})
复制代码

如果按照一样的分析方式来解释的话:

1. 两边都Number()包裹住.
2. toString()之后都是[obejct Object]
3. Number('[obejct Object]') 为NaN
4. 所以最后转化为console.log(NaN == NaN)的比较

NaN和任何一个值比较都不想等

题目不难,但是综合的东西还是有一点的. 这两题解决了,隐式转化的问题也就到头了

三、特殊情况

最容易记住的就是字符串运算符.

console.log(1 + '2' + '2') // '122'
console.log(1 + + '2' + '2') // '32'
console.log('A' - 'B' + '2') // 'NaN2'
console.log('A' - 'B' + 2) // NaN
复制代码

js 字符串和任何数据类型想加都转化为字符串么?可以这么说,处理symbol类型直接报错之外.

console.log(typeof (+ '2')) // number
复制代码

还有下面undfined和null的特殊情况

console.log(undefined == null) // true
console.log(NaN == NaN) // fasle
复制代码

• NaN的语意是not a number,很明显了,指的就不是一个数字
• NaN在typeof中是number类型,但是它和任何数都不想.

四、工作不要使用

2022年了,我们只需要了解==的运行机制就够了. 都这个年份了,不需要在重申工作中使用==还是===的问题了吧