原生JS大揭秘—揭开数据类型转换的面纱

在JS中数据类型转换有两种

相关资料参阅

官方ecma-5规范
阮一峰老师类型转换
规范对相等==定义

1. 强制类型转换
   Number() Number函数将字符串转为数值，要比parseInt函数严格不少，只要有一个字符是非数字（空格、+、-除外），那么就会被转为NaN。

String() 能够将其余类型转成字符串
Boolean() 函数能够将任意类型的值转为布尔值。

1. 隐式类型转换
   https://www.jianshu.com/p/b07...
   https://www.jianshu.com/p/b16...

哪些状况下会发生隐式类型转换？

1. 不一样类型的数据互相运算
2. 对非布尔值类型的数据求布尔值
3. 对非数值类型的使用一元运算符(即"+"和"-")

重点说明： 操做符"+"是一个比较难搞、比较另类、比较奇葩的东西，"+"有两种使用含义

1. 有字符串时，表示字符串拼接
2. 无字符串时，表示算术加法

简单的来讲就是看"+"的两端是否有任一个是字符串，有为"字符串拼接",不然为"算术加法"。

隐式类型转换原则

1. 都是数字，直接运算
2. 都是字符串，使用字符对应的ASCII值运算
3. 有一个是boolean值，将boolean值转成数字，true->1或false->0
4. 有一个是数字，将另外一个转成数字
5. 只有一个是对象，则先将对象转成原始值，在执行操做

• 转换过程当中若是有NaN出现，则结果是NaN或false

重点说明： 在null、undefined进行"=="比较时不进行类型转换（可是ECMA规范中定义null==undefined // true ），其余运算操做时会转换。
在"=="比较时，只有三种状况为true：
一、null==null
二、null==undefined
三、undefined==undefined
除以上三种状况外其余都不相等，返回false

说到NaN,随便讲一下全局函数isNaN()，咱们都知道这个函数判断不许确，为何呢？什么缘由形成的呢？其实isNaN()方法只执行前，会对变量进行隐式类型转换好比isNaN({}),返回true
首先进行隐式类型转换,将{}=>Number,最终获得NaN，因此isNaN({})获得true

引用类型转成原始类型分析

在JS内部定义了4个抽象操做(只能供JS内部使用，咱们用户没法操做)

• ToPrimitive(obj, [PreferredType])
  obj:待转换的对象
  PreferredType：待转成的目标类型(只接受Number、String两种类型，默认是空)，若是obj是Date或symbol,则PreferredType=String,其他的状况下PreferredType=Number

  若是PreferredType=Number,引用类型转化为数字
  一、调用valueOf(),若是返回原始值，则结束，若是返回非原始值，则执行第2步
  二、调用toString(),若是返回原始值，则结束，若是返回非原始值，则报错

  若是PreferredType=String,引用类型转换为字符串
  一、调用toString(),若是返回原始值，则结束，若是返回非原始值，则执行第2步
  二、调用valueOf(),若是返回原始值，则结束，若是返回非原始值，则报错

  引用类型转换为布尔类型，始终返回true

• ToNumber(arguments)
• ToString(arguments)
• ToBoolean(arguments)

在执行隐式类型转换时，会自动调用这四个内部方法
原始值之间相互转换：ToNumber()、ToString()、ToBoolean()
引用值到原始值转换: ToPrimitive()
在执行显示类型转换时，如Number()、String()、Boolean()时，内部仍是调用ToNumber()、ToString()、ToBoolean()，若是待转换的是引用类型，则先执行ToPrimitive()，获得原始值，再执行ToNumber()、ToString()、ToBoolean()

这里特别说明：把 引用值转 原始值的过程当中JS内部在调用ToPrimitive()方法时，分为两种状况
一、 明确指定目标转换类型：按照指定类型去调用toString()/valueOf()方法
二、 没有指定目标转换类型：按照obj是不是 Date类型，去调用toString()/valueOf()方法

不一样类型的对象调用toString()返回值不一样：

• {} => "[object Object]"
• [] => ""
• [1,2,3] => "1,2,3"
• function(){} => "function(){}"
• Date => "Mon Feb 12 2018 15:44:57 GMT+0800 (中国标准时间)"
• RegExp => "/d/"正则字面量的字符串

不一样类型的对象调用valueOf()返回值不一样

• Date类型 => 1518421497815 返回自1970年1月1日至如今的时间戳毫秒数
• 其余的类型 => 一概返回对象自身

JS数据类型之原始值与引用值的转换关系图解

重点说明： 经过new Number()/new String()/new Boolean()获得的是对象（不管传入什么参数），该对象有一个属性[[PrimitiveValue]]`,此属性保存着该对象对应的原始值。

对于包装对象而来，转换成原始值时，有点特殊（不一样于{}、[]这种类型的对象），

• valueOf(): 获取[[PrimitiveValue]]属性的值
• toString(): 获取[[PrimitiveValue]]属性值的字符串形式

JS中数据转换图表

原始类型	目标类型(Number)	目标类型(String)	目标类型(Boolean)	目标类型(Object)
undefined	NaN	"undefined"	false	throw TypeError
null	0	"null"	false	throw TypeError
true	1	"true"	true	new Boolean(true)
false	0	"false"	false	new Boolean(true)
0	0	"0"	false	new Number(0)
-0	-0	"-0"	false	new Number(-0)
NaN	NaN	"NaN "	false	new Number(NaN)
Infinity	Infinity	"Infinity "	true	new Number(Infinity )
Infinity	-Infinity	"-Infinity "	true	new Number(-Infinity )
"7"	7	"7"	true	new String("7")
""	0	""	当且仅当是空字符串(即长度为0)时，才返回false，其余返回true,也就是" "为true	new String("")
"7M"	NaN	"7M"	true	new String("7M")
"M"	NaN	"M"	true	new String("M")
[]	0	""	true	[]
['7']	7	"7"	true	[]
{}	先ToPrimitive，再执行以上规则	先ToPrimitive，再执行以上规则	true	{}
function(){}	NaN	true	true	function(){}

https://www.jianshu.com/p/0af...
提示1：只有空字符串("")、null、undefined、+0、-0 和 NaN 转为布尔型是 false，其余的都是 true。
提示2：空数组、空对象转换为布尔型也是 true。
提示3：null 和 undefined 转换为数字是表现不一，分别为0和NaN。

非数值型转成数值型

非数值 -> 数值的方法有三种

• Number()
• parseInt()
• parseFloat()

parseInt解刨

------------------------------------------------------------------------
 描述：是一个内置的函数，
 做用：能够把一个字符串转成整形，parseInt的返回值只有两种状况，a、十进制整数 b、NaN
 有两个参数
   a、第一个参数表示待转换的字符串（必须是字符串，若是不是字符串，则会发生隐式类型转换
      而后对转换后的字符串进行截取
   ）

   b、第二个参数表示待转换的字符串的进制(默认是10进制)
      该值的范围介于[2,36]，若是进制不在此范围内的，一概返回NaN

      注意：基数若是不是数值，则发生隐式类型转换，若是基数是NaN，则默认基数是10

   特别注意，这里的默认进制10，是有条件的
   条件1，必须没有明确指定进制数
   条件2，待转换的字符串，不是以0或0x打头的

   在字符串以"0"为开始时旧的浏览器默认使用八进制基数。ECMAScript 5，默认的是十进制的基数。
   若是没有明确指定进度，对于"0”打头的字符串在“ES5以前”认为是8进制
                     对于"0”打头的字符串在”ES5以后“认为是10进制

   若是有明确指定数的进制，则以指定的进度为准

   var n=parseInt("11",2) //表示字符串"11"是2进制的数
   var n=parseInt("11",8) //表示字符串"11"是8进制的数
   var n=parseInt("11") //表示字符串"11"是10进制的数

   //注意了，radix是0、10均表示10进制的数，省略的时候进制多是八、十、16
   var n=parseInt("11",0) //表示字符串"11"是10进制的数
   var n=parseInt("11",NaN) //表示字符串"11"是10进制的数
   var n=parseInt("11",10) //表示字符串"11"是10进制的数


   使用方法总结：
   一、看参数1是不是字符串，若是不是则先转成字符串（若是是非字符串类型，会发生隐式类型转换）
   二、先肯定进制
   三、根据进制截取最终的字符串，若是最终是空字符串，则返回NaN
     （截取的规则是这样的，从字符串的首位(若是是0的8进制数，则从0以后开始截取，有点特殊；若是是0x的16进制数，则从0x以后开始截取，有点特殊)
     （若是是空格、+会忽略哦，若是是-则会输出）开始，依次向后截取，直到“非数字”或者“非指定进制范围内”的字符截止）
   四、转成10进制

   var num = parseInt(321, 0) //321
   var num = parseInt(321, NaN) //321
   var num = parseInt(321, 2) //NaN
   var num = parseInt("210", 3)//210
   var num = parseInt("329", 6)//20
   var num = parseInt("012", 0)//12
   var num = parseInt("0x12")//18
   var num = parseInt(parseInt,16)//15 这里为何是15呢？由于parseInt是一个函数，其实这里的值是"function(){}"
   var num = parseInt(alert,16)//15
   var num = parseInt(console.log,16)//15
   var num = parseInt(0.000005)//0，直接使用“字面量”表示
   var num = parseInt(0.0000005)//5,这里返回5是由于，小数位后面长度长多6位时，采用科学基数法表示，即”5e-7“

  =====================================================================
  对于数值型而言，小数位前长度大于21或小数位后长度大于6时，均使用科学计数法表示
  =====================================================================



  执行过程分析：（第一个参数命名为参数1，第二个参数命名为参数2）
  -----------------------------------------------------
  一、查看参数1是不是字符串，若是不是，则会发生隐式类型转换
  二、肯定基数（进制）
       a、有明确指定基数，则以指定的基数为准
       b、没有明确指定基数，则以参数1进行判断来肯定基数，
          首先，参数1字符串是以“0”打头，则es5之前的版本中，基数为8，es5以后的版本中，基数为10
          其次，参数1字符串是以“0x"打头，则基数是16，
          最后，其余状况，基数是10
  三、以肯定的基数来对参数1字符串进行有效性截取（非数字或基数范围外的均视为非法字符）
  四、若是截取的字符串是空字符串，“”则返回NaN
     若是是非空有效的字符串，则按照进制规则转换成10进制的数


     0 1 2 3 4 5 6 7 8 9  A  B  C  D  E  F  G  H  I  J  K  L  M  N  O  P  Q  R  S  T  U  V  W  X  Y  Z
     0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

[0/0] == NaN
Infinity/Infinity == NaN
0/NaN==NaN
NaN/0==NaN
0/Infinity == 0
Infinity/0 == Infinity

关于在JS中“{}”的使用特别说明

• 表示代码块
• 表示一个JS对象

经典特殊数据类型转换小结