博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript 数据类型判断 (常见库的数据类型判断源码的分析)
阅读量:5942 次
发布时间:2019-06-19

本文共 4908 字,大约阅读时间需要 16 分钟。

JavaScript一共有六种数据类型,分为原始类型(又名基本类型)和对象类型(又名引用类型)

原始类型有五种,分别为number,string,boolean,undefined,null五种。

对象类型常见的有Function,Array,Date,正则

ES6新增Symbol

JavaScript 自己提供的乐行判断

type

如果不对对象做严格区分使用type。

number:

typeof 1; // "number"

string:

typeof 'hello world'; // "string"

boolean:

typeof true; // "boolean"

undefined:

typeof undefined; // "undefined"

null:

typeof null; // "undefined" (特别)

object:

typeof {};  // "object"

Symbol:

typeof Symbol(); // "symbol"

null要单独处理,就像jQuery中一样,如果要判断的对象为null,就直接返回 String(obj)

因此,可以写一个判断基本类型的方法:

var type = function(obj) {    if(obj === null) return String(obj);    return typeof obj;}

instanceof

instanceof 是用来明确对象为某种特定类型的方法。

instanceof 的实现使用了原型继承的L表示左表达式,R表示右表达式,它是用L.__proto__ 是否等于 R.prototype 来判断对象的类型的。

String:

var str = new String('hello world');str instanceof String // true

String:

var str = new Number('10');str instanceof String // true

Datte:

var o = new Date();o instanceof Date; // true

Array:

var o = new Array();o instanceof Array; // true

RegExp:

var reg = new RegExp('/^[a-z]$/');reg instanceof RegExp; // true

Object:

var o = new Object();o instanceof Object; // truevar o2 = {};o2 instanceof Object; // true

Function:

var o = function() {};o instanceof Function; // true

Func(自定义):

function Func() {}var o = new Func();o instanceof Func; // true

instanceof 即可以验证自定义对象,也可以验证内置对象类型,但有一点我们要注意,那就是他们本身就是对象。

var str = new String('hello world');str instanceof Object; // true

我们在一开始就说明了instanceof的实现原理,知道instanceof左边是右边的实例,所以我们可以用如下代码获取对象的类型名:

obje.__proto__.constructor.name;

因此,我们可以写一个判断对象类型的方法如下:

objectType = function(obj) {    if(typeof obj === 'object' || typeof obj === 'function') {        return obj.__proto__.constructor.name;    }}

上面的方法虽好,但是ie浏览器不支持 __proto__(这个属性也是我们判断浏览器与非浏览器的常用方式)。

下面介绍一个万能的方法。

Object.prototype.toString.call(obj)

Object.prototype.toString.call('hello world'); // "[object String]"Object.prototype.toString.call(1); // "[object Number]"Object.prototype.toString.call(true); // "[object Boolean]"Object.prototype.toString.call(null); // "[object Null]"Object.prototype.toString.call(); // "[object Undefined]"Object.prototype.toString.call([]); // "[object Array]"Object.prototype.toString.call({}); // "[object Object]"Object.prototype.toString.call(new Date()); // "[object Date]"Object.prototype.toString.call(/test/i); // "[object RegExpArray]"Object.prototype.toString.call(function () {}); // "[object Function]"

获取数据类型的代码如下:

var core_toString = Object.prototype.toString;var getObjectType = function(obj) () {    return core_toString.call(obj).slice(8, -1);}

这个方法可以判断所有的数据类型,也是官方推荐的,但是在实际的开发中,我们使用 typeof 来判断基本类型,用 Objet.prototype.toString.call(obj) 判断引用类型。

常见框架和库的实数据类型判断

jQuery:

var class2type = {};var core_toString = Object.prototype.toString;"Boolean Number String Function Array Date RegExp Object Error".split(' ').forEach(function(name, i) {    class2type["[object " + name + "]"] = name.toLowerCase();});var getType = function (obj) {    if (obj == null) {        return String(obj);    }    return typeof obj === "object" || typeof obj === "function" ?        class2type[ core_toString.call(obj) ] || "object" :        typeof obj;};// 测试getType(function(){}); // "function"getType([]); // "array"

这里将jQuery的实现原理抽取出来,用原生js实现。

vue.js

/** * 判断是否为基本数据类型 */function isPrimitive (value) {  return (    typeof value === 'string' ||    typeof value === 'number' ||    // $flow-disable-line    typeof value === 'symbol' ||    typeof value === 'boolean'  )}/** * 判断是否为普通对象 */function isObject (obj) {  return obj !== null && typeof obj === 'object'}/** * 获取原生类型,如: [object Object] */var _toString = Object.prototype.toString;function toRawType (value) {  return _toString.call(value).slice(8, -1)}/** * 普通对象 */function isPlainObject (obj) {  return _toString.call(obj) === '[object Object]'}/** * 正则对象 */function isRegExp (v) {  return _toString.call(v) === '[object RegExp]'}

angular2:

function isPresent(obj) {return obj !== undefined && obj !== null;}exports.isPresent = isPresent;function isBlank(obj) {return obj === undefined || obj === null;}exports.isBlank = isBlank;function isBoolean(obj) {return typeof obj === "boolean";}exports.isBoolean = isBoolean;function isNumber(obj) {return typeof obj === "number";}exports.isNumber = isNumber;function isString(obj) {return typeof obj === "string";}exports.isString = isString;function isFunction(obj) {return typeof obj === "function";}exports.isFunction = isFunction;function isType(obj) {return isFunction(obj);}exports.isType = isType;function isStringMap(obj) {return typeof obj === 'object' && obj !== null;}exports.isStringMap = isStringMap;function isPromise(obj) {return obj instanceof _global.Promise;}exports.isPromise = isPromise;function isArray(obj) {return Array.isArray(obj);}exports.isArray = isArray;function isDate(obj) {return obj instanceof exports.Date && !isNaN(obj.valueOf());}exports.isDate = isDate;

我们常见的就是这几种实现方式,或是这几种方式的混合(zepto.js)。

JavaScript相关文章

转载地址:http://djqtx.baihongyu.com/

你可能感兴趣的文章
eventEmitter3源码分析与学习
查看>>
关于缓存命中率的几个关键问题!
查看>>
崛起的中国服务器市场迎来旺盛的SPEC测试需求
查看>>
视频转成flv格式
查看>>
客服运营三部曲
查看>>
《Python硬件编程实战》——2.8 在Mac中安装Python
查看>>
《iOS应用开发指南——使用HTML5、CSS3和JavaScript》——导读
查看>>
小测一下fastjson的速度(纯娱乐)
查看>>
如何做618数据复盘?你需要掌握这8大思路
查看>>
《ANSYS FLUENT 16.0超级学习手册》——2.5 FLUENT 16.0的基本操作
查看>>
深入理解Spark:核心思想与源码分析. 3.9 启动测量系统MetricsSystem
查看>>
讲给普通人听的分布式数据存储
查看>>
《C++面向对象高效编程(第2版)》——3.13 采用语义
查看>>
《 短文本数据理解》——2.5小结
查看>>
如何编写一个全新的 Git 协议
查看>>
马云携阿里17位创始人及合伙人捐赠浙大一院5.6亿,杭州渐成中国硅谷
查看>>
《libGDX移动游戏开发从入门到精通》一第2章 libGDX的架构分析
查看>>
《配置管理最佳实践》——2.10 建立构建过程
查看>>
《C++入门经典(第5版•修订版)》——2.6 问与答
查看>>
PLM调研第二天
查看>>