淺析 JavaScript 數據類型——基本數據類型

這是我參與8月更文挑戰的第2天，活動詳情查看8月更文挑戰

前言

數據值是一門編程語言進行生成的材料，JavaScript 也不例外。JS 中的數據類型，是學習 JavaScript 的基礎，主要分紅兩類：基本數據類型和引用數據類型：

• 基本數據類型：number、string、boolean、null、undefined、還有 ES6 新語法規範中的 Symbol、BigInt
• 引用數據類型：對象（普通對象、數組對象、正則對象、日期對象、Math、Date）、函數

今天咱們主要先了解下基本數據類型。

number

包括：

• 常規數字（整數、浮點數）
• 特殊數值
  • NaN：（not a number）表明不是一個有效的數字，可是屬於number類型的
  • Infinity：正無窮大，數學概念中的無窮大，是一個比任何數字都大的特殊值
  • -Infinity：負無窮大

思考：如何變量 num 是否爲一個有效數字？

if (Number(num) == NaN) {
    alert('num不是有效數字！');
}
複製代碼

上面這種方案可行嗎？答案是不能夠的。NaN 和誰都不相等，條件永遠不成立（即便 num 確實不是有效數字，轉換的結果確實是 NaN ，可是NaN != NaN的）

這裏咱們可使用到一個方法：isNaN

isNaN：檢測當前值是否不是有效數字，返回 true，表明不是有效數字，返回 false，是有效數字

• true 是非有效數字
• false 是有效數字

// 語法：isNaN([value])
let num = 12;

isNaN(num); // 檢測num變量存儲的值是否爲有效數字 false
isNaN('13'); // => false
isNaN(true); // => false
isNaN(false); // => false
isNaN(null); // => false
isNaN(undefined); // => true
isNaN({age:9}); // => true
isNaN([12,13]); // => true
isNaN([12]); // => false
isNaN(/^$/); // => true
isNaN(function(){}); // => true

複製代碼

isNaN 檢測的機制

1. 首先驗證當前要檢測的值是否爲數字類型的，若是不是，瀏覽器會默認的把值轉換爲數字類型
2. 當前檢測的值已是數字類型，是有效數字，返回 false，不是，返回 true「數字類型中只有NaN不是有效數字，其他都是有效數字」

其餘數據類型轉成數字類型

Number

上面說到，瀏覽器會默認的把值轉換爲數字類型，直接使用Number這個方法轉換的

定義：JS 內置的轉換方法

【字符串轉數字】

• 只要是有效數字字符的，才能夠轉換成數字，NaN 若是當前字符串中出現任意一個非有效數字字符，結果則爲 NaN
• 空字符串轉數字，結果是 0

Number('13') // => 13
Number('13px') // => NaN 若是當前字符串中出現任意一個非有效數字字符，結果則爲 NaN
Number('13.5') // => 13.5 能夠識別小數
Number('13.5.0') // => NaN
Number('') // => 0
複製代碼

【布爾轉數字】

Number(true) // => 1
Number(false) // => 0
複製代碼

【其它轉數字】

Number(null) // => 0
Number(undefined) // => NaN
複製代碼

特殊：

Number('') // => 0
[].toString() // => '' 
// => isNaN([]) =>isNaN('') => false
複製代碼

通常都是基本數據類型轉換成數字類型，不多引用數據類型轉換成數字類型的。

parseInt

定義：從字符串最左邊字符開始查找有效數字字符，而且轉換爲數字，可是一旦遇到一個非有效數字字符，查找結束。把一個字符串中的整數部分解析出來

parseFloat

跟 parseInt 的區別：把一個字符串中的小數（浮點數）部分解析出來，其餘是同樣的。

parseInt('13.5px') // => 13
parseFloat('13.5px') // => 13.5

parseInt('width:13.5px')
// => NaN 從字符串最左邊字符開始查找有效數字字符，而且轉換爲數字
// 可是一旦遇到一個非有效數字字符，查找結束
複製代碼

Number、parseInt、parseFloat 的區別

主要區別：在於字符串轉換分析上

• Number：出現任意非有效數字字符，結果就是 NaN
• parseInt：把一個字符串中的整數部分解析出來
• parseFloat：把一個字符串中的小數（浮點數）部分解析出來

string

定義：用單引號或者雙引號或反引號包裹起來的都是字符串。

其餘數據類型轉成字符串類型

• 基於 alert / confirm / prompt / document.write 等方法輸出內容的時候，會把輸出的值轉換爲字符串，而後再輸出

alert(1) // => '1'
複製代碼

• 基於「+」進行字符串拼接的時候
• 把引用類型值轉換爲數字的時候，首先會轉換爲字符串，而後再轉換爲數字
• 給對象設置屬性名，若是不是字符串，首先轉換爲字符串，而後再當作屬性存儲到對象中（對象的屬性只能是數字或者字符串）
• 手動調用 toString/toFixed/join/String 等方法的時候，也是爲了轉換爲字符串

let n = Math.PI;
n.toFixed(2) // "3.14"

let ary = [12,23,34];
ary.join('+')  // => '12+23+34'

複製代碼

轉換規律：

調用的方法：toString

【除了對象，都是你理解的轉換結果】

1 -> '1'
NaN -> 'NaN'
null -> 'null'
[] -> ''
[13] -> '13'
[12,13] -> '12,13'
複製代碼

【對象轉字符串】

(function(){}).toString() // "function(){}"
new Date().toString() //"Thu Jul 18 2019 10:03:32 GMT+0800 (中國標準時間)"

({name:'xxx'}).toString(); // => "[object Object]"
().toString(); // => "[object Object]"
// 無論是啥樣的普通對象，最後結果都同樣的
複製代碼

boolean

只有兩個值：true / false

其餘數據類型轉成布爾類型

• Boolean
• ! 取反
• !! 兩次取反，等價於沒取反，也就剩下轉換爲布爾類型了，項目當中經常使用這個

Boolean(1) // => true
Boolean(0) // => false
Boolean(-1) // => true
Boolean(NaN) // => false

!'追夢玩家' // => false 先把其它數據類型轉換爲**布爾類型**，而後**取反**
!0 // => true
!'' // => true

!!null // => 取兩次反，等價於沒取反，也就剩下轉換爲布爾類型了
複製代碼

規律 5個falsy：

在JS當中只有"0 / NaN / 空字符串'' "" / null / undefined"這個5個值轉換爲布爾類型的 false，其他都轉換爲 true

null && undefined

都表明空或者沒有

• null：空對象指針
• undefined：未定義

null：通常都是意料之中的沒有，先讓他暫時沒有，後期再給他加上去。（通俗理解：通常都是人爲手動的先賦值爲 null，後面的程序中咱們會再次給它賦值）

let num = null; // => null是手動賦值，預示着後面我會把num變量的值進行修改
...
num = 13;
複製代碼

undefined 表明沒有，通常都不是人爲手動控制的，大部分都是瀏覽器自主爲空。（後面能夠賦值也能夠不賦值）

let num; // 聲明一個變量 num => 此時變量的值，瀏覽器給分配的就是undefined

// 獲取一個對象的屬性值，若是這個對象沒有這個屬性名，獲得的值就是 undefined
let person = { name: '追夢玩家' };
console.log(person.name); // 追夢玩家
console.log(person.age); // undefined
...
// 後面能夠賦值也能夠不賦值
複製代碼

Symbol

它是用來作什麼的呢？ 爲了說明 Symbol 的做用，咱們結合例子來說解:

因爲沒有訪問限制，JavaScript 曾經有一個慣例：私有屬性如下劃線起始來命名。 這樣不只沒法隱藏這些名字，並且會搞壞代碼風格。 如今有了 Symbol，就能夠利用 Symbol 來隱藏這些私有屬性：

let speak = Symbol('speak')
class Person {
    [speak]() {
        console.log('say Hi')
    }
}
複製代碼

下面這幾種訪問都獲取不到 speak 屬性：

let p = new Person()

Object.keys(p)                      // []
Object.getOwnPropertyNames(p)       // []
for(let key in p) console.log(key)  // <empty>
複製代碼

但 Symbol 只能隱藏這些函數，並不能阻止未受權訪問。 仍然能夠經過 Object.getOwnPerpertySymbols(), Reflect.ownKeys(p) 來枚舉到 speak 屬性。

BigInt

什麼是BigInt?

BigInt類型是 JavaScript 中的一個基礎的數值類型，能夠用任意精度表示整數。使用 BigInt，您能夠安全地存儲和操做大整數，甚至能夠超過數字的安全整數限制。BigInt 是經過在整數末尾附加 n 或調用構造函數來建立的。

爲何須要BigInt?

Number類型只能安全的支持-9007199254740991(-(2^53-1)) 和 9007199254740991(2^53-1)之間的整數，任何超過這個範圍的數值都會失去精度；而 BigInt 能夠解決這個問題

console.log(9007199254740999) //9007199254741000 console.log(9007199254740993===9007199254740992) //true
複製代碼

從上面的代碼，能夠看到當數值超過 Number 數據類型支持的安全範圍值時，將會被四捨五入，從而致使精度缺失的問題

如何建立並使用BigInt？

在整數的末尾追加n

console.log(9007199254740999n); //9007199254740999
複製代碼

調用BigInt()構造函數

let bigInt = BigInt("9007199254740999"); //傳遞給BigInt()的參數將自動轉換爲BigInt:
console.log(bigInt); //9007199254740999n 
複製代碼