javascript 数据类型判断

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; //  “object”

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; // true

var 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相关文章github.com

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,055评论 0 13
  • 原文: https://github.com/ecomfe/spec/blob/master/javascript...
    zock阅读 3,341评论 2 36
  • 今天尘埃落定,尊重内心的决定,选择了培训模块工作继续深入耕耘,进入一家医药公司担任培训模块负责人。 首先基于自己的...
    DennisFly阅读 173评论 2 0
  • 今天第一天读书。只看了序言
    琳琳乖阅读 236评论 0 0
  • 日新楼铁板招牌鸡饭,是我在日新楼最爱的几家之一,口味偏甜,料很足,配菜有豆芽肉松蘑菇,一个人能吃完一盘
    冻梨梨阅读 92评论 0 0