JS-数据类型（Number）转换详解

在开发过程中，经常会需要将值进行类型转换，例如前端的日期，前端获取的是date型，而后端只接受字符型，那么就需要进行类型转换。

        首先了解常用的基本数据类型和引用类型

常用的数据类型

• 基本数据类型(值类型):

  • 数字Number(NaN属于数字类型)

  • 字符串String

  • 布尔Boolean

  • 空对象指针null

  • 未定义undefined

• 引用数据类型

  • 对象数据类型object

  • {}普通对象

  • []数组对象

  • /^[+-]?(\d|[1-9]d+))(.\d+)?$/ 正则对象

  • Math数学函数对象

  • 日期对象

  • ....

  • 函数数据类型 function

从数字类型开始：number型包含了：

        1.常规数字

        2.NaN(Not a Number)

NaN是特殊的数字类型，NaN意思是 not a number ,因此，NaN可以为不是数字的任何数，所以NaN和任何值（包括自己）都不相等

console.log(NaN == NaN) 			//false
//isNaN([val]):检测一个数值是否为 **非有效** 数字，如果不是有效数字返回True 否则返回False
console.log(isNaN(10)) 				//false
console.log(isNaN('AA'))			//true

但是在使用isNaN检测的时候，首先会先验证检测的值是否为数字类型，如果不是 会先基于Number([val])将val转换为数字类型再做检测 

console.lof(isNaN('10'))			//false

//isNaN的底层机制:

	isNaN('10'){
		Number('10') //=>10
		isNaN(10)		//=>false
	}

 因此，不能用isNaN([val])验证数字是否为数字类型！！！

如何将其他类型的值转换为数字类型？

1. Number([val])方法：  

   1. 基本对象类型转数字:

      //字符串转数字：字符串中必须全部为有效数字，否则结果都是NaN，空字符串会变成数字0
      console.log(Number("1234"))                //1234
      console.log(Number("1024happy"))           //NaN
      console.log(Number(""))                    //0
      
      //布尔转数字：true 返回1 false 返回0
      console.log(Number(true))                  //1
      console.log(Number(false))                 //0
      
      //空字符转数字： null => 0
      console.log(Number(null))                  //0
      
      //未定义转数字:  undefined => NaN
      console.log(Number(undefined))             //NaN
      
      

   2. 引用对象类型转数字:

      //引用类型转数字类型,会先调用toString()方法,转换为字符型，在调用Number()方法
      //普通对象类型:{}
          let obj1 = {
            name: 1,
            age: 2
          }
          console.log(Number(obj1))                //NaN
      
      //数组对象类型:[]
      
          let obj1 = [123]
          console.log(Number(obj1))                //123
      
          let obj2 = [12,3]     
          console.log(Number(obj2))                //NaN

2. ParseInt([val]) / ParseFloat([val],[进制])：

   1. 对于字符串：从做到右依次查找有效的数字字符，直到遇到非有效数字字符为止，将找到的数字返回。

      1. 基本数据类型转数字类型:

         
             console.log(parseInt('12.5px')) 		            //12
             console.log(parseFloat('12.5px'))	                //12.5
         
             console.log(parseInt('width:12,5px'))		        //NaN
             console.log(parseFloat('width:12,5px'))		        //NaN
         
             console.log(parseInt(true))						    //NaN
             console.log(parseFloat(true))						//NaN
         
             console.log(parseInt(null))						    //NaN
             console.log(parseFloat(null))						//NaN
         
             console.log(parseInt(undefined))					//NaN
             console.log(parseFloat(undefined))			    	//NaN

      2. 引用对象类型转数字类型：

         //普通对象类型  
           let obj1 = {
               name: 1,
               age: 2
             }
             console.log(parseInt(obj1))                //NaN
             console.log(parseFloat(obj1))              //NaN
         
         //数组对象类型
         
             let obj1 = [123.4, 56]
             console.log(parseInt(obj1))                //123
             console.log(parseFloat(obj1))              //123.4

      3. 因此，在ParseInt()和ParseFloat()方法中，与使用Number()方法在机制上是不一样的， 前者是浏览器的额外方法，而后者是v8引擎的底层机制，Number是将变量先通过toString()方法进行一次字符转换，再来判断这串字符里是否全为有效数字，而ParseInt和ParseFloat则是直接遍历变量中的有效数字，并将其输出，知道遇到非有效数字字符为止 

3. 双等于号(==):

   1. 在进行比较的时候，可能会把变量转换为数字

      console.log('10' == 10)            //true

       

以上就是将其它类型的值转换为数字型的方法