乐趣区

关于javascript:偷偷运行的逻辑-JavaScript隐式类型转换

jiezi

将写作当成趣味，并始终进行上来。已经这是个小小的奢望，当初曾经在逐渐的实现中。

长话短说，既然是技术文，就不发这么多感叹了，接下来，一起进入明天的正题吧。

明天给大家分享的是 JavaScript 中的隐式类型转换问题。置信很多的小伙伴都曾被它困扰过，不论是开发中还是面试过程中。冀望明天的分享能给你带来不一样的了解。也能让你之后不再为此懊恼。

1. 根本数据类型

咱们都晓得，在 javascript 中一共有 7 中数据类型。别离是 Object, Null, Undefined, String, Number, Boolean, Symbol。这些货色咱们在平时的开发过程中每天无时无刻不在接触，这里咱们不多赘述。

2. 强制类型转换

平时的应用过程中，咱们会遇到很多数据类型不统一的问题，同样，强制将不同的数据类型转换为雷同的数据类型也是很失常的操作；接下来，咱们看看都有什么样的强制转换方法：

2.1 字符串 -> 数字

1. parseInt
parseInt('123') // 123
parseInt('123abc') // 123
parseInt('12.3abc') // 12
parseInt('abc123') // NaN

解释：

此办法只转换 以数字结尾的，直到不是数字，而后转换完结 ，如果字符串不是以数字结尾，则转换为 NaN

2. parseFloat
parseFloat('123') // 123
parseFloat('12.3abc') // 12.3
parseFloat('1.2.3abc') // 1.2
parseFloat('abc1.23') // NaN

解释：

规定同 parseInt，只是留神小数点的转换，只能转换一个小数点，如果是多个小数点，则只保留一个。

3. Number
Number('123') // 123
Number('12.3abc') // NaN
Number('1.2.3abc') // NaN
Number('abc1.23') // NaN

解释：

此办法只转换 全数字 的字符串，如果字符串不是全数字。如 '12.3abc','1.2.3abc','abc1.23'………… 的状况，对立转换为 NaN

4. 位运算

位运算的应用在前端是特地少的，以至于很多前端人员不分明具体应用。上面咱们来看看，如何应用位运算将字符串转换为数字

次要有以下几种操作形式可做转换

  • ~ 非
  • << 左移
  • >> 右移

对于位运算的理论运算形式咱们暂不做形容，本次只看如何应用它们将字符串转为数字 

~~'123'    // 123 (这里是两个 ~~ 波浪线)
'123' << 0 // 123
'123' >> 0 // 123

解释：

应用办法跟 Number 雷同。都是只能转换全数字的字符串。不为全数字的字符串，~ 转换为 NaN，另外两种转换为 0

2.2 数字 -> 字符串

1. 应用 + 运算符。
''+ 123 //'123'
2. 应用 toString 办法 
let num = 123
num.toString() //‘123’
3. 应用 String 办法 
let num = 123
String(num) // '123'

2.3 转换为布尔值

1. !! 办法。（双重否定即为必定。应用双重非能够失去原始值转换的布尔值）
let num = 123
!!num // true

let str = '123'
!!str // true
2. Boolean 办法 
let num = 123
let str = '123'
Boolean(123) // true
Boolean('123') // true

留神：

JavaScript 中为 false 的状况：

  • ''，"" 空字符串
  • 0 数字 0
  • undefined
  • null
  • NaN
  • false

3. 隐式类型转换

3.1 可触发隐式类型转换的操作

  • 四则运算 +, -, *, /

  • 比拟 > < >= <= ==。

    • 留神: === 是不会触发隐式类型转换的。
  • 判断 if, while

3.2 toString 和 valueOf 阐明

此两种办法是将简单数据类型转换为原始值输入。

1. 调用 valueOf 办法后
  • String, Number, Boolean 返回的别离是 字符串值，数字值，布尔值。
  • Object, Array, Function 返回的是本身
  • Date 返回的是从开始到当初的毫秒值
2. 调用 toString 办法后
  • String, Number, Boolean 返回的本别是字符串类型的值
  • Object 返回的是 [object Object]
  • Array 返回的是 空字符串。因为在 Array 中重写了这个办法
  • function 返回的是函数自身的字符串
  • Date 返回的是工夫，并非毫秒数

留神：

在获取原始值（toPrimitive）时，会先调用 valueOf 办法，如果返回的不是原始值 (也就是说返回的不是根本数据类型)，则会持续调用 toString 办法。如果还不是原始值。则会报错。

3.3 具体实例解析

请在查看解析之前尝试解答下方问题 

// 数组
[] == ![]   // 1
[] == []    // 2
[] == false // 3
[] == true  // 4
[1] == 1    // 5
[] == 0     // 6
[12] < [13] // 7

// 对象
{} == {}    // 8
{} == !{}   // 9
{} != {}    // 10

// 联合版
[] + {}     // 11
{} + []     // 12
{} + {}     // 13
[] + []     // 14
{} + 1      // 15
1 + {}      // 16

答案来咯，筹备好了没

1. [] == ![] 执行步骤 
// 将原题中的 ![] 转换为原始值 --> ![] 为 false
[] == false
// 将 [] 转换为原始值 [].valueOf() 返回本身，持续调用 toString 返回 空字符串
'' == false
// 将空字符串转换为 布尔值，空字符串为 false
false == false
// 失去后果为 [] == ![] --> true
2. [] == []
 比拟的是地址，两个数组的地址不雷同。后果为 false
3. [] == false

解答步骤同第一题 [] == ![]

4. [] == true

解答步骤同第一题 [] == ![]

5. [1] == 1
// 将 [1] 获取原始值, 调用 valueOf 返回本身，持续调用 toString 返回 '1'
1 == 1
// 失去后果 [1] == 1 --> true
6. [] == 0
// 将 [] 获取原始值, 调用 valueOf 返回本身，持续调用 toString 返回‘’‘’== 0
// 将空字符串转换为数字 '' --> 0
0 == 0
// 失去后果 [] == 0 --> true
7. [12] < [13]
// 将左右都转换为原始值
'12' < '13'
// 失去后果 true
8. {} == {}

同 [] == []

9. {} == !{}

同 [] == ![] 不同的是，这里的 {} 转化为字符串之后为 [object Object]。所以后果与 [] == ![] 相同

10. {} !== {}

同 {} == {} 反后果

11. [] + {}
// 将左右同时获取原始值。''+'[object Object]'='[object Object]'
12. {} + []

如果左边的值不值一个字典格局，则会将大括号当成一个空块儿解决。也就是说此时的表达式能够被转换成如下表达式 + []，而后将 [] 先转为空串，而后转换为数字，失去数字 0。

所以：{} + [] == 0

13. {} + {}

左右两边都做对象解决，获取原始值 

'[object Object]' + '[object Object]' = '[object Object][object Object]'
14. [] + []

获取左右的原始值，都转换为了空字符串。而后做字符串拼接 

''+'' = ''
15. {} + 1

同 {} + []，可变形为 + 1

16. 1 + {}

将右方的 {} 获取原始值，失去 '[object Object]'，原式可变形为 

1 + '[object Object]' = '1[object Object]'

4. 补充点

  • NaN 与任何值都不相等，包含它自身（这得多很，本人跟本人都不相等）
  • 有 undefined 参加的任意一个四则运算，后果都为 NaN
  • 布尔值 true 转数字时，转为 1；false 转为数字时为 0
  • 字符串之间比拟大小，理论比拟的是字符编码。如：a > A = 97 > 65 = true

好了，明天的文章就分享到这儿咯，并没有写太多的概念，只是让大家来多看下理论运行的后果。一通则百通，通晓了理论运行的过程，再遇到类似的问题就熟能生巧了。

退出移动版