JavaScript数据类型检测实现方法详解
作者:欢莱
Javascript中检查数据类型一直是老生常谈的问题,类型判断在web开发中也有着非常广泛的应用,所以下面这篇文章主要给大家介绍了关于JS数据类型检测的那些事,需要的朋友可以参考下
一、typeof
- 优点:能快速判断基本数据类型,除了
Null
; - 缺点:不能判别
Object
、Array
、Null
,都返回object
;判别引用类型除函数显示function
外,其他显示为object
console.log(typeof 55); // number console.log(typeof true); // boolean console.log(typeof 'aa'); // string console.log(typeof undefined); // undefined console.log(typeof function(){}); // function console.log(typeof Symbol("foo")); // symbol console.log(typeof 553119869n); // bigint // 不能判别 console.log(typeof []); // object console.log(typeof {}); // object console.log(typeof null); // object
二、instanceof
MDN:
instanceof
运算符 用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
理解:判断在其原型链中能否找到该类型的原型。
语法:
object instanceof constructor
function D(){} var o = new D(); o instanceof D; // true o instanceof Object; // true
- 优点:能区分
Array
、Object
和Function
,适用于判断自定义的类实例对象 - 缺点:不能判断
Number
,Boolean
,String
基本数据类型
console.log(55 instanceof Number); // false console.log(true instanceof Boolean); // false console.log('aa' instanceof String); // false console.log([] instanceof Array); // true console.log(function(){} instanceof Function); // true console.log({} instanceof Object); // true
String 对象和 Date 对象都属于 Object 类型 和 一些特殊情况:
var simpleStr = "a simple string"; var objStr = new String(); var newStr = new String("String created with constructor"); var aDate = new Date(); var myNonObj = Object.create(null); simpleStr instanceof String; // false,非对象实例,因此返回 false objStr instanceof String; // true newStr instanceof String; // true objStr instanceof Object; // true myNonObj instanceof Object; // false,一种创建非 Object 实例的对象的方法 aDate instanceof Date; // true aDate instanceof Object; // true
三、Object.prototype.toString.call()
- 优点:精准判断数据类型,所有原始数据类型都是能判断;
- 缺点:写法繁琐,最好进行封装后使用
var toString = Object.prototype.toString; console.log(toString.call(55)); // [object Number] console.log(toString.call(true)); // [object Boolean] console.log(toString.call('aa')); // [object String] console.log(toString.call([])); // [object Array] console.log(toString.call(function(){})); // [object Function] console.log(toString.call({})); // [object Object] console.log(toString.call(undefined)); // [object Undefined] console.log(toString.call(null)); // [object Null] console.log(toString.call(Math)); // [object Math] console.log(toString.call(Set)); // [object Function] Set 构造函数 console.log(toString.call(Array)); // [object Function] Array 构造函数 console.log(toString.call(Map)); // [object Function] console.log(toString.call(Date)); // [object Function] console.log(toString.call(new Set())); // [object Set] console.log(toString.call(new Array())); // [object Array] console.log(toString.call(new Map())); // [object Map] console.log(toString.call(new Date())); // [object Date] function D(){} console.log(toString.call(D)); // [object Function] console.log(toString.call(new D())); // [object Object]
面试问题
如何判断变量是否为数组?
let arr = [] console.log(Array.isArray(arr)); // true arr.__proto__ === Array.prototype; // true arr instanceof Array; // true Object.prototype.toString.call(arr);// [object Array]
判断是否是 Promise 对象
function isPromise(val) { return ( typeof val.then === 'function' && typeof val.catch === 'function' ) } let p = new Promise((resolve, reject) => {}); console.log(isPromise(p)); // true
到此这篇关于JavaScript数据类型检测实现方法详解的文章就介绍到这了,更多相关JS数据类型检测内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!