淺析JavaScript判斷變量數(shù)據(jù)類型有哪些方法
JavaScript 有其內(nèi)建的數(shù)據(jù)類型。其中又分為原生值(primitive values)和對象(objects)。
1.JavaScript 的原生值 (primitive values)
截至目前,JavaScript 的資料型別中,有七個原生值。這七個原生值以外的,全都是屬于對象。
原生值是不可變的(immutable),意思是我們不能改變那個值本身。比如當(dāng)我們“修改”原始值時,實際上是讓變量重新綁定到一個新的值,而不是在原值上進(jìn)行修改。
let greeting = "Hi"; greeting = "Hello"; // 此時雖然打印 greeting 是 Hello,但是 Hi 這個值本身是沒變的,只是 greeting 指向了Hello 這個新值
JavaScript 的型別中的七個原生值包含:
- String
- Boolean
- Null
- Undefined
- Number
- BigInt
- Symbol
1.1 字符串 String
String (字符串)
字串是最常見的原生值之一。如前面提到,在JavaScript 當(dāng)中字串本身是不可變的。當(dāng)我們用substring()來擷取字串,或用concat()來把兩個字串合為一,這些都是會回傳另一個字串,而非改變原本的字串。
1.2 布爾值 Boolean
Boolean (布爾值)
有true與false兩個值的布林值,也是JavaScript 的原生值。
1.3 Number
JavaScript 與一些語言不同,沒有分整數(shù)與浮點數(shù),而是都用number這個原生值。不論整數(shù)或浮點數(shù),都是number這個型別。在JavaScript 當(dāng)中,+Infinity, -Infinity, 與 NaN 都是number這個型別,所以我們用typeof來檢查的話,會得到number。
console.log(typeof NaN); // number
而number在JavaScript 是雙精度浮點數(shù),所以精確度是介于-(2^53 − 1)與2^53 − 1之間。在這個范圍之外,就會有精準(zhǔn)度的問題,這時候要用另一個原生值BigInt。
1.4 BigInt
上面提到在JavaScript 的整數(shù)與浮點數(shù),都是用number這個型別,這其實只說了一半。因為JavaScript 的number精準(zhǔn)度有其限制,雖然多數(shù)情況很夠用(2^53 - 1會是9007199254740991,我們很少用到比這大的數(shù))。但有些時候會需要更往下的精準(zhǔn)度。這時就可以用BigInt數(shù)值的型別。
BigInt可以讓我們?nèi)我膺x擇其精準(zhǔn)度,就可以避免一些number會遇到的問題。它跟number一樣可以用+, *, -, **, 與 %等運算子,不過要注意不可以拿BigInt跟number型別的值交互使用,這會出現(xiàn)TypeError。
1.5 Undefined
undefined是一個類型,它本身也是一個值。
假如某個變量未聲明就是用,會出現(xiàn)索引錯誤ReferenceError
console.log(a); ReferenceError: a is not defined
用 let / const 聲明了,但在聲明前使用
console.log(a); let a = 1; ReferenceError: Cannot access 'a' before initialization
某個變量聲明但是沒有賦值
let greeting; console.log(greeting); // undefined
1.6 Null
null是很容易跟undefined搞混的原生值。undefined是因為某變數(shù)還沒有賦值,所以對JavaScript 來說,它不知道該變數(shù)的值是什么,所以要讀取該變數(shù)時,會是undefined。不過 則null是我們賦予某個變數(shù)null這一個值。
1.7 Symbol
最后一個JavaScript 原生值是Symbol,它是一個獨特(unique) 值,多半會搭配物件一起使用,作為物件的鍵(key)。
const sym = Symbol("ExplainYYDS");
const obj = { [sym]: "Interview Preps for Software Engineers" };
obj[sym]; // Interview Preps for Software Engineers
2.JavaScript中的對象(objects)
除了上述的七個原生值以外的存在,在JavaScript 當(dāng)中都是對象。
JavaScript 圈有一個梗,數(shù)組是對象,函數(shù)是對象,對象是對象。
3. 如何辨別一個變量的數(shù)據(jù)類型
3.1 使用typeof判斷變量的數(shù)據(jù)類型
要辨別一個變數(shù)的數(shù)據(jù)類型,最常見的方式是透過typeof這個方法。舉例來說typeof判斷字符串。
let greeting = "hi"; console.log(typeof greeting); // 'string'
typeof 的兩個注意點
- typeof 原生值,返回的是該原生值的類型標(biāo)識字符串,但是 typeof null 結(jié)果不是 null,而是object,這個歷史遺留的 bug,修復(fù)成本太高了
- typeof 數(shù)組的結(jié)果是 object ,tpyeof 函數(shù)的結(jié)果是 function
console.log(typeof null); // object
console.log(typeof []); // object
console.log(typeof function () {}); // function
補充typeof結(jié)果的表格
| Type of val | Result |
|---|---|
| Undefined | "undefined" |
| Null | "object" |
| Boolean | "boolean" |
| Number | "number" |
| String | "string" |
| Object (native and does not implement [[Call]]) | "object" |
| Object (native or host and does implement [[Call]]) | "function" |
| Object (host and does not implement [[Call]]) | Implementation-defined except may not be "undefined", "boolean", "number", or "string". |
因為 typeof 無法判斷數(shù)組和對象,所以需要新的方法去判斷某個變量是對象還是數(shù)組。
3.2 判斷變量是對象還是數(shù)組
Array.isArray()是可以協(xié)助我們的方法。如果是數(shù)組,會回傳true;但若是一般對象,則會回傳false。舉例來說:
Array.isArray([1, 2, 3]); // true
Array.isArray({ foo: 123 }); // false
我們也可以透過Object.prototype.toString()的方法幫助我們辨別數(shù)組、函數(shù)與一般對象。
const arr = [1, 2, 3];
const fn = () => {
return 123;
};
const obj = { foo: 123 };
console.log(Object.prototype.toString.call(arr)); // [object Array]
console.log(Object.prototype.toString.call(fn)); // [object Function]
console.log(Object.prototype.toString.call(obj)); // [object Object]
到此這篇關(guān)于淺析JavaScript判斷變量數(shù)據(jù)類型有哪些方法的文章就介紹到這了,更多相關(guān)JavaScript判斷變量數(shù)據(jù)類型內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JS必備技能之?dāng)?shù)據(jù)類型判斷與底層原理深入解析
- JavaScript判斷數(shù)據(jù)類型的四種方式總結(jié)
- JavaScript中判斷數(shù)據(jù)類型的實用方法總結(jié)
- JavaScript判斷變量數(shù)據(jù)類型的常見方法小結(jié)
- JavaScript數(shù)據(jù)類型判斷之Object.prototype.toString.call() 的詳解(示例)
- 詳解如何準(zhǔn)確判斷JavaScript中的數(shù)據(jù)類型
- JavaScript中判斷數(shù)據(jù)類型的方法總結(jié)
- JavaScript中常見的數(shù)據(jù)類型判斷方法小結(jié)
相關(guān)文章
基于JavaScript實現(xiàn)網(wǎng)頁倒計時自動跳轉(zhuǎn)代碼
這篇文章主要介紹了基于JavaScript實現(xiàn)網(wǎng)頁倒計時自動跳轉(zhuǎn)代碼 的相關(guān)資料,需要的朋友可以參考下2015-12-12
詳解webpack和webpack-simple中如何引入css文件
這篇文章主要介紹了詳解webpack和webpack-simple中如何引入css文件,非常具有實用價值,需要的朋友可以參考下2017-06-06
分享9個最好用的JavaScript開發(fā)工具和代碼編輯器
這篇文章主要介紹了9個最好用的JavaScript開發(fā)工具和代碼編輯器,需要的朋友可以參考下2015-03-03
詳解小程序設(shè)置緩存并且不覆蓋原有數(shù)據(jù)
這篇文章主要介紹了小程序設(shè)置緩存并且不覆蓋原有數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
淺析showModalDialog數(shù)據(jù)緩存問題(用禁止瀏覽器緩存解決)
在使用showModalDialog彈出窗口時,顯示的數(shù)據(jù)是上次修改前的數(shù)據(jù),這是因為默認(rèn)情況下頁面保存了緩存,所以顯示的數(shù)據(jù)并不是修改后的情況2013-07-07
小程序云開發(fā)如何實現(xiàn)圖片上傳及發(fā)表文字
這篇文章主要為大家詳細(xì)介紹了小程序云開發(fā)教程,如何實現(xiàn)圖片上傳及發(fā)表文字,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-05-05

