JS資料型別判斷的幾種方法-有解無憂

JS資料型別判斷

JavaScript 中常見資料型別有Number、String、Boolean、Object、Array、Json、Function、Date、RegExp、Error、undefined、Null等十幾種，ES6還有新增的資料型別有Symbol、Set、Map等，在實際應用中，我們經常需要判斷資料型別，現在我歸納幾種方法，希望對大家有所幫助，

typeof 判斷（最常用）

typeof 是 JS 提供的一個運算子，專門用來檢測一個變數的型別， typeof 有2種使用方式：typeof(運算式)和typeof 變數名，第一種是對運算式做運算，第二種是對變數做運算，

function doSomething() {
    console.log('Hello World!');
}
console.log(typeof 1); // number
console.log(typeof 'Hello'); // string
console.log(typeof []); // object
console.log(typeof {}); // object
console.log(typeof doSomething); // function
console.log(typeof true); // boolean
console.log(typeof new Date()); // object
console.log(typeof new RegExp()); // object
console.log(typeof JSON.stringify({
    name: 'zhencanhua'
})); // string
console.log(typeof null); // object
console.log(typeof undefined); // undefined
console.log(typeof (new Error('error!'))); // object

console.log(typeof a); // undefined
console.log(typeof Symbol()); // symbol
console.log(typeof new Set()); // object
console.log(typeof new Map()); // object

從上面列印結果可以看出，typeof 不能區分參考型資料的型別和 null，另我們可以使用 Array.isArray(arr) 將陣列型別的資料從中篩選出來，

instanceof 判斷（了解）

instanceof 用來檢測建構式的 prototype 屬性是否出現在某個實體物件的原型鏈上，語法：object（實體物件） instanceof constructor（建構式），是的話回傳 true，否則回傳 false，所以， instanceof 運算子只能用作物件的判斷，針對 typeof 不能判斷的參考型資料，我們可以使用 instanceof 運算子，

let arr1 = [1, 2, 3];
let obj1 = {
    name: '小明'
};
function Persion() { }
let persion1 = new Persion();
console.log(arr1 instanceof Array); // true
console.log(arr1 instanceof Object); // true，Array 是Object的子類
console.log(obj1 instanceof Object); // true
console.log(obj1 instanceof Array); // false
console.log(Persion instanceof Function, Persion instanceof Object); // true true
console.log(null instanceof Object); // false
console.log(persion1 instanceof Persion, persion1 instanceof Function, persion1 instanceof Object); // true false true
// String物件和Date物件都屬于Object型別
let str1 = 'Hello';
let str2 = new String();
let str3 = new String('你好');
let myDate = new Date();
console.log(str1 instanceof String, str1 instanceof Object); // false, false
console.log(str2 instanceof String, str2 instanceof Object); // true, true
console.log(str3 instanceof String, str3 instanceof Object); // true, true
console.log(myDate instanceof Date, myDate instanceof Object); // true, true

從上面的判斷可以看出，instanceof 的使用限制很多，而且還不能很清晰方便的判斷出一個實體是陣列還是物件或方法，

針對上面方法的弊端，我們可以使用 Object.prototype上的原生toString()方法來檢測資料的型別，

Object.prototype.toString.call() 判斷（最靠譜）

Object 是 JS 提供的原生物件， Object.prototype.toString對任何變數都會回傳這樣一個字串"[object class]"，class 就是 JS 內置物件的建構式的名字， call是用來改變呼叫函式作用域的，

Object.prototype.toString() 在toString方法被呼叫時執行下面的操作步驟：

獲取this物件的[[Class]]屬性的值，（所以使用call來改變this的指向）
將字串"[object "，第一步獲取的值, 以及 "]"拼接成新的字串并回傳，

[[Class]]是一個內部屬性,所有的物件(原生物件和宿主物件)都擁有該屬性，在規范中，[[Class]]是這么定義的: 內部屬性的描述， [[Class]] 是一個字串值，表明了該物件的型別，

讀了上面的說明，用 call 的關鍵地方就在第1步，獲取的是 this 物件，不加 call 改變作用域時 this 指向的是Object.prototype，

function doSomething() {
    console.log('Hello World!');
}
// 使用Object.prototype.toString.call來判斷
console.log(Object.prototype.toString.call(1)); // [object Number]
console.log(Object.prototype.toString.call('Hello')); // [object String]
console.log(Object.prototype.toString.call(false)); // [object Boolean]
console.log(Object.prototype.toString.call({})); // [object Object]
console.log(Object.prototype.toString.call([1, 2, 3])); // [object Array]
console.log(Object.prototype.toString.call(new Error('error!'))); // [object Error]
console.log(Object.prototype.toString.call(new Date())); // [object Date]
console.log(Object.prototype.toString.call(new RegExp())); // [object RegExp]
console.log(Object.prototype.toString.call(doSomething)); // [object Function]
console.log(Object.prototype.toString.call(null)); // [object Null]
console.log(Object.prototype.toString.call(undefined)); // [object Undefined]
console.log(Object.prototype.toString.call(JSON.stringify({
    name: 'zhencanhau'
}))); // [object String]
console.log(Object.prototype.toString.call(Math)); // [object Math]
console.log(Object.prototype.toString.call(Symbol('abc'))); // [object Symbol]
console.log(Object.prototype.toString.call(new Set())); // [object Set]
console.log(Object.prototype.toString.call(new Map())); // [object Map]

但在實際應用時我們只想獲取回傳的結果中陣列的第二項，比如"[object Number]"，我們只想要Number這段字符，那么我們可以寫個函式進行過濾：

// 通過定義一個公共函式獲取資料型別
function getTypeName(val) {
    let str = Object.prototype.toString.call(val);
    return /^\[object (.*)\]$/.exec(str)[1];
}
console.log(getTypeName(false)); // Boolean
console.log(getTypeName()); // Undefined
console.log(getTypeName(null)); // Null

上面的問題完美解決，

constructor 判斷（比較常用）

每一個物件實體都可以通過 constrcutor 物件來訪問它的建構式，JS 中內置了一些建構式：Object、Array、Function、Date、RegExp、String等，我們可以通過資料的 constrcutor 是否與其建構式相等來判斷資料的型別，

var arr = [];
var obj = {};
var date = new Date();
var num = 110;
var str = 'Hello';
var getName = function(){};
var sym = Symbol();
var set = new Set();
var map = new Map();

arr.constructor === Array; // true
obj.constructor === Object; // true
date.constructor === Date; // true
str.constructor === String; // true
getName.constructor === Function; // true
sym.constructor === Symbol; // true
set.constructor === Set; // true
map.constructor === Map // true

但是這種方式仍然有個弊端，就是 constructor 所指向的的建構式是可以被修改的，

function Name(name) {
    this.name = name;
}

function Stuent(age) {
    this.age = age;
}
// 將建構式Name的實體賦給Student的原型，Student的原型的建構式會發生改變，將不再指向自身，
Stuent.prototype = new Name('張三');
Stuent.prototype.constructor === Name; // true
Stuent.prototype.constructor === Stuent; // false

以上就是我在專案中用到過的資料型別的判斷方法，具體使用哪一種，還需要根據自己的實際需求來判斷選擇，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/45583.html

標籤：JavaScript

上一篇：JavaScript圖形實體：迭代函式系統生成圖形

下一篇：使用Electron開發桌面應用