前端系统化学习【JS篇】：（四-1）基本数据类型之Number篇
前⾔
细阅此⽂章⼤概需要 40分钟\color{red}{40分钟}40分钟左右
本篇中详细讲述\color{red}{详细讲述}详细讲述了：
Number数字数据类型简述
isNaN（检测⼀个值是否为⾮有效数字）⽅法
⾃增及其特殊性
其他类型值转换为数字类型的⽅法和各种情况
数组对象以及map⽅法回调函数的类型转换例⼦
进制转换
如果有任何问题都可以留⾔给我，我看到了就会回复，如果我解决不了也可以⼀起探讨、学习。如果认为有任何错误都还请您不吝赐教，帮我指正，在下万分感谢。希望今后能和⼤家共同学习、进步。
下⼀篇会尽快更新，已经写好的⽂章也会在今后随着理解加深或者加⼊⼀些图解⽽断断续续的进⾏修改。
如果觉得这篇⽂章对您有帮助，还请点个赞⽀持⼀下，谢谢⼤家！
Number数字数据类型
包含：常规数字、NaN、Infinity
Infinity
⽆穷⼤值
NaN
NaN(NOT A NUMBER)：不是⼀个数，但是⾪属于数字类型
NaN和任何值都不相等，甚⾄和⾃⼰都不相等； NaN!==NaN\color{red}{NaN!==NaN}NaN!==NaN
【但是⽤Object.is(NaN,NaN)判断两个值是否相等，结果是true】
所以我们不能⽤相等的⽅式判断是否为有效数字，需要使⽤isNaN⽅法来判断
NaN==NaN
//false
NaN===NaN
//false
isNaN（检测⼀个值是否为⾮有效数字）
检测⼀个值是否是⾮有效数字
如果【不是有效数字】则返回true
反之【是有效数字】则返回false
[val]：参数描述占位符
在使⽤isNaN进⾏检测的时候，其机制将⾸先会验证检测的值是否为数字类型，如果不是，先基于Number()这个⽅法，把值转换为数字类型，然后再检测。
如isNaN(‘10’); //为false，因为在检测前由于此机制，⾃动转型了
凡是能够转成数字之后是有效数字的，都是有效数字\color{red}{凡是能够转成数字之后是有效数字的，都是有效数字}凡是能够转成数字之后是有效数字的，都是有效数字
//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
*/
⾃增的特殊性
由于+号的特殊性质 【可代表数学运算】,【也可代表字符串拼接】 ，所以在i++; i+=n; i=i+n; 这三种运算形式中也有些微的差别。
i++；和其他两种不完全⼀样，其代表着纯粹的数学运算
let i ='10';
i=i+1;//=>'10'+1=>'101'【结果为字符串拼接】
i+=1;//'10'+1=>'101'【结果为字符串拼接】
i++;//=>10=>10+1=>11【结果为数字11，过程为数学运算】
把其他类型值转换为数字类型
两类⽅法：⼿动转换和隐式转换
⼿动转换：
\color{red}{Number([val])}Number([val])： 把所有有效数字字符都进⾏转换 （前导的0会被忽略）
【⽤Number把引⽤数据类型转换为数字】
先把它基于toString⽅法转换为字符串，再基于Number⽅法转换为数字。【这条规则是浏览器或者叫JS底层的渲染规则】
⽤Number转换⾛的就是这条底层规则
parseInt/parseFloat([val],[进制])\color{red}{parseInt/parseFloat([val],[进制])}parseInt/parseFloat([val],[进制])： 也是转换为数字的⽅法，规则不同于Number()。
对于字符串来说，是从左到右依次查有效数字字符，直到遇到⾮有效数字字符，停⽌查【不管后⾯是否还有数字，都再不了】，把到的当作数字返回【若⾮字符串，同样先转换为字符串】
parseInt/parseFloat⾛的是⼀个额外单独⽅法的规则，那就是如果不是字符串，就先变成字符串，再从左到右查（不是字符串⽆法进⾏从左到右的查）
隐式转换：【浏览器内部默认要先转换为Number再进⾏计算的】
isNaN([val])
==数学运算（特殊情况：+在出现字符串或对象的情况下不是数学运算，⽽是字符串拼接）【只有前++/++后/+i的时候也可能是数学运算】
==进⾏⽐较的时候 ⼀些情况下会将数据类型进⾏转换为数字
1.Number([val])的使⽤场景
1 把字符串转换为数字
只要字符串中包含 任何⼀个⾮有效数字字符（第⼀个点除外，其作为⼩数点存在），结果都会是NaN
空字符串’’,""，会转换为0
//============Number=================
//字符串转换为数字
console.log(Number(12.5));//12.5
console.log(Number('12.5'));//12.5
console.log(Number('12.5px'));//NaN
console.log(Number('12.5.5'));//NaN
console.log(Number(''));//0
true转换为1
false转换为0
// 把布尔值转换为数字
console.log(Number(true));//1
console.log(Number(false));//0
//练习
js正则表达式判断数字
console.log(isNaN(false));//Number(false) =>0(是有效数字) =>false
console.log(isNaN(true));//Number(true) =>1(是有效数字) =>false
3 NULL和undefined转换为数字
null会转换为0
【null代表空对象指针，虽然代表没有，但是是有⼀个代表"空"的对象存在的，所以转换为Number应为0】
undefined转换为NaN
【undefined代表未定义，未定义代表没有赋值，没有赋值就是"没有值"，"没有值"转换为Number的值就是NaN】
// 把null和undefined转换为数字
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 引⽤数据类型【对象或函数】转换为数字
普通对象、正则表达式对象、⽇期对象…转换为数字都是NaN
只有数组对象有可能转换为数字【数组也是对象类型的】
【空数组转换为0】
【只有⼀项的值为’能变为有效数字的值’的数组转换为该’能变为有效数字的值’的最终数值】
转换过程：把引⽤数据类型转换为数字，先把它基于toString⽅法转换为字符串，再基于Number⽅法转换为数字【实际上是先基于valueOf获得原始值，若没有原始值再去toString】
【关键点：是分为两步的，先toString转为字符串，再Number转为数字】
普通对象等转换为数字
//普通对象等转换为数字
console.log(Number({name:'10'}));//=>NaN
console.log(Number({}));//=>NaN
//{}/{xxx:'xxx'}.toString()=>"[object object]"=>NaN
/*
把普通对象转换为数字，实际上发⽣了
({name:'10'}).toString() =>"[object object]"
Number("[object object]") =>NaN
({}).toString() =>"[object object]"
Number("[object object]") =>NaN
*/
console.log(10+{});
//=>【对象转数字先变为字符串，然后开始拼接】
//=> "[object object]10"
数组对象转换为数字
console.log(Number([]));//=>0
console.log(Number([12]));//=>12
console.log(Number([12,13]));//=>NaN
/*
把数组对象转换为数字，实际上发⽣了
[].toString() =>""//空字符串
Number("") =>0
//
[12].toString() =>"12"//字符串"12"
Number("12") =>12
//
[12，13].toString() =>"12，13"//字符串"12，13"
Number("12，13") =>NaN//字符串中含有⾮有效数字
//
*/
2.parseInt/parseFloat([val],[进制])的使⽤场景
【注意：parseFloat不⽀持第⼆个参数】
parseInt/parseFloat⾛的是⼀个额外单独⽅法的规则，那就是如果不是字符串，就先变成字符串，再从左到右查（不是字符串⽆法进⾏从左到右的查）遇到⾮有效数字字符就不再继续查了，没到则NaN
//⽤parseInt/parseFloat将各个数据类型转换为数字
console.log('============');
let str ='12.5px';
let str1 ='width:12.5px';
console.log(Number(str));//=>NaN
/* 返回有效数字字符 */
console.log(parseInt(str));//=>12
console.log(parseFloat(str1));//=>NaN
console.log(parseInt(''));//=>NaN(字符串从左到右，没有)
parseFloat("1.6px")+parseInt("1.2px")+typeof parseInt("null")//=>"2.6number"
/*
parseInt
从左到右依次查有效数字字符，且只Int类型的整数
遇到⾮有效数字字符就不再继续查了【⽆论后⾯是否还有数字】，把到的整型数字当作数字返回，没到则NaN
*/
console.log(parseFloat(str));//=>12.5
/*
parseFloat
从左到右依次查有效数字字符，且只Float类型的浮点型数字
遇到⾮有效数字字符就不再继续查了【⽆论后⾯是否还有数字】，把到的浮点型数字当作数字返回，没到则NaN
*/
console.log(parseInt(null));//=>NaN
console.log(parseInt(undefined));//=>NaN
console.log(parseInt(false));//=>NaN
console.log(parseInt(true));//=>NaN
/*
parseInt/parseFloat
如果是boolean，null，undefined类型值，则都会返回NaN
*/
console.log(parseInt({}));//=>NaN
/*
parseInt/parseFloat
如果是普通对象，则都会返回NaN
({}).toString() =>"[object object]"
parseInt/parseFloat("[object object]") =>NaN
*/
console.log(parseInt([]));//=>NaN
/*
parseInt/parseFloat
如果是空数组对象，则会返回NaN【因为⾥⾯没有有效数字字符】
[].toString() =>""//空字符串
parseInt/parseFloat("") =>NaN
*/
console.log(parseInt([12]));//=>12
console.log(parseFloat([12.5]));//=>12.5
console.log(parseInt([12,13]));//=>12
/*
parseInt/parseFloat
如果是⾮空数组对象，则会按照字符串的原则进⾏转换
*/
3.数学运算
字符串： （特殊情况：+在出现字符串或对象的情况下不是数学运算，⽽是字符串拼接）【只有前++/++后/+i的时候也可能是数学运算】let a = “10”;
++a;//=>11
复制代码
【对象+数字：不⼀定都是字符串拼接】 【重要】\color{red}{【重要】}【重要】
对象本⾝是想转换为数字再进⾏运算的，⽽【对象转换为数字】并不是先toString直接转换为字符串
⽽是先.valueOf获取原始值[[PrimitiveValue]],
【如果有原始值（原始值都是基本数据类型值），直接基于原始值处理】
【没有原始值才去toString】

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。