JavaScript中检测数据类型的四种方法总结

 更新时间:2023年04月14日 11:31:12   作者:施主来了  
这篇文章主要为大家详细介绍了四个JavaScript中检测数据类型的常用方法,文中的示例代码讲解详细,具有一定的参考价值,需要的可以参考一下

检测数据类型1:typeof

其返回结果都是字符串,字符串中包含了对应的数据类型 number/string/boolean/undefined/symbol/object/function

局限性:检测null返回的是object,检测其他如数组、正则等特殊对象时,返回的结果都是object,无法区分具体类型。

console.log(typeof 12); //=>"number"
console.log(typeof null); //=>"object"
console.log(typeof []); //=>"object"
console.log(typeof /^$/); //=>"object"

检测数据类型2:instanceof

用于检测某个实例是否属于这个类,其检测的底层机制是所有出现在其原型链上的类,检测结果都是true

局限性:由于可以基于__proto__或者prototype改动原型链的动向,所以基于instanceof检测出来的结果并不一定是准确的。而基本数据类型的值,连对象都不是,更没有__proto__,虽说也是所属类的实例,在JS中也可以调取所属类原型上的方法,但是instanceof是不认的。

console.log(12 instanceof Number); //false
console.log(new Number(12) instanceof Number); //true
console.log([] instanceof Array); //true
console.log([] instanceof Object); //true

function Fn() {}
Fn.prototype.__proto__ = Array.prototype;
let f = new Fn();
console.log(f instanceof Array); //true

检测数据类型3:constructor

这是实例所属类原型上的属性,指向的是类本身,但其也是可以进行修改,与instanceof类似。

let arr = [];
console.log(arr.constructor); //ƒ Array() { [native code] }
console.log(arr.constructor === Array); //true

let n=12;
console.log(n.constructor === Number); //true

检测数据类型4:Object.prototype.toString.call([value]) / ({}).toString.call([value])  

该方法不是用来转换为字符串的,而是返回当前实例所属类的信息,其返回结果的格式为[object 所属类信息],即[object Object/Array/RegExp/Date/Function/Null/Undefined/Number/String/Boolean/Symbol...]

这种方式基本上没有什么局限性,是检测数据类型相对来说最准确的方式。

console.log(Object.prototype.toString.call(12)); //[object Number]
console.log(Object.prototype.toString.call([])); //[object Array]
console.log(Object.prototype.toString.call({})); //[object Object]

function fn () {}
console.log(({}).toString.call(fn)); //[object Function]
console.log(({}).toString.call(/^$/)); //[object RegExp]
console.log(({}).toString.call(new Date)); //[object Date]

虽然检测数据类型4相对来说最好,但格式稍微繁琐一些,是不是可以想办法封装一个方法,输出结果类似于typeof那种,直接输出如number、date、regexp这种,确实是有的。

var class2type = {};
var toString = class2type.toString; //=>Object.prototype.toString
var hasOwn = class2type.hasOwnProperty; //=>Object.prototype.hasOwnProperty
var fnToString = hasOwn.toString; //=>Function.prototype.toString
var ObjectFunctionString = fnToString.call(Object); //=>Object.toString() =>"function Object() { [native code] }"

"Boolean Number String Function Array Date RegExp Object Error Symbol".split(" ").forEach(function anonymous(item) {
    class2type["[object " + item + "]"] = item.toLowerCase();
});
console.log(class2type);
/* [object Boolean]: "boolean"
[object Number]: "number"
[object String]: "string"
[object Function]: "function"
[object Array]: "array"
[object Date]: "date"
[object RegExp]: "regexp"
[object Object]: "object"
[object Error]: "error"
[object Symbol]: "symbol"
*/

function toType(obj) {
    //=>obj may be null / undefined
    //=>return "null"/"undefined"
    if (obj == null) {
        return obj + "";
    }

    return typeof obj === "object" || typeof obj === "function" ? class2type[toString.call(obj)] || "object" : typeof obj;
}

这是jQuery中用来检测数据的方法,可以达到我们说的需求。

当然,现在公司的项目中用jQuery的已经不多了,面试会问的就更少了,但是其中的很多方法和思想还是值得我们去研究。

到此这篇关于JavaScript中检测数据类型的四种方法总结的文章就介绍到这了,更多相关JavaScript检测数据类型内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 聊聊JavaScript中的try...catch使用小技巧

    聊聊JavaScript中的try...catch使用小技巧

    作为一名web前端工程师,JavaScript中的try...catch是我们常用的特性之一,用于处理代码中可能出现的错误,本文小编将和大家一起聊聊JavaScript中的try...catch使用小技巧,需要的朋友可以参考下
    2023-11-11
  • 『JavaScript』限制Input只能输入数字实现思路及代码

    『JavaScript』限制Input只能输入数字实现思路及代码

    一个文字方块必须限制只能输入数字(或是小数点)并且要支援 IE 和 Firefox,接下来为大家介绍下如何解决这个需求
    2013-04-04
  • JS实现隔行换色的表格排序

    JS实现隔行换色的表格排序

    本篇文章主要介绍了JS实现隔行换色的表格排序的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • csdn 论坛技术区平均给分功能

    csdn 论坛技术区平均给分功能

    看论坛里技术区没有平均给分的功能,感觉散分很不方便,就写了一个:IE8,FF3.5下测试ok
    2009-11-11
  • JS中如何将base64转换成file

    JS中如何将base64转换成file

    这篇文章主要介绍了JS中如何将base64转换成file的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 使用JS模拟锚点跳转的实例

    使用JS模拟锚点跳转的实例

    下面小编就为大家分享一篇使用JS模拟锚点跳转的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • ES6新特性之模块Module用法详解

    ES6新特性之模块Module用法详解

    这篇文章主要介绍了ES6新特性之模块Module用法,简要说明了模块Module的概念、功能并结合实例形式分析了模块Module的使用方法与相关注意事项,需要的朋友可以参考下
    2017-04-04
  • JS获取dom 对象 ajax操作 读写cookie函数

    JS获取dom 对象 ajax操作 读写cookie函数

    一些常用的JS (JONEAjax) 获取dom 对象,ajax操作,读写cookie类代码,需要的朋友可以参考下。
    2009-11-11
  • JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析

    JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析

    这篇文章主要介绍了JavaScript+Canvas实现彩色图片转换成黑白图片的方法,结合实例形式分析了javascript结合HTML5相关函数修改页面图片元素显示效果相关操作技巧,需要的朋友可以参考下
    2018-07-07
  • JavaScript开发中需要搞懂的字符编码总结

    JavaScript开发中需要搞懂的字符编码总结

    字符集就是字符的集合,字符编码则代表字符集的实际编码规则,是用于计算机解析字符的。本文为大家整理了JavaScript开发中需要搞懂的字符编码,希望对大家有所帮助
    2023-02-02

最新评论