[JS]【二】---基本数据类型之【Number篇】

核心知识点

1. Number数字数据类型简述
2. isNaN（检测一个值是否为非有效数字）方法
3. 自增及其特殊性
4. 把其他类型值转换为数字类型
5. 数组对象以及map方法回调函数的类型转换例子

Number数字类型

1. 常规数字
2. NaN(NOT A NUMBER):不是一个数，但是隶属于数字类型
3. Infinity (无穷大值)

NaN和isNaN（检测一个值是否为非有效数字）方法

关于NaN

1.【NaN和任何值都不相等，甚至和自己都不相等；】

NaN == NaN     //false
NaN === NaN    //false
NaN !== NaN    //true  

2.【但是用Object.is(NaN,NaN)判断两个值是否相等，结果是true】

isNaN:检测一个值是否是非有效数字

• 如果【不是有效数字】则返回true
• 反之【是有效数字】则返回false

• 如isNaN('10'); //为false，因为在检测前由于此机制，自动转型了

• 凡是能够转成数字之后是有效数字的，都是有效数字

         //isNaN([val])
         console.log(isNaN(10));//false
         console.log(isNaN('AA'));//True
         /* 
             实际上在检测之前相当于发生了：
             Number('AA');  =>NaN 【转不成数字】
             isNaN(NaN);  =>TRUE
         */
   		//
         console.log(isNaN('10'));//false
         /* 
         	  类型转换机制
             实际上在检测之前相当于发生了：
             Number('10');  =>10
             isNaN(10);  =>false
         */
  

isNaN('123') //false
isNaN(123) // false 
isNaN(" ") //false 
isNaN('1.2.3') // true 
isNaN("23px") // true
Number('"23px") = NaN 
isNaN（Number('aaa')） //true Number('aaa'") = NaN 
isNaN(Number(true)) // 输入1 =》false 
isNaN(Number(false)) // 输入0 =》false 
isNaN(Number(null)) // 输入0 =》false 
isNaN(Number(undefined)) // 输入NaN =》true

自增的特殊性

 let i = '10';
 i=i+1;//=>'10'+1=>'101'【结果为字符串拼接】
 i+=1;//'10'+1=>'101'【结果为字符串拼接】
 i++;//=>10=>10+1=>11【结果为数字11，过程为数学运算】

把其他类型值转换为数字类型

两类方法：手动转换和隐式转换

隐式转换：【浏览器内部默认要先转换为Number再进行计算的】

手动转换

Number([val])： 把所有有效数字字符都进行转换(一般用于浏览器的隐式转换中)

+ 规则：

1 把字符串转换为数字：空字符串变为0，（第一个点除外，其作为小数点存在）如果出现任何一个非有效数字字符，结果都是NaN

console.log(Number('12.5'));//12.5 
console.log(Number('12.5px'));//NaN 
console.log(Number('12.5.5'));//NaN 
console.log(Number(''));//0

2 把布尔转换为数字：true->1 false->0

console.log(Number(true));//1
console.log(Number(false));//0
//练习 
console.log(isNaN(false)); //Number(false) =>0(是有效数字) =>false 
console.log(isNaN(true));  //Number(true) =>1(是有效数字) =>false

3 null->0 undefined->NaN

console.log(Number(null)); //=>0 console.log(Number(undefined));//=>NaN 
console.log(isNaN(null)); //Number(null) =>0(是有效数字) =>false 
console.log(isNaN(undefined)); //Number(undefined) =>NaN(不是有效数字) =>true

4 Symbol无法转换为数字，会报错：Uncaught TypeError: Cannot convert a Symbol value to a number

console.log(Number(Symbol("123"))) 
//=>Uncaught TypeError: Cannot convert a Symbol value to a number

5 BigInt去除“n”（超过安全数字的，会按照科学计数法处理）

console.log(Number(231n)) //=>231

6 把对象转换为数字：

• 先调用对象的 Symbol.toPrimitive 这个方法，如果不存在这个方法

• 再调用对象的 valueOf 获取原始值，如果获取的值不是原始值

• 再调用对象的 toString 把其变为字符串

• 最后再把字符串基于Number方法转换为数字

Number({name:"xxx",age:5}) //=>NaN
1.=>({name:"xxx",age:5})[Symbol.toPrimitive] //=>undefined
2.=>({name:"xxx",age:5}).valueOf() //=>{name: "xxx", age: 5}
3.=>({name:"xxx",age:5}).toString() //=>"[object Object]"
4.=>Number("[object Object]") //=>NaN

console.log(Number([]));//=>0
Number([10]) //=>10
1.=>[10][Symbol.toPrimitive] //=>undefined
2.=>[10].valueOf() //=>[10]
3.=>[10].toString() //=>"10"
4.=>Number("10") //=>10

Number([10,20,30]) //=>NaN

7 其他特殊转换的案例

let time = new Date()
Number(time) //=>1625126051393
time[Symbol.toPrimitive] //=>ƒ [Symbol.toPrimitive]() { [native code] } 因为time有这个方法并且有3个参数 number / string / default 浏览器自己调用这个方法，会默认传递的实参值
time[Symbol.toPrimitive]('number') //=>1625126051393
dir(time)
VM1101:1 Thu Jul 01 2021 15:54:11 GMT+0800 (中国标准时间)

Number(new Number(10)) //=>10
new Number(10) //=> Number {10} 输出一个对象 里面包含valueof()
1.=>new Number(10)[Symbol.toPrimitive] //=>undefined
2.=>new Number(10).valueOf() //=>10  找到后不在往下走

parseInt([val],[进制])/parseFloat([val])的使用场景

• 【注意：parseFloat不支持第二个参数！！！可以找浮点型数字】

• 【注意：parseInt可以识别各种整数（int）格式，如：8进制，10进制，16进制，所以可以接收第二个参数表示要转换为多少进制】

parseInt("10") //=> 10
parseInt("010") //=> 10
parseInt("10px") //=> 10
Number('10px') //=> NaN
parseInt("10PX10") //=> 10
parseInt("10.55px") //=> 10
parseInt(null) //=> NaN
parseInt(undefined) //=> NaN
parseInt(false);//=>NaN
parseInt(true);//=>NaN  如果是boolean，null，undefined类型值，则都会返回NaN
parseInt({}) //=>NaN 
parseInt([]) //=>NaN
 /* 
        parseInt/parseFloat
        如果是普通对象，则都会返回NaN
        ({}).toString() =>"[object object]"
        parseInt/parseFloat("[object object]") =>NaN
        ----------------------------
        [].toString() =>""//空字符串
        parseInt/parseFloat("") =>NaN
    */
----------------------------
 console.log(parseInt([12]));//=>12
 console.log(parseFloat([12.5]));//=>12.5
 console.log(parseInt([12,13]));//=>12

parseInt第二个参数 讲解---经典面试题

 let arr = [27.2, 0, '0013', '14px', 123];
 arr = arr.map(parseInt);
//array.map(function(currentValue,index,arr){}) js中map函数会依次处理数组中的每一个元素  并返回一个新的数组 对原来的数组不会影响
 console.log(arr)
/!* 
  parseInt(27.2,0)
    parseInt('27.2',10)  ->  '27'  ->  把'27'看做10进制，转换为10进制  =>27
  parseInt(0,1)  =>NaN   -> 制不在取值范围内，=>NaN
  parseInt('0013',2)
    parseInt('0013',2)  ->  '001'  ->  把'001'看做2进制(2以内的数)10进制  =>1
      0*2^2 + 0*2^1 + 1*2^0

  parseInt('14px',3)
    parseInt('14px',3)  ->  '1'  ->  把'1'看做3进制(3以内的数 4超出三进制范围)，转换为10进制  =>1
      1*3^0   

  parseInt(123,4)
    parseInt('123',4)  ->  '123'  ->  把'123'看做4进制(4以内的数)，转换为10进制  =>27
      1*4^2 + 2*4^1 + 3*4^0

  parseInt传递的第二个值是一个radix进制 
    + radix不写或者写0，默认是10进制「如果第一个传递的字符串是以“0x”开始的，那么默认是16进制」
    + radix取值范围：2~36，不在这个范围内，处理的结果都是NaN
    + 在传递的字符串中，从左到右，找到符合radix进制的值{遇到不符合的则结束查找}，把找到的值，看做radix进制，最后转换为10进制
    + 把其它进制的值转换为10进制：“按权展开求和”
*!/