JavaScript基本数据类型（1）- 数字(Number)

数字 number

两大分类数字/NaN

1. 常规数字

   ---

   描述

   包括二进制，，八进制，十进制(整数/小数)，十六进制，无穷大/无穷小数

   JS不像其他后台语言那样分出 int 整数和 float 小数，所有的数统称为 Number

   示例

       // 1. 十进制，生活中最常见的数
   var num = 10;
   var PI = 3.88556;
   	// 2. 十六进制, 0~9 a~f 	#ffffff	数字的前面加上0x代表十六进制
   var num1 = 0x8;
   var num2 = 0xa5;
   	// 3. 八进制， 0~7 					数字前加0 表示8进制
   var num3 = 010;
   var num4 = 06;
   	// 4. 无穷大和无穷小的数
   console.log(Number.MAX_VALUE*2)			// Infinity
   console.log(-Number.MAX_VALUE*2)		// -Infinity
   

2. NaN

   ---

   not a number，不是一个数，但是类型属于数字类型

   描述

   NaN 是一个全局对象的属性，代表非数字。

   判断NaN

   • NaN 和任何值都不相同，包括本身，不能用（== 和 ===） 不能被用来判断一个值是否是 NaN

   • 非数字可以代表任何东西，所以不能的等于自己

   • 必须使用 Number.isNaN() 或 isNaN() 函数判断一个值是不是非数字

     • isNaN 在进行检测的时候，或先检测值是否是数字类型，如果不是，再基于Number()把字符串转换成数字再进行检测，如果是数字，返回 false

   NaN === NaN;         // false
   Number.NaN === NaN;  // false
   NaN !== NaN 		// true
   
   isNaN(NaN);          // true
   isNaN(Number.NaN);   // true
   isNaN('10')			// false
   
   isNaN('10')		    // false
   /*
   	1. '10' 不是数字，进行Number转换成数字
   	2.  10 是数字，返回 false
   */
   
   isNaN('aaa')		 // true
   /*
   	1. 'aaa' 不是数字，进行Number转换成数字，转换的结果是 NaN
   	2.  NaN ，返回 true
   */
   

*转换成数字

其他类型转换成数字类型，有以下4中方式

1，Number

---

1. 字符串 -> 数字

   console.log(Number('123'));     // 123
   console.log(Number('123aaa'));  // NaN
   console.log(Number(''));        // 0
   console.log(Number(``));        // 0
   console.log(Number(""));        // 0
   

   • 只要字符串中包含任意一个非有效数字，返回NaN
   • 空字符串会转换成 0

2. 布尔值 -> 数字

   console.log(Number(true));      // 1
   console.log(Number(false));     // 0
   console.log(isNaN(false));      // false
   

3. null 和 undefined -> 数字

   console.log(Number(null));          // 0
   console.log(Number(undefined));     // NaN, undefined代表没有赋值，里面没有任何东西，为NaN
   

4. 引用数据类型（对象） -> 数字

   // 1. 对象 -> 数字
   console.log(Number({ a: 20 }));   // NaN
   console.log(Number({}));          // NaN
   // {a: 20}/{}.toString --> "[object Object]"
   // "[object Object]" --> NaN
   
   // 2. 数组 -> 数字
   console.log(Number([]));          // 0
   console.log(Number([10]));        // 10
   console.log(Number([10, 11]));    // NaN
   // [] -> 都是 ''				Number('') -> 0
   // [10] -> 都是 '10'			Number('10') -> 10
   // [10, 11] -> 都是 '10, 11'	 Number('10, 11') -> NaN
   
   console.log(Number(/\d+/));       // NaN
   

   • 引用数据类型需要先基于 .valueOf() 或 .toString() 方法取得原始值，JavaScript在把他转换成数字

     • 复杂数据类型转换成数字：

       1. 先对其进行 .valueOf() 方法，返回的不是原始值，不使用该方法

       2. 在对其进行 .toString() 方法，返回的是原始值，JS把他转字符串字符串形式

          {} => [object Object]， [ ] => ’ ’

       3. JS再对其基于 字符串 --> 数字 的转换过程把他转换成数字返回

          ‘[object Object]’ => NaN, ’ ’ => 0

2，ParseInt

---

• 对所有数据类型来说【取整数】

  1. 对值进行 .toString() 方法，把值转换成字符串
  2. 对字符串进行从左到右的查找
     1. 碰到第一个非数字的字符就停止查找，返回查找到的数字
     2. 若没有数字找到，返回NaN

  console.log(parseInt('123px'));  // 123
  console.log(parseInt('45px666')); // 45
  console.log(parseInt('height123')); // NaN
  

3，ParseFloat

---

• 对所有数据类型来说【取浮点数】

  1. 对值进行 .toString() 方法，把值转换成字符串
  2. 对字符串进行从左到右的查找
     1. 碰到第一个非数字的字符就停止查找，返回查找到的数字
     2. 若没有数字找到，返回NaN

  console.log(parseFloat('123.666px'));     // 123.666
  console.log(parseFloat('45.555px666'));   // 45.555
  console.log(parseFloat('height123.321')); // NaN
  

三者的区别

• Number([value]) 走的是浏览器底层V8引擎的渲染规则，会进行很多层的转换
  1. 如果 value 是字符串 ==> 若字符串里有非数字的值，返回 NaN，否则返回数值
  2. 如果 value不是字符串 ==> 先进行 valueOf() 或 toString() 方法转换成原始值字符串，再执行上一步
• ParseFloat([value])/ParseInt([value]) 不是底层的浏览器方法，他走的是自己的转换方法
  1. 如果 value 是字符串 ==>
     1. 从字符串的左边开始查找有效数字，遇到数字进行标记，遇到非数字停止查找，返回标记的数字
     2. 若第一个字符就是非数字，返回 NaN
  2. 如果 value不是字符串 ==> 先进行 toString() 方法转换成字符串，再执行上一步

4，隐式转换数字

遇到 - * / 这三个运算符，所有非数字的值，都会进行 Number() 转换成数字进行运算

console.log(10 - {});   // 10 - Number({})  ==>  10 - '[object Objece]' = NaN
console.log(10 * [10]); // 10 * Number([10]])  ==>  10 * '10' => 10 * 10 = 100
console.log(10 * [10, 20]); // 10 * NaN -> NaN
console.log(10 * '20');     // 200