JavaScript数据类型检测实现方法详解
xiaomei1994 · 167浏览 · 发布于2022-11-04
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
相关推荐
PHP实现部分字符隐藏
沙雕mars · 1321浏览 · 2019-04-28 09:47:56
Java中ArrayList和LinkedList区别
kenrry1992 · 905浏览 · 2019-05-08 21:14:54
5月语言排行榜:R 跌出前二十,Python 紧咬 C++
manongba · 685浏览 · 2019-05-09 17:27:24
Tomcat 下载及安装配置
manongba · 966浏览 · 2019-05-13 21:03:56
什么是SpringBoot
iamitnan · 1084浏览 · 2019-05-14 22:20:36
分类专栏
最新发布
最热排行
0评论