別再被坑了！JavaScript 類型檢測的最佳實踐#
在 JavaScript 中，我們經常需要判斷一個變數的類型。這個需求在編程中非常常見，因為不同類型的數據會影響到我們的代碼邏輯。
JavaScript 提供了幾種方法來檢測數據類型，每種方法都有自己的優缺點。
Object.prototype.toString.call()#
這是最萬能的方法。它可以準確識別所有的 JavaScript 內置類型，包括基本類型和複雜類型。不管你給它傳什麼數據，它都能給出一個統一格式的字符串，告訴你這個數據到底是什麼類型。
它的原理是調用對象內部的 [[Class]] 屬性。這個屬性是只讀的，不能被改寫，所以非常可靠。
優點：
- 識別範圍廣，基本類型和複雜類型都能識別
- 不會受到對象自身的
toString()方法的影響 - 返回結果格式統一，方便解析
缺點：
- 寫起來比較囉嗦
- 如果是自定義類型，只能得到
[object Object]，不能進一步區分類型
function detectType(data) {
return Object.prototype.toString.call(data).slice(8, -1).toLowerCase();
}
console.log(detectType(123)); // 'number'
console.log(detectType('abc')); // 'string'
console.log(detectType(true)); // 'boolean'
console.log(detectType(null)); // 'null'
console.log(detectType(undefined)); // 'undefined'
console.log(detectType([])); // 'array'
console.log(detectType({})); // 'object'
console.log(detectType(function () {})); // 'function'
console.log(detectType(new Date())); // 'date'
console.log(detectType(new RegExp())); // 'regexp'
console.log(detectType(new Error())); // 'error'
typeof#
這個運算符最常用，寫起來簡單。它可以識別基本類型和函數，但對複雜類型的識別能力有限。
優點：
- 使用簡單
- 可以識別基本類型和函數
缺點：
- 無法區分數組和普通對象
typeof null的結果是'object'- 無法識別內置對象類型，如
Date、RegExp等
console.log(typeof 123); // 'number'
console.log(typeof 'abc'); // 'string'
console.log(typeof true); // 'boolean'
console.log(typeof undefined); // 'undefined'
console.log(typeof null); // 'object' (這是一個歷史遺留的 bug)
console.log(typeof []); // 'object'
console.log(typeof {}); // 'object'
console.log(typeof function () {}); // 'function'
instanceof#
instanceof 運算符用於測試構造函數的 prototype 屬性是否出現在對象的原型鏈中的任何位置。
優點：
- 可以檢查對象是否屬於特定的類或構造函數
缺點：
- 只能檢查對象類型，不能檢查基本類型
- 要識別多種類型，需要多次調用
console.log([] instanceof Array); // true
console.log({} instanceof Object); // true
console.log(function () {} instanceof Function); // true
console.log(new Date() instanceof Date); // true
console.log(new RegExp() instanceof RegExp); // true
console.log(new Error() instanceof Error); // true
console.log(123 instanceof Number); // false
console.log('abc' instanceof String); // false
console.log(true instanceof Boolean); // false
constructor#
constructor 是對象的一個屬性，指向創建該對象的構造函數。可以用它來判斷對象的類型。
優點：
- 可以識別大多數對象類型，包括自定義類型
缺點：
- 如果對象的
constructor屬性被修改，會得到錯誤結果 null和undefined沒有constructor屬性
console.log((123).constructor === Number); // true
console.log('abc'.constructor === String); // true
console.log(true.constructor === Boolean); // true
console.log([].constructor === Array); // true
console.log({}.constructor === Object); // true
console.log(function () {}.constructor === Function); // true
console.log(new Date().constructor === Date); // true
console.log(new RegExp().constructor === RegExp); // true
console.log(new Error().constructor === Error); // true
總結#
如果需要全面準確的類型識別，Object.prototype.toString.call() 是最佳選擇。
如果只需要簡單區分基本類型，typeof 就足夠了。
如果要檢查對象是否屬於特定類型，可以用 instanceof。
在實際應用中，我們可以根據具體需求選擇合適的方法。
結語#
上次我開發了一個工具，可以批量清理無用的倉庫。如果你感興趣，可以去看看哦！😊
介紹文章： https://mp.weixin.qq.com/s/t7lgc6b7xJiNhfm5vWo5-A
GitHub 倉庫地址： https://github.com/yaolife ng0629/del-repos
如果你覺得這個工具對你有所幫助，請不要忘記給我的 GitHub 倉庫 點個 Star ⭐！你的支持是我前進的動力！
感謝閱讀，我們下次再見！
