JavaScript是一個(gè)動態(tài)類型語言，在運(yùn)行時(shí)獲取變量類型是常用操作，由于JavaScript設(shè)計(jì)的問題，看似簡單的問題，在JavaScript中可能并不簡單，比如在社區(qū)中流傳的下圖，仔細(xì)看一下這些坑，即便是JavaScript老司機(jī)也經(jīng)常翻車。

上圖中typeof NaN會返回number，這可能和你想的不一樣，在JavaScript準(zhǔn)確的獲取變量類型，并不簡單，正因?yàn)槿绱?，這個(gè)問題經(jīng)常被用來考察面試者，由于程序=數(shù)據(jù)+算法，而基本數(shù)據(jù)是數(shù)據(jù)的基礎(chǔ)，所以面試中考察類型也是合理的。

如果面試中你只回答使用typeof獲取類型，那大概率是會減分的，那么該如何回答這道題呢？本文將全面系統(tǒng)的介紹如何在JavaScript中判斷類型，閱讀本文，可以幫你，在工作中，避開類型判斷雷區(qū)，如果在面試中你回答本文的內(nèi)容，那么面試官將驚呼，這是高手，比我知道的都多，然后自然是好評嘍。

下面先從最簡單的例子開始，并一步一步提升難度，擴(kuò)展思路，先來看第一個(gè)例子：

在工作中，對于數(shù)據(jù)為空的情況，經(jīng)常要做防御式編程，誤區(qū)之一是使用非運(yùn)算符直接判斷。但這樣做是可能有坑的，比如這會把很多徦值計(jì)算在內(nèi)，常見的徦值有0, '', false, null, undefined等。例如如下的double函數(shù)，需要對參數(shù)做為空的防御，這里使用非空運(yùn)算符。

function double(x) {
  // 0會被錯(cuò)誤計(jì)算
  if (!x) {
    return NaN;
  }
  return x * 2;
}

對于判空，另一種寫法是直接和null和undefined作比較，示例如下：

if (x === null || x === undefined) {
  return NaN;
}

雖然邏輯看起來非常正確，但這種寫法有一個(gè)比較嚴(yán)重的問題，在JavaScript中undefined并不是關(guān)鍵字，而是 window上的一個(gè)屬性，在 ECMAScript 5 之前這個(gè)屬性可寫的，如果undefined被重新復(fù)制，在過時(shí)瀏覽器中會導(dǎo)致判斷失效，示例如下：

window.undefined = 1;

// 判斷不能生效
if (x === undefined) {
  console.log(111);
}

雖然在現(xiàn)代瀏覽器中不會有這個(gè) bug，但是如果文法作用域中存在名字為undefined的變量還是會有問題，這被稱作undefiined變量覆蓋，例如如下代碼中，undefined被1覆蓋了。

(function () {
  var undefined = 1;
  // 判斷不能生效
  if (x === undefined) {
    console.log(111);
  }
})();

關(guān)于判空還有比較巧妙的方法，可以只和null判斷相等，借助隱式轉(zhuǎn)換達(dá)到同樣的效果，null是關(guān)鍵字，沒有undefined的問題。

// null 和 undefined都會判斷
if (x == null) {
}

在全等是最佳實(shí)踐的背景下，這種做法并不被鼓勵(lì)，建議使用 typeof 來判斷undefined，typeof 通過內(nèi)部類型判斷，不存在undefined變量覆蓋的問題。

if (x === null || typeof x === 'undefined') {
}

對于 number 類型，有個(gè)需要注意的地方，在 JavaScript 中有個(gè)特殊的值叫做 NaN，NaN 的類型也是 number，編碼中很少直接使用到 NaN，通常都是在計(jì)算失敗時(shí)會得到這個(gè)值。

但將 NaN 作為 number 使用時(shí)就會報(bào)錯(cuò)，比如調(diào)用 NaN 上的toFixed方法，更好的做法是添加 isNaN 的判斷，需要注意 number 類型的特殊邏輯。

const x = Math.sqrt(-1); // NaN

// 注意這里的isNaN判斷
if (typeof x === 'number' && !isNaN(x)) {
  console.log(x.toFixed(2));
}

也可以使用 ECMAScript 2015 新增的Number.isNaN，和全局函數(shù) isNaN 的區(qū)別是，Number.isNaN 不會自行將參數(shù)轉(zhuǎn)換成數(shù)字，Number.isNaN的邏輯下面的代碼類似，Number.isNaN是更好的建議，但是需要注意兼容性的問題

Number.isNaN = function (value) {
  return typeof value === 'number' && isNaN(value);
};

typeof 只能判斷基本類型，對于引用類型的到的值都是object

typeof []; // 'object'
typeof {}; // 'object'
typeof c; // 'object'

instanceof 可以用來檢測引用類型，其原理是檢測 constructor.prototype 是否存在于參數(shù) object 的原型鏈上

{} instanceof Object // true
[] instanceof Array // true
/reg/ instanceof RegExp // true

instanceof 存在的一個(gè)問題是不夠準(zhǔn)確，原型鏈上存在的都會返回 true

[] instanceof Array // true
[] instanceof Object // true 注意這里

使用 instanceof 做類型判斷時(shí)，一定要注意順序問題，如果順序錯(cuò)誤，可能會得不到正確的結(jié)果

function type(x) {
  if (x instanceof Object) {
    return 'object';
  }

  // Array永遠(yuǎn)得不到正確的類型哦
  if (x instanceof Array) {
    return 'array';
  }
}

instanceof 另一個(gè)冷門的問題是存在多個(gè) iframe 時(shí)，其判斷可能會返回錯(cuò)誤的結(jié)果，這個(gè)問題一般會在多從窗口之間從傳遞值時(shí)發(fā)生

[] instanceof window.frames[0].Array // 返回false
[] instanceof window.Array // 返回true

對于數(shù)組的判斷，更好的辦法是使用 ECMAScript 5 帶來的新方法Array.isArray，這個(gè)在任何情況下都可以得到可靠的結(jié)果

Array.isArray([]); // true
Array.isArray(1); // false

另一種常用的判斷類型方式是使用，獲取內(nèi)部類型的方法，借助Object.prototype.toString可以獲取內(nèi)部類型的字符串結(jié)果

const toString = Object.prototype.toString;

toString.call({}); // [object Object]
toString.call(null); // [object Null]
toString.call(/reg/); // [object RegExp]

需要注意的是，在 ECMAScript 5 之前，undefined 和 null 并不能返回正確的值，如果有兼容性需求，需要注意這個(gè)問題

ECMAScript 2015 引入了Symbol.toStringTag可以修改內(nèi)部類型的值，這會影響toString的返回值，但是需要注意兼容性問題

const toString = Object.prototype.toString;
const obj = {};

toString.call(obj); // '[object Object]'

obj[Symbol.toStringTag] = 'MyObject'; // 修改內(nèi)部類型

toString.call(obj); // '[object MyObject]'

總結(jié)

至此，本文介紹了在JavaScript中判斷變量類型的各種方法，可以看到在正確的場景使用正確的方式并不容易，這里推薦大家使用作者維護(hù)的type庫，type使用的正是本文介紹的知識，其提供了開箱即用的判斷函數(shù)，經(jīng)過了很多項(xiàng)目的檢驗(yàn)，歡迎大家體驗(yàn)。

到此這篇關(guān)于詳解在JavaScript中如何判斷變量類型的文章就介紹到這了,更多相關(guān)JavaScript判斷變量類型內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論