型別:
JavaScript 中有七種內建型別:
- 空值 (null)
- 未定義 (undefined)
- 布林值 (boolean)
- 數字 (number)
- 字串 (string)
- 物件 (object)
- 符號 (symbol,ES6中新增)
在 JS 中呢,有很多坑,本文章將結合 undersoce.js原始碼 和我所總結的方法準確判斷這六種型別,第七種也會提供一種判斷思路;
先來一個小測試:
首先,大家都熟悉的一種判斷方式 typeof,這是一種雖然老掉牙但是有些實用的方式 :
typeof null // "object" <= 在後面文章裡你會看到,巨坑!!!
typeof undefined // "undefined"
typeof true // "boolean"
typeof 42 // "number"
typeof "42" // "string"
typeof {life: 42} // "object"
typeof Symbol() // "symbol"
// ------------後面3種是單獨提出來的注意事項------------------
typeof void 0 // "undefined" <= 這是一個非常實用的技巧,我將在後面解釋;
typeof [1,2,3] // "object" <= 陣列 其實也是物件,巨坑!!!
typeof function a() { } // "function"
複製程式碼
巧用 “ ! ” 號:
!null // true <= 這是一個非常巧妙的技巧,下面將解釋;
!undefined // true <= 這是一個非常巧妙的技巧,下面將解釋;
------------我們不一樣!!!------------
!123 // false
!true // false
!{a: 123} // false
!function a() { } // false
!`123` // false
複製程式碼
有了這個區別,我們可以做一些有趣的事情,這是在 undersoce.js
原始碼裡面學到的技巧,這樣能夠準確地排除 null 和 undefined
無敵法 “ .toString.call() ”:
當然 Object.prototype.toString.call
也可以換成 Object.prototype.toString.apply
。
Object.prototype.toString.call(null) // "[object Null]"
Object.prototype.toString.call(undefined) // "[object Undefined]"
Object.prototype.toString.call(123) // "[object Number]"
Object.prototype.toString.call(true) // "[object Boolean]"
Object.prototype.toString.call(`123`) // "[object String]"
Object.prototype.toString.call({a: 123}) // "[object Object]"
Object.prototype.toString.call(Symbol()) // "[object Symbol]"
// ---------------單獨出來講的幾個注意事項---------------------
Object.prototype.toString.call([1,2,3]) // "[object Array]"
Object.prototype.toString.call(function a() { }) // "[object Function]" 其實函式也是object型別
Object.prototype.toString.call(new Date) // "[object Date]" 日期物件
Object.prototype.toString.call(Math) // [object Math] 數學函式物件
Object.prototype.toString.call(function a() { }) // "[object Function]" 其實函式也是object型別
複製程式碼
注1:這種方式存在相容性問題,具體相容性問題點選 這裡 ,JavaScript 1.8.5,無法完全檢測上述情況。
注2:使用這套技巧,能夠準確地分辨這7種型別甚至更多更精確,而 typeof 卻無法區分完全!!!!!
來看看 ” constructor “吧:
這種方式是判斷物件的建構函式是誰,至於什麼是建構函式我將在另一篇文章寫道;
var n1 = null;
n.constructor // 報錯:因為 null 是 JS 原型鏈的起點,沒有建構函式;
var u = undefined;
u.constructor // 報錯:它也沒有建構函式;
var a = [1, 2, 3];
a.constructor === Array; // true 陣列
var n = 123;
n.constructor === Number; // true 數字
var s1 = `123`;
abc.constructor === String // true 字串
var o = {a: 123};
o.constructor === Object; // true 物件
var s = Symbol()
abc.constructor === Symbol // true 符號
------------------單獨出來講的幾個注意事項----------------------
var arr = [1, 2, 3];
arr.constructor === Array // true 陣列 能夠很好地區分
var fun = function a() { };
fun.constructor === Function // true 函式
var abc = new Date();
abc.constructor === Date; // true 日期
var abc = new RegExp();
abc.constructor === RegExp; // true 正則
var abc = Math
abc.constructor === Math; // false 不可以像Object.prototype.toString.call()一樣區分;
abc.constructor === Object // true 事實上沒有Math這個建構函式,Math的建構函式在 Object上的
複製程式碼
最後一招 “ instanceof ”:
注意:使用物件必須是一個 object ;
// 語法: object instanceof constructor;
var n1 = 123; // n 是型別為 Number 的元素!!!不是物件!!!
typeof n1; // "number" 回想一下我們有7種型別
n1 instanceof Number; // false function Number() { }
var n2 = new Number(123) // 現在 n2 是一個 object 元素!!!
typeof n2; // "object"
n2 instanceof Number; // true
複製程式碼
正如,上述方式所說,這種方式只適合判斷 object !!!
var a = [1, 2, 3]; // 在最開始就宣告瞭,陣列也是物件,此法可以用來判斷陣列;
a instanceof Array; // 而這個物件的建構函式是 function Array() { }
// 雖然 typeof null 也是 object 但這是最底層的元素
複製程式碼
在這裡我就不過多舉例子了,你如果不知道原型鏈的東西,那就先記住 instanceof 能判斷陣列吧!!
閱讀宣告:法1都是來源於 underscore.js 原始碼:
空值 (null):
法1:直接用嚴格等於判斷。
var isNull = function (obj) {
return obj === null;
};
複製程式碼
這是最直接並且有效的方式;
法2:巧妙地利用 ! null 的結果為 true:
var isNull = function (obj) {
return !obj && typeof obj === "object";
};
複製程式碼
此方法雖然很巧妙,但是沒有法1直接;
未定義 (undefined)
法1:這是最推薦的方式。
var isUndefined = function (obj) {
return obj === void 0;
}
複製程式碼
很多常見的工具庫都採用這種方式,極力推薦!!!;
法2:直接利用 typeof 判斷:
var isUndefined = function (obj) {
return typeof obj === "undefined";
}
複製程式碼
這種方式,也是相對穩定的;
注意:
- 在全域性條件下 undefined 是不可以被修改的。
- 在區域性條件下 undefined 在某種情況下是可以被修改的。
- 請狠狠地戳這裡,看官方文件解釋。
(function(undefined) {
console.log(undefined); // "123"
})(`123`)
複製程式碼
布林值 (boolean)
這裡其實我也有疑惑,為什麼 underscore.js 會這樣判斷,讀者知道可以聯絡我;
var toString = Object.prototype.toString;
var isBoolean = function (obj) {
return obj === true || obj === false || toString.call(obj) === `[object Boolean]`;
}
複製程式碼
類似地,我們採用 .constructor 和 typeof 的方式也可以實現判斷。
數字 (number)
var toString = Object.prototype.toString;
var isNumber = function (obj) {
return toString.call(obj) === `[object Number]`;
}
複製程式碼
類似地,我們採用 constructor
和 typeof
的方式也可以實現判斷。
字串 (string)
var toString = Object.prototype.toString;
var isString = function (obj) {
return toString.call(obj) === `[object String]`;
}
複製程式碼
類似地,我們採用 constructor
和 typeof
的方式也可以實現判斷。
物件 (object)
var toString = Object.prototype.toString;
var isObject = function (obj) {
var type = typeof obj;
return type === `function` || type === `object` && !!obj;
}
複製程式碼
這裡,是我最疑惑的地方,為什麼要用 !!obj
?
typeof null === object
結果為true
;- 最開始我已經講了一種,
!obj
的方式,null
和undefined
返回結果都為true
而其他型別為 false; - 以上面這種實現方式,如果傳遞值為
null
的時候,就會被!!obj
過濾掉;
或者動手試試,將 && !!obj
刪掉,看看能否達到預期效果。
其他:
其實上文已經給出思路實現,Date, Math, RegExp等內建物件,我就不詳談了,用得較少:
陣列(Array)
法1: 最穩妥的辦法:
Object.prototype.toString.call([1,2,3]) // "[object Array]"
複製程式碼
老老實實地用這個方法吧!!!
法2:instanceof 法,僅為擴充:
var a = [1, 2, 3]; // 在最開始就宣告瞭,陣列也是物件,此法可以用來判斷陣列;
a instanceof Array; // 而這個物件的建構函式是 function Array() { }
複製程式碼
法3:建構函式法,僅為擴充
var a = [1, 2, 3];
a.constructor === Array; // true 陣列
複製程式碼
注:如果 a = null
,還要報錯,這種方式堅決不推薦!!!
法4:檢查原型的建構函式,僅為擴充:
var a = [1, 2, 3];
a.__proto__.constructor === Array
複製程式碼
其實法2-4都是屬於一種思路,判斷這個物件的建構函式是否為陣列,僅僅實現方式不同罷了。
參考和鳴謝:
- 《你不知道的JavaScript(中)》;
- Underscore.js 原始碼;
- http://www.jb51.net/article/79939.htm
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript