17JavaScript教程【第二章】数据类型

悠悠 2022-08-13 18:54 212阅读 0赞

来源：[17JavaScript教程【第二章】数据类型][17JavaScript]

本文是为了大家更好地学习javascript，数据类型对于JS开发来说，是比较基础的，大家可以把本文收藏，以后开发时可以查询，javascript是弱类型语言，因此在涉及到从dom节点中取得数字并且加入计算的时候，会有一些类型转换上的问题。本文从类型转换着手，讲解javascript的数字类型。  
  
**一..JS的数字类型**  
    js的数字类型只有一种，叫做Number.js中的所有数字皆属于此类型。包括整数 1，-2，3，浮点数1.1，-1.2，1.3都属于此类型。所以,在js中,typof 整数或者 typof 浮点数返回的都是number.  
  
**二..JS的类型转换**  
  js中有三个常用函数用于将非数字类型转换为数字类型,分别是,Number(),parseInt,parseFloat();可以直接在window作用域下调用,用法:  
  
aNumber =  Number(notNumber);  
aInt =  parseInt(notNumber);  
aFloat = parseFloat(notNumber);  
  
从函数名,可以看出函数的作用来:  
  
Number():可以将非数字转换为数字,转换结果可能为整数,也可能为浮点数  
parseInt():将非数字类型转换为数字,转换结果为整数,直接取整,不进行四舍五入运算  
parseFloat():将非数字类型转换为数字类型.转换结果为浮点数.  
  
**列举一些常见转换:**

<table style="width:526px"> 
 <tbody> 
  <tr> 
   <td>&nbsp;</td> 
   <td>“a123”</td> 
   <td>“123a”</td> 
   <td>“abc”</td> 
   <td>“2.2”</td> 
   <td>“2.8”</td> 
   <td>"123a21"</td> 
  </tr> 
  <tr> 
   <td>Number</td> 
   <td>NaN</td> 
   <td>NaN</td> 
   <td>NaN</td> 
   <td>2.2</td> 
   <td>2.8</td> 
   <td>NaN</td> 
  </tr> 
  <tr> 
   <td>parseInt</td> 
   <td>NaN</td> 
   <td>123</td> 
   <td>NaN</td> 
   <td>2</td> 
   <td>2</td> 
   <td>123</td> 
  </tr> 
  <tr> 
   <td>parseFloat</td> 
   <td>NaN</td> 
   <td>123</td> 
   <td>NaN</td> 
   <td>2.2</td> 
   <td>2.8</td> 
   <td>123</td> 
  </tr> 
 </tbody> 
</table>

从表中我们可以看到常见的转换形式.  
  
**那么我们得到从String转换到Number型号的一般规则:**  
使用parseInt和parseFloat转换时,从左边开始,在遇到第一个非数字,非浮点的字符为止,之间包含的数字,浮点,转换为对应的数字.如果左起第一位即为非数字非浮点的字符,则转换结果直接为NaN.使用Number()转换时,只要包含有非数字和浮点的符号,无论位置,均会转换为NaN.  
同时表中也出现了一个奇怪的字符NaN.NaN是一个奇怪的玩意,我们会在后面提到,这里暂时认为当运算无法返回一个正确的数值时，会返回NaN.  
  
**三..JS混合类型的计算**  
最常用到的是Number+String,Float+Int类型,可以用两句话来概括:  
  
**不同类型相加(String+Number),结果为简单联结,并且与String或者Number的前后顺序无关.**  
示例: "2.2"+2  结果 2.22 ;    2+"2.2" 结果22.2  
  
**相同类型相加(Number(int)+Number(float)),结果为将较低精度转换为较高精度然后进行运算,也与前后顺序无关**  
示例:parseInt(2)+parseFloat(2.2) = 4.2 ;  parseInt(2)+parseFloat(2.2) = 4.2  
  
**除了加法之外的混合运算(-,/等),和加法截然不同(切记):  
不同类型的的其他运算(比如String-Number),会将其他非数字类型调用Number方法转换为数字类型,参与运算,前后顺序无关.**  
例如:"122"-2 =120, 120-"110" =10,"120"/2=60, 2/"1"=2  
  
原因分析:**同为数学运算符,为什么+和其他运算符号有如此大的差异呢?原来 +在js中不光作为加法符号使用,还有一个更加常用的功能:联结字符串.所以遇到加法符号的时候,js引擎会优先把+作为字符串联结的操作符.因此如果有字符串参与的加法运算,会先把参与运算的其他类型转换为字符串,再执行运算.  
  
四.NaN和Infinity**  
NaN,在Js中非常特殊.NaN是Number对象的一个属性.我们可以通过Number.NaN来取得.所以NaN严格的来说,不是一个数字,但是又具有一些数字的特征比如 typof NaN 为Number.  
  
1.NaN的类型(typeof)是Number  
2.NaN无大小,**并且NaN不等于NaN!**  
比如我们上面表中列出的,将字符串abc转换为数字的时候,得到的结果为NaN.原因是abc在数字中没有对应的值,强制转换为数字类型后,得到NaN.  
事实上,  
NaN也可以参与运算,在js中是这么处理的:  
  
**NaN参与数字运算,结果仍然是NaN.**  
所以: 1+NaN =NaN ,1.5+NaN =NaN  
  
**NaN参与混合类型计算,遵守数字类型和非数字类型混合运算的规律:**  
所以:NaN+"abc" 结果:NaNabc;   “abc”+NaN 结果:abcNaN  
  
**NaN不等于NaN**  
所以:NaN==NaN 结果:false; NaN!=NaN 结果:true ; NaN>NaN||NaN<NaN 结果:false(小心,这里也是false)  
Js中另外一个特殊的数字叫做Infinity,表示正无穷大.在js中在区间-(+)1.7976931348623157E+10308之外的数字都认为是无穷大(负无穷大).同样的,这句话也有两个含义:  
  
1.Infinity的类型是Number  
2.Infinity在js中是有限的,但是只要其大(或小)到一定程度,js就会认为其是无穷.  
比如 2/0就会产生Infinity.  
  
同样的Infinity有很多特性,Infinity参与数字运算的结果,我总结了一张表:

<table style="width:98%"> 
 <tbody> 
  <tr> 
   <td>Infinity+(*)常数</td> 
   <td>Infinity－(/)常数</td> 
   <td>Infinity-(/)Infinity</td> 
   <td>Infinity+(*)Infinity</td> 
   <td>Infinity==Infinity</td> 
   <td>Infinity!=Infinity</td> 
  </tr> 
  <tr> 
   <td>Infinity</td> 
   <td>Infinity</td> 
   <td>NaN</td> 
   <td>Infinity</td> 
   <td>true</td> 
   <td>false</td> 
  </tr> 
 </tbody> 
</table>

运算规则大体上类似与NaN,但是还有些不同  
  
Infinity参与混合类型计算,遵守数字类型和非数字类型混合运算规律  
  
**五.补充的几个方法**  
JS数字类型的几个方法好像不太见到有人用,我用搜索引擎搜的时候,发现造车轮的程序员还大有人在.  
  
**1.Number.toFixed(num);**  
  
  
  用途:取得小数点后num位有效数字,运算中会四舍五入.  
   举例: (3).toFixed(3),得到3.000; (3.1415926).toFixed(3) ,结果3.142  
  
**2.Number.toPrecision(num)**  
  
  
  用途:取num位有效数字,运算中会四舍五入  
  举例: (3).toPrecision(3),得到3.00; (3.1415926).toFixed(4) ,结果3.142  
  
**六.月影的几个题目**  
  
在搜集资料整理这篇文章的时候,我找到国内的js高手之一月影出的几个关于js的题目,和数字类型相关的几个,我觉得很有意思,列出来给给大家看看,相信如果有人能从头到尾阅读,这几个问题应该是可以迎刃而解的  
  
１.typeof(NaN) ,typeof(Infinity)  
  
2.NaN == NaN  
3.NaN != NaN  
4.NaN >= NaN  
5.parseInt("123abc")  
6."123abc" - 0  
7.Infinity > 10  
8.Infinity > "abc"  
9.Infinity == NaN  
10.true == 1  
  
**说出它们的输出结果**  
  
11.  
var a = "123abc";  
alert(typeof(a++));  
alert(a);  
  
12.  
var a = "123abc";  
a.valueOf = function()\{return parseInt(a);\}  
alert(++a);  
alert(a-0);  
  
解析:  
  
1.两个都是Number  
2.False  
3.true  
4.false  
5.123  
6.NaN. 这个略做说明.系统自己进行运算,调用的强制转换方法,是和Number()方法一样的.这个计算因为不是加法,所以先把非数字类型转换成数字类型.Number(“123abc”)的结果是NaN —(文中有提到),而NaN参与数学运算的结果还是NaN.  
7.true  
8.false .调用Number强制转换"abc"结果为NaN,NaN无大小,与任何数都没办法进行比较.  
9.false  
10.true .  
11.  
var a = "123abc";  
alert(typeof(a++)); //Number  
//调用a++的时候,这里++调用Number()方法强制转换,结果NaN,NaN进行后面的运算,全部还是NaN  
alert(a); //NaN  
12.  
var a = "123abc";  
a.valueOf = function()\{return parseInt(a);\}  
alert(++a);//NaN  
//调用++a的时候,这里++调用Number()方法强制转换,结果NaN,NaN进行后面的运算,全部还是NaN  
alert(a-0);//NaN

[17JavaScript]: http://www.17javascript.com/thread-56-1-1.html