前端百題斬【007】——js中必須知道的四種數據類型判斷方法

寫該系列文章的初衷是「讓每位前端工程師掌握高頻知識點，爲工做助力」。這是前端百題斬的第7斬，但願朋友們關注公衆號「執鳶者」，用知識武裝本身的頭腦。

js有多種數據類型（Number（數值）、String（字符串）、Boolean（布爾值）、Null、Undefined、Symbol、Object、函數等），在開發過程當中不免須要判斷數據類型，本文總結了四種判斷方法：

7.1 typeof

typeof是一個運算符，其有兩種使用方式：（1） typeof(表達式)；（2） typeof 變量名；返回值是一個字符串，用來講明變量的數據類型；因此能夠用此來判斷 number, string, object, boolean, function, undefined, symbol 這七種類型，每種狀況返回的內容以下表所示：(具體進階可看前端百題斬【001】)

類型	結果
String	'string'
Number	'number'
Boolean	'boolean'
Undefined	'undefined'
Object	'object'
function函數	'function'
Symbol	'symbol'

小試牛刀

// 字符串
console.log(typeof('lili')); // string
// 數字
console.log(typeof(1)); // number
// 布爾值
console.log(typeof(true)); // boolean
// undefined
console.log(typeof(undefined)); // undefined
// 對象
console.log(typeof({})); // object
// 數組
console.log(typeof([])); // object
// null
console.log(typeof(null)); // object
// 函數
console.log(typeof(() => {})); // function
// Symbol值
console.log(typeof(Symbol())); // symbol

7.2 instanceof

instanceof運算符用於檢測構造函數的 prototype 屬性是否出如今某個實例對象的原型鏈上,返回值爲布爾值，用於指示一個變量是否屬於某個對象的實例。其語法以下所示：(具體進階可看前端百題斬【001】)

object instanceof constructor

小試牛刀

const arr = [1, 2];
// 判斷Object的prototype有沒有在數組的原型鏈上
console.log(arr instanceof Object); // true
// 數組arr的原型
const proto1 = Object.getPrototypeOf(arr);
console.log(proto1); // []
// 數組arr的原型的原型
const proto2 = Object.getPrototypeOf(proto1);
console.log(proto2); // []
// Object的prototype
console.log(Object.prototype);
// 判斷arr的原型是否與Object的prototype相等
console.log(proto1 === Object.prototype); // false
// 判斷arr的原型的原型是否與Object的prototype相等
console.log(proto2 === Object.prototype); // true

7.3 constructor

該種判斷方式其實涉及到原型、構造函數和實例之間的關係，更深層次的講解將放到後面的內容，下面只須要簡單瞭解一下這三者關係便可。

在定義一個函數（構造函數）的時候，JS引擎會爲其添加prototype原型，原型上有其對應的constructor屬性指向該構造函數，從而原型和構造函數之間互相知道對方。當構造函數實例化的時候，會產生對應的實例，其實例能夠訪問對應原型上的constructor屬性，這樣該實例就能夠了解到經過誰產生了本身，這樣就能夠在新對象產生以後瞭解其數據類型。

小試牛刀

const val1 = 1;
console.log(val1.constructor); // [Function: Number]
const val2 = 'abc';
console.log(val2.constructor); // [Function: String]
const val3 = true;
console.log(val3.constructor); // [Function: Boolean]

雖然該方法能夠判斷其數據類型，但存在一下兩個缺點：

1. null 和 undefined 是無效的對象，所以是不會有 constructor 存在的，這兩種類型的數據須要經過其餘方式來判斷。
2. 函數的 constructor 是不穩定的，這個主要體如今自定義對象上，當開發者重寫 prototype 後，原有的 constructor 引用會丟失，constructor 會默認爲 Object

7.4 toString()

toString() 是 Object 的原型方法，調用該方法，默認返回當前對象的 [[Class]] 。這是一個內部屬性，其格式爲 [object Xxx] ，其中 Xxx 就是對象的類型。因此利用 Object.prototype.toString()方法能夠對變量的類型進行比較準確的判斷。該類型針對不一樣不一樣變量的類型返回的結果以下所示：

數據類型	結果
Number	[object Number]
String	[object String]
Object	[object Object]
Array	[object Array]
Boolean	[object Boolean]
Function	[object Function]
Null	[object Null]
Undefined	[object Undefined]
Symbol	[object Symbol]

利用該方法很容易構建一個鑑型函數，代碼以下所示：

function type(target) {
    const ret = typeof(target);
    const template = {
        "[object Array]": "array", 
        "[object Object]":"object",
        "[object Number]":"number - object",
        "[object Boolean]":"boolean - object",
        "[object String]":'string-object'
    }
    if(target === null) {
        return 'null';
    }
    else if(ret == "object"){
        const str = Object.prototype.toString.call(target);
        return template[str];
    }
    else{
        return ret;
    }
}

小試牛刀

console.log(type({})); // object
console.log(type(123)); // number
console.log(type('123')); // string

1.若是以爲這篇文章還不錯，來個分享、點贊吧，讓更多的人也看到

2.關注公衆號執鳶者，與號主一塊兒斬殺前端百題。