JS中的數據類型簡析——基本數據類型值

時間 2020-05-30

原文原文鏈接

JS中的數據類型，是學習JS的基礎，他主要分爲兩大類分別是：javascript

基本數據類型和引用數據類型，基本數據類型又分爲number、string、boolean、null、undefined、還有ES6新語法規範中的Symbol，BigInt

引用數據類型：對象(普通對象、數組對象、正則對象、Math、Date)、函數

今天咱們主要先簡單瞭解一下各類數據類型：java

1、基本數據類型

按值操做數組

一、number

包含：
- 正數、負數、0安全
- NaNbash
  對於NaN咱們須要瞭解的內容:函數
  - not a number 不是一個有效數字，可是屬於number類型的
  - NaN和任何值都不相等（包括本身自己）
  - NaN == NaN //=>false
- Infinity:無窮大的值，也是number類型的學習
思考：想要驗證一下n是否是有效數字，要怎麼驗證？
- 既然NaN表明不是一個有效數字，那麼直接用n==NaN是檢測是否能夠呢？
- 答：不能夠；由於NaN自己表明不是一個數，不是一個數的內容包含不少，NaN與其自身都不相等，因此不能用NaN來檢測一個數是否爲有效數字。

由此咱們引伸出isNaN的概念ui

一、isNaN

定義：專業用來驗證一個值是否爲非有效數字
返回值
- 有效數字：返回false
- 非有效數字：返回true

console.log(isNaN(1)); //=>false
console.log(isNaN(NaN)); //=>true
console.log(isNaN(Infinity)); //=>false
console.log(isNaN('AA')); //=>true
console.log(isNaN('12.5')); //=>false
console.log(isNaN('12.5px')); //=>true
console.log(isNaN([])); //=>false
console.log(isNaN([10])); //=>false
console.log(isNaN([10, 20])); //=>true
console.log(isNaN({})); //=>true
console.log(isNaN(null)); //=>false
console.log(isNaN(undefined)); //=>true
console.log(isNaN(Symbol(1))); //=>報錯
複製代碼

注意：
- 在使用 isNaN 進行檢測的時候，若是檢測的值是非數字類型的值，則須要先把其轉換爲數字類型，而後在進行檢測。

二、把其它數據類型轉換爲數字類型

1) Number([value])

定義：是JS內置的轉換方法，能夠把其餘數據類型「強制」轉換爲數字類型
一、字符串轉數字
- 只有都是有效數字字符的才能轉換爲具體的數字，一旦字符串中出現非有效數字字符，則結果爲NaN
- 空字符串轉數字===>0
```
console.log(Number('12')); //=>12
console.log(Number('12.5')); //=>12.5
console.log(Number('12px')); //=>NaN
console.log(Number('12.5.0')); //=>NaN
複製代碼
```

二、布爾轉數字

true 轉換爲1
false 轉換爲 0

console.log(Number(true)); //=>1
console.log(Number(false)); //=>0
複製代碼

三、把空轉數字

null 轉換爲 0
undefined 轉換爲NaN

console.log(Number(null)); //=>0
console.log(Number(undefined)); //=>NaN
複製代碼

四、Symbol 轉數字

不能把Symbol類型轉換爲數字，不然會報錯

console.log(Number(Symbol(13))); //=>Cannot convert a Symbol value to a number
複製代碼

五、對象轉數字

過程：
- 1.先把obj轉化爲字符串 "[object Object]"
- 2.把字符串轉換爲數字 Number("[object Object]")
普通對象

let obj={x:100};
console.log(Number(obj)); //=>NaN
複製代碼

數組對象：空數組轉數字爲 0

/* * 1.先把ARR轉換爲字符串： "10" * 2.在把"10"轉換爲數字：10 */
let arr = ["10"];
console.log(Number(arr)); //=>10
/* * 1.先把ARR轉換爲字符串： "10,20" * 2.在把"10,20"轉換爲數字：NaN */
arr = ["10", "20"];
console.log(Number(arr)); //=>NaN
console.log(Number([])); //=> []->'' Number('')->0
console.log(Number(['AA'])); //=> ['AA']->'AA' Number('AA')->NaN
複製代碼

其他對象基本都是NaN

六、函數轉數字

結果都是NaN

console.log(Number(function func() {}));//=>NaN
複製代碼

2）parseInt([value])

定義：從字符串最左邊開始查找，把找到的有效數字字符轉換爲數字，一直遇到一個非有效數字字符爲止，則結束查找
原理：
- 處理原理與Number不同
- 他們是把字符串轉換爲數字類型（若是處理的值不是字符串，須要先轉換爲字符串而後再去轉換爲number類型的）

3）parseFloat([value])

與 parseInt 區別

parseFloat 比 parseInt 多識別一位小數點

console.log(Number('12px')); //=>NaN
console.log(parseInt('12px')); //=>12
console.log(parseInt('12px24')); //=>12
console.log(parseInt('width:12px')); //=>NaN
console.log(parseInt('12.5px')); //=>12
console.log(parseFloat('12.5px')); //=>12.5 parseFloat比parseInt多識別一個小數點

console.log(Number(true)); //=>1
console.log(parseInt(true)); //=>先把TRUE轉換爲字符串"TRUE" parseInt('true') =>NaN
console.log(parseInt(NaN)); //=>NaN
console.log(Number(null)); //=>0
console.log(parseInt(null)); //=> parseInt('null') =>NaN
console.log(isNaN(Number(parseInt("0.8")))); //=>parseInt("0.8")->0 Number(0)->0 isNaN(0)->false

console.log(Number('')); //=>0
console.log(parseInt('')); //=>NaN
複製代碼

三、方法

在Number這一大類中，有不少公用的方法，本次只列舉兩個較爲經常使用的spa

一、toFixed()

語法：數字.toFixed(N)

定義：保留小數點後N位（最後的結果是一個字符串）

let n = 3.1415926;
console.log(n.toFixed(2)); //=>"3.14"
複製代碼

二、MAX_SAFE_INTEGER

定義：最大安全數（js可以識別的最大整數）
數值：9007199254740991
注意：ES6中提供了一個新的數據類型 BigInt ，管理超過安全數值的數字

console.log(Number.MAX_SAFE_INTEGER); //=>9007199254740991 最大安全數（JS可以有效識別的最大整數）
console.log(9007199254740992 == 9007199254740993); //=>true 應該是不同的，可是超過了最大數值，JS沒法精準計算
ES6中提供了一個新的數據類型 BigInt：管理超過安全數值的數字
console.log(BigInt(9007199254740992), BigInt(9007199254740993));
/* * 基本數據類型 * number string boolean null undefined symbol => BigInt新增的基本數據類型 */
複製代碼

思惟導圖

二、string

定義：在JS中，用單引號/雙引號/反引號，包起來的都是字符串

一、把其它數據類型轉換爲字符串類型：

方法：
- String([value])
- [value].toString()
隱式轉換：
- 字符串拼接時
- 把對象轉換爲數字以前，先要轉換爲字符串
普通對象轉字符串：「[object object]」
數組對象轉換爲字符串：「第一項，第二項，...」（用逗號分隔數組中的每一項）

二、在JS中經常使用的數學運算

%（膜）取餘數

console.log(7 % 3); //=>取餘 1
複製代碼

減乘除：
- 都是數學運算（若是遇到非數字類型，須要基於Number 把其強制轉換爲數字類型，而後進行運算）
加的做用：
- 數學運算：
- 字符串拼接：

字符串拼接

定義：只要加號兩邊的任意一邊出現字符串，則變爲字符串拼接
注意：對象轉數字時須要先轉換爲字符串，變爲字符串以後則直接拼接，再也不轉爲數字
例子：console.log(100 + true + 21.2 + null + undefined + 'Tencent' + [] + null + 9 + false)；//==>NaNTencentnull9false

console.log(3 - "3px"); //=>NaN
console.log(3 + "3px"); //=>"33px" 字符串拼接
console.log(1 + "1"); //=>"11" 字符串拼接
console.log(1 + {}); //=>"1[object Object]" 在把{}轉換爲數字過程當中，先把他轉換爲字符串"[object Object]"，此時右側出現了字符串，則再也不是數學運算，而是字符串拼接了
console.log(1 + []); //=>'1'
console.log([10] + true); //=>"10true" 在轉換[10]到數字的過程當中，先把其轉換爲字符串"10"，此時操做變爲字符串拼接(和數學運算不要緊了)
console.log(true + [10]); //=>"true10"
console.log(1 + true); //=>2

console.log(100 + true + 21.2 + null + undefined + "Tencent" + [] + null + 9 + false);
    100 + true => 101
    101 + 21.2 => 122.2
    122.2 + null => 122.2
    122.2 + undefined => NaN 
    NaN + "Tencent" => "NaNTencent"  字符串拼接（之後都是字符串拼接）
    "NaNTencent" + [] => "NaNTencent"
    "NaNTencent" + null => "NaNTencentnull"
    "NaNTencentnull" + 9 => "NaNTencentnull9"
    "NaNTencentnull9" + false => "NaNTencentnull9false"
複製代碼

真實項目中常常把一些變量的值拼接到指定的字符串中

// 完成字符串拼接處理：2020年03月03日 12:00:00
	let year = '2020';
	let month = '03';
	let day = '03';
	let hours = '12';
	let minutes = '00';
	let seconds = '00';
複製代碼

傳統的拼接方式
- 咱們須要在字符串中基於「++」或者‘++’的方式把變量拼接到字符串中
- let result = year + '年' + mouth + '月' + day + '日' + hours + ':' + minutes + ':' + seconds
- 這種方式涉及不少噁心的規則，一不留神就容易拼錯
```
//從頁面中獲取一個元素拼接內容

 let str='<div class="box" id="box">';
 str+='<h2 class="title">哈哈</h2>';
 str+='<ul class="item">';
 str+='<li></li>';
....
複製代碼
```
ES6 中的模版字符串
- 反引號${}反引號：爲了解決傳統字符串拼接中的問題反引號${}反引號中存放變量或者其餘的JS表達式便可
- let result = 反引號${year}年${mouth}月${day}日${hours}:${minutes}:${seconds}反引號
- 能夠很簡單的完成字符串拼接

// ES6中的模板字符串就是爲了解決傳統字符串拼接中的問題（反引號 TAB上面的撇）：${}中存放變量或者其它的JS表達式便可，很簡單的完成字符串拼接
	let result = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
	console.log(result);
複製代碼

//從頁面中獲取一個元素拼接內容

let str = `<div class="box" id="box"> <h2 class="title">哈哈</h2> <ul class="item"> ${[10,20,30].map(item=>{ return `<li>${item}</li>`; }).join('')} </ul> </div>`;
	console.log(str); 
複製代碼

思惟導圖

三、boolean

包含：
- true
- false

一、把其它數據類型轉換爲布爾類型

方法：
- Boolean([value])
- ![value] ：把指定的值轉換爲布爾類型後取反
- !![value] ：取反再取反，至關於沒有取反，只是把它轉換爲布爾類型值

規則：

只有「0/NaN/null/undefined/空字符串」最後是false，其他的都是true

console.log(!!1); //=>true
console.log(!1); //=>false

console.log(!!-1); //=>true
console.log(!!0); //=>false
console.log(!!undefined); //=>false
console.log(!!Number('12px')); //=>Number('12px')->NaN false
console.log(!![]); //=>true
console.log(!!''); //=>false
console.log(!!{}); //=>true
複製代碼

條件判斷時：

/* 條件判斷中，每個條件最後必定是true/false */
    if (1 == 1) {}
	if (1) {
		//=>寫一個值，也是要把這個值轉換爲布爾，而後校驗程序的真假
	}
	if (3 + '3px') {} //=>3 + '3px' =>'33px' 真
	if (3 - '3px') {} //=>3 - '3px' =>NaN 假
複製代碼

思惟導圖

四、null 和undefined

null 空對象指針
undefined 的應用場景

一、聲明瞭一個變量，可是沒有賦值，這個變量就是undefined;3d

var num;
console.log(num)===>undefined
複製代碼

二、咱們在獲取一個對象的屬性名對應的屬性值的時候，若是這個屬性名在對象中沒有，獲得的這個值就是undefined

var obj={name:"lili"};
    obj.name ====>"lili"
    obj.age====>undefined
複製代碼

三、若是函數裏面有形參，我們在執行函數的時候，並無傳參數，那麼，在函數體中去打印這個形參，獲得值就是undefined;

function fn(n,m){
    console.log(n);====>undefined
 }
fn()
複製代碼

四、正常的一個函數裏面return多少，那麼這個執行函數最後的返回結果就是多少，若是沒寫return，（即此函數沒有返回值），在執行函數的時候，返回值就是undefined;

function fn2(){

}
var res=fn2()  =====>undefined;
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。