JavaScript 类型判断

用户头像
Verlime
关注
发布于: 2020 年 07 月 21 日

JavaScript 里共有七种基本数据类型,分别为 String, Number, Boolean, Null, Undefined , SymbolBigInt,还有一种引用类型 Object。有些场景下我们可能需要对相应的数据进行类型判断,这里就来简单介绍一下。



对于 String, Number, Boolean, Symbol, BigInt 这几种类型我们可以直接使用 typeof 判断,例如:



console.log(typeof 'hello');
// string
console.log(typeof 123);
// number
console.log(typeof true);
// boolean
console.log(typeof Symbol());
// symbol
console.log(typeof 9007199254740991n);
// bigint



这几种类型判断可以直接返回对应的字符串,但是对于数组、函数、JSON对象之类的数据用 typeof 就不好判断了。



function foo () {
return 'foo';
}
console.log(typeof [1, 5, 7]);
// object
console.log(typeof null);
// object
console.log(typeof undefined);
// undefined
console.log(typeof foo);
// function
console.log(typeof new Date());
// object
console.log(typeof {message: 'hello'});
// object



从上面结果可以看到数组、JSON 对象、null 以及内置函数(例如 new Date())通过 typeof 判断后返回的结果均为 object,可见仅仅通过 typeof 是无法区分它们的。null 一般直接用 === 判断就可以了,下面来看一下如何区分数组和 JSON 对象。



这里可以使用 instanceof 运算符,它可以用来判断一个对象在其原型链上是否存在一个 prototype 属性,例如。



function A() {}
function B() {}
var o = new A();
console.log(o instanceof A);
console.log(Object.getPrototypeOf(o) === A.prototype);
// true
// true
console.log(o instanceof B);
// false



然后回到本文来看一个例子:



console.log([1, 3, 5] instanceof Array);
// true
console.log([1, 3, 5] instanceof Object);
// true
console.log({a: '1'} instanceof Array);
// false
console.log({a: '1'} instanceof Object);
// true



从这里可以看出,判断是不是数组直接用 instanceof Array 就可以了,但是判断是不是 JSON 对象需要先判断它不是数组,因为数组也是 Object。

这里封装了一个方法,可以判断一个数据是数组还是对象。



function getDataType (data) {
if (data instanceof Array) {
return 'Array';
} else if (data instanceof Object) {
return 'Object';
} else {
return 'param is not a object type';
}
}
console.log(getDataType([]));
// Array
console.log(getDataType({a: 1}));
// Object



最后我们还有一个终极的方法,那就是

Object.prototype.toString.call(target),例如:



Object.prototype.toString.call(true)
// [object Boolean]
Object.prototype.toString.call([1, 2])
// [object Array]
Object.prototype.toString.call(10)
// [object Number]
Object.prototype.toString.call(function () {})
// [object Function]
Object.prototype.toString.call({})
// [object Object]



我们可以看到通过这种方式精确的输出了目标的类型,因此可以通过判断 Object.prototype.toString.call(target)[object ${type}] 是否相等来确定目标类型,比如判断目标是否为 Function:



var isFunction = function (target) {
return Object.prototype.toString.call(target) === '[object Function]';
}
isFunction(function () {});
// true



然后封装一个比较通用的方法,就可以判断各种类型了:



var utils = {};
utils.isType = function (type, target) {
return Object.prototype.toString.call(target) === `[object ${type}]`;
};
['Boolean', 'Number', 'String', 'Function', 'Array', 'Date', 'RegExp', 'Object', 'Error'].forEach(item => {
utils['is' + item] = target => utils.isType(item, target);
})
// test
utils.isArray([1, 2, 3]);
// true
utils.isObject({a: '11'});
// true
utils.isString('hello');
// true



Ok, 以上就是对于JavaScript 类型判断的一些总结。



发布于: 2020 年 07 月 21 日 阅读数: 30
用户头像

Verlime

关注

一个前端工程师 2018.01.01 加入

每天进步一点点ヽ(•̀ω•́ )ゝ

评论

发布
暂无评论
JavaScript 类型判断