JavaScript系列—JS数据类型、类型转换(二)

青旅半醒 2021-10-24 00:26 600阅读 0赞

### 1. JS数据类型及相关操作 ###

>   
> javascript数据类型：  Number,  String,  Boolean,  Undefined,  Symbol            Null                       Object(obj/\[\]/\{\}/null)  
> typeof判断数据类型:  "number","string","boolean","undefined","symbol"           "function"              "object"(obj/\[\]/\{\}/null)

### 2.Number() ParseInt() ParseFloat() ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

**1)Number**

**Number():可以将类似于数字的字符串转换成数字**

var a='100';
    alert(Number(a)+100)://200

注意：  
var a=‘0000100’//会转成100  
var a=’+100’//会转成100  
var a=’’;//会转成0  
var a=’ ‘;//会转成0  
var a=true;//会转成1 false会转成0

var a='true';//会转成NaN  
var a=function()\{alert(1);\};//会转成NaN

（数组的话去掉外面的\[\]然后判断）  
var a=\[\];//会转成0  
var a=\[’’\];//会转成0  
var a=\[123\];//会转成123  
var a=\[‘123’\];//会转成123  
var a=\[1,2,3\];//会转成NaN

(空对象\{\}和空不要搞混了)  
var json=\[abc:123\];//会转成NaN  
var json=\{\};//会转成NaN  
var a=null;//会转成0  
var a;//会转成NaN

（这个不要和parseInt和parseFloat搞混了）  
var a=‘100px’;//会转成NaN

**2)parseInt和parseFloat**

var b='200px1223';
    alert(parsrInt(b));//200

var a=’+200px’ //会转成200  
var a=‘12.34元’ //会转成12  
parseFloat:提取出来前面是小数的部分  
var a=‘12.34.1元’ //会转成12.34

小技巧

![20190818170514131.png][]

但是parseFloat(0.00) 也会等于0

### 3JS中稀奇古怪的隐式类型转换 ###

显示类型转换（强制类型转换）  
Number()  
parseInt()  
parseFloat()  
隐式类型转换

+              //'200'+3  变成字符串  
    - * / %      // '200'-3  变成数字
    ++ --       //变成数字
    > <          //数字的比较还是字符串的比较。其中一个是数字，两个都是数字，两个都是字符串，那就是字符串的比较
    ！取反       //把右边的数据类型转成布尔值
    ==          //判断值
    ===         //判断类型和值，这个不算强制类型转换

数字的比较和字符串的比较不同，字符串是一位一位的比较

### 4. isNaN应用实例 ###

1）NaN

NaN和自己都不相等

NaN是number类型

看下面

![aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwODE5MTk1MjM1Mjc3][]  
  
2)isNaN

![aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwODE5MjE0OTU1OTk5][]

isNaN和Number()是好兄弟

>  isNaN() 在接收到一个值之后，会尝试将这个值转换为数值。某些不是数值的值会直接转换为数值，例如字符串 "10" 或 Boolean 值。而任何不能被转换为数值的值都会导致这个函数返回 true 。

alert(isNaN(NaN)); //true  
alert(isNaN(‘我爱你’)); //true  
alert(isNaN(1)); //false  
alert(isNaN(function()\{alert(1);\})); //true  
alert(isNaN(‘1’)); //false Number() ‘1’=>1=>false  
alert(isNaN(true)); //false  
alert(isNaN(\[\])); //false

### 5.面试题 ###

1）找出所有的数字  
const a = '200px' - 1;  
console.log(a); // NaN  
因为typeof(NaN) // 'number'  
所以typeof(a) // 'number'

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]  
所以要判断数字的话1.typeof(num) === 'number'  2.isNaN(NaN)//true  
**typeof(num) === 'number' && ！isNaN(NaN)**  
2）找出可以转换成数字的  
使用parseFloat()  
 parseFloat() 也是从第一个字符（位置 0）开始解析每个字符。而且  
也是一直解析到字符串末尾，或者解析到遇见一个无效的浮点数字字符为止。  
 parseFloat() 与 parseInt() 的第二个区别在于它始终都会忽略前导  
的零。  
因为parseFloat(0) // 0  
所以判断可以转化成数字：  
**if(parseFloat(arr\[i\]) || parseFloat(arr\[i\]) === 0)**

3）找出所有的NaN  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]  
还可以通过下面的方式判断（是数字类型又是isNaN）  
if(typeof(arr\[i\]) === 'number' && isNaN(arr\[i\]))

### **面试题1** ###

![aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwODE5MjIwMzQwNTc0][]

HTML部分：
    
    var arr = [ '100px', 'abc'-6, [], -98765, 34, -2, 0, '300', , function(){alert(1);}, null, document, [], true, '200px'-30,'23.45元', 5, Number('abc'), function(){ alert(3); }, 'xyz'-90 ];
    
    <br>
    ---------------------------------------------------------------------------------------
    <br>
    	1、找到arr里所有的数字：-98765, 34, -2, 0, 5     <br>
    	2、找到可以转成数字的：'100px', -98765, 34, -2, 0, '300', '23.45元',  5  <br>
    	3、把转成数字以后，最大值判断出来：300     <br>
    	4、把 NaN 所在的位置找出来：1 14 17  19 <br>
    <br>
    --------------------------------------------------------------------------------------
    <br>
    <input type="button" value="找出所有数字"/>
    <input type="button" value="找出所有可以转换成数字的"/>
    <input type="button" value="把转换成数字的最大值找粗来" />
    <input type="button" value="把NaN所在位置弹出来" />
    <div id="div1"></div>
    JS部分：
    
    window.onload = function(){
    	var aBtn = document.getElementsByTagName('input');
    	var oDiv = document.getElementById('div1');
    	var arr = ['100px', 'abc' - 6, [], -98765, 34, -2, 0, '300', , function () {
                alert(1);
            },
            null, document, [], true, '200px' - 30, '23.45元', 5, Number('abc'), function () {
                alert(3);
            }, 'xyz' - 90];	
    	var str = '';
    	var arrMax = [];
    	
    	//找出所有的数字
    	aBtn[0].onclick = function(){
    		for(var i=0; i<arr.length; i++){
    			//首先  判断数字类型 排除布尔类型  然后!isNaN把过滤后的数字都搞出来
    			if(typeof(arr[i]) === 'number' && !isNaN(arr[i])){
    				str += arr[i] + ',';
    			}	
    		}
    		oDiv.innerHTML = str;
    		//防止点击当前按钮，重复生成
    		str = '';	
    	};
    	
    	//找出可以转成数字的
    	aBtn[1].onclick = function(){
    		for(var i=0; i<arr.length; i++){
    			//parseFloat会干掉0  所以要加上
    			if(parseFloat(arr[i]) || parseFloat(arr[i]) === 0){
    				str += arr[i] + ',';	
    			}	
    		}
    		oDiv.innerHTML = str;
    		str = '';	
    	};
    	
    	//找出转成数字的，并从中找出最大值
    	aBtn[2].onclick = function(){
    		for(var i=0; i<arr.length; i++){
    			//parseFloat会干掉0  所以要加上
    			if(parseFloat(arr[i]) || parseFloat(arr[i]) === 0){
    				arrMax.push(arr[i]);
    			}	
    		}
    		//把arrMax的第一个值赋给iMax变量，以便后面跟arrMax数组比较，匹配出最大值
    		var iMax = arrMax[0];
    		for(var i=0; i<arrMax.length; i++){
    			//通过iMax一一比较arrMax数组中的数字，然后把比较大的值赋给iMax，从而找出最大值
    			if(iMax<arrMax[i]){
    				iMax = arrMax[i];	
    			}	
    		}
    		oDiv.innerHTML = iMax;
    		iMax = '';	
    	};
    	
    	//找出数组arr中NaN所在的位置
    	aBtn[3].onclick = function(){
    		for(var i=0; i<arr.length; i++){
    			//NaN是数字类型  不是数字; 即把不是数字的数字类型筛选出来（字符串和数字的表达式等）
    			if(typeof(arr[i]) === 'number' && isNaN(arr[i])){
    				str += i +',';	
    			}	
    		}
    		oDiv.innerHTML = str;
    		str = '';	
    	};
    	
    };

###  面试题2 ###

tips：以下都是针对字符串

1.有没有输入： str === ''

2.输入的是不是数字：typeof(str) == 'string' && Number(str) == parseFloat(str)

3.不能有0在前面：str.charAt(0) == '0'

4.不能是小数（第二种情况排除掉4.0 ）

if (parseInt(str) !== parseFloat(str) ||

(parseInt(str) == parseFloat(str) && String(parseInt(str)).length!== str.length))

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3][]

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>菜鸟教程(runoob.com)</title>
      <script>
        function myFunction() {
          const str = document.getElementById("demo").value;
          if (str === '') {
            alert('请输入');
            return;
          }
    
          if (typeof(str) == 'string' && Number(str) == parseFloat(str)) {
            alert('您输入的不是一个数字');
            return;
          }
    
          if (str.charAt(0) == '0') {
            alert('不能有0在前面');
            return;
          }
    
          if (parseInt(str) !== parseFloat(str) ||
            (parseInt(str) == parseFloat(str) && String(parseInt(str)).length!== str.length)) {
            alert('不能是小数');
            return;
          }
    
          if (!(str.length >= 5 || str.length < 10)) {
            alert('输入的数是5-10');
            return;
          }
        }
    
      </script>
    </head>
    
    <body>
    
      <p>单击按钮触发函数。</p>
      <input id='demo' />
      <button onclick="myFunction()">点我</button>
      <p id="demo"></p>
    
    </body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20211023/8f52fac9f85c415081a77ab900c9cb5a.png
[20190818170514131.png]: /images/20211023/515ff4bab70b434baf010925d0e988f8.png
[aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwODE5MTk1MjM1Mjc3]: /images/20211023/35e97d897dd7445aa2e43f1538ab978a.png
[aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwODE5MjE0OTU1OTk5]: /images/20211023/aa9ea5e6411747d9bf5611dad2c06905.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20211023/85e92fccda4d4d63937fe63681f4be27.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20211023/1e573bed4447404baa269acbe0dcc3c2.png
[aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwODE5MjIwMzQwNTc0]: /images/20211023/d00e673fef944625afa9dd8090fc9915.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3]: /images/20211023/84295b9dd28948938e1322f200294a82.png