如何判断 JavaScript 中的数据类型

98 阅读1分钟

我们知道 JavaScript 数据类型中分为基本数据类型和引用数据类型(复杂数据类型)。

基本数据类型:number、string、boolean、undefined、symbol、null。

引用数据类型:object。

那么如何判断这些数据类型呢,JavaScript 为我们提供了几种方式:

typeof:

console.log('typeof');
console.log(typeof 1); // number
console.log(typeof 'name'); // string
console.log(typeof undefined); // undefined
console.log(typeof Symbol()); // symbol
console.log(typeof true); // boolean
console.log(typeof null); // object
console.log(typeof {}); // object
console.log(typeof []); // object
console.log(typeof new Date()); // object
console.log(typeof /\s/); // object
console.log(typeof function func() { }); // function
console.log(typeof NaN); // number

typeof 返回的是右侧数据的类型字符串,通过上面代码可以看出,typeof 用在引用数据类型的时候就不能准确的返回类型结果了,另外在判断 null 的时候得到的是 object 也是有歧义的。

instanceof:

console.log('instanceof');
console.log([] instanceof Array); // true
console.log([] instanceof Object); // true
console.log({} instanceof Object); // true

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上,返回的是布尔值。显然 instanceof 不能判断基本数据类型。

Object.prototype.toString.call

Object.prototype.toString() 返回 "[object Type]",这里的 Type 是对象的类型

function isType(content, type) {
    return Number.isNaN(content)
    ? false
    : Object.prototype.toString.call(content) === `[object ${type}]`;
}

console.log(isType('name', 'String')); // true
console.log(isType([], 'Array')); // true
console.log(isType(1, 'Number')); // true
console.log(isType(function () { }, 'Function')); // true
console.log(isType({}, 'Object')); // true
console.log(isType(null, 'Null')); // true
console.log(isType(undefined, 'Undefined')); // true
console.log(isType(true, 'Boolean')); // true
console.log(isType(Symbol(), 'Symbol')); // true
console.log(isType(new Date(), 'Date')); // true
console.log(isType(new RegExp(), 'RegExp')); // true
console.log(isType(NaN, 'NaN')); // true

isType 是我用在项目中的工具方法,其中对 NaN 做了额外处理。

总结

还有一个判断类型的方法是对象的 contructor 属性,但是这个我基本不用,所以也没列举在文章中,我在项目基本是使用 isType 封装的 Object.prototype.toString 来判断数据类型。