JavaScript系列—JS數據類型、類型轉換(二)

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()

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

小技巧

但是parseFloat(0.00) 也會等於0

3JS中稀奇古怪的隱式類型轉換

顯示類型轉換（強制類型轉換）
Number()
parseInt()
parseFloat()
隱式類型轉換

+              //'200'+3  變成字符串  
- * / %      // '200'-3  變成數字
++ --       //變成數字
> <          //數字的比較還是字符串的比較。其中一個是數字，兩個都是數字，兩個都是字符串，那就是字符串的比較
！取反       //把右邊的數據類型轉成布爾值
==          //判斷值
===         //判斷類型和值，這個不算強制類型轉換

數字的比較和字符串的比較不同，字符串是一位一位的比較

4. isNaN應用實例

1）NaN

NaN和自己都不相等

NaN是number類型

看下面

2)isNaN

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'

所以要判斷數字的話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

還可以通過下面的方式判斷（是數字類型又是isNaN）
if(typeof(arr[i]) === 'number' && isNaN(arr[i]))

面試題1

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))

 

<!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 οnclick="myFunction()">點我</button>
  <p id="demo"></p>

</body>

</html>