简述js来判断数据类型

[TOC]

前言

​ 最近看了一篇文章,说是关于‘[object Object],[object Function]’等相关用词,偶尔一想以前项目开发也是遇到这种情况,譬如请求的数据也没具体分析是什么类型的数据,就直接使用toString将其序列化就会导致上述打印的报错或者提示信息,其实根据打印我们很是容易分析出来并将其更正过来,不会影响开发进程。但项目完成阶段,还是想看着这些‘屌炸天’的打印是怎么导致的,有什么作用。大佬很多,自己也学到了一些皮毛,但还是想利用闲的时光来梳理自己认知的东西(闲的慌)。利用譬如:‘[object Object],[object Function],[object Null]’等来判断js的8种数据类型,不是同以往的typeof或者instanceof来判断数据类型。

技术还原

一. 使用Object.prototype.toString.call()方法产生结果进行判断

1>. 判断5种基本数据类型

console.log(Object.prototype.toString.call(12)); //[object Number]
console.log(Object.prototype.toString.call('12')); // [object String]
console.log(Object.prototype.toString.call(true)); // [object Boolean]
console.log(Object.prototype.toString.call(undefined)); // [object Undefined]
console.log(Object.prototype.toString.call(null)); // [object Null]

调用Object构造函数的原型中toString方法,这里面的call解决了谁调用的问题,call或者apply常用改变指针的指向,简单来说就是它们调用原型中toString方法,通过上次简单代码打印,结果格式都是[object ...],而且都是截然不同的。这三种是js中基本数据类型,下面来看看引用类型的结果--->

2>. 判断3种引用类型

var arr = ['12','as'];
var obj = {
 name: 'yy',
 age: 26,
 gender: 'man'
};
var fn = function () {
 console.log('hello world!');
};

console.log(Object.prototype.toString.call(arr)); //[object Array]
console.log(Object.prototype.toString.call(obj)); // [object Object]
console.log(Object.prototype.toString.call(fn)); // [object Function]

上述代码打印结果,都是截然不同,因此完成可以通过使用这种方法来判断js数据类型,我们可以不在拘束于一些typeof,installof不太严谨的写法来判断数据结构类型

二. 使用typeof来判断js的数据类型

1>. 判断5种基本数据类型

console.log(typeof '12'); // string
console.log(typeof 12);  // number
console.log(typeof undefined); // underfined
console.log(typeof true); // boolean
console.log(typeof null); // object

上述代码打印,可以看出除了不能判断null这种数据类型,其它4种都是可以通过typeof来进行判断数据类型。当然我们想null为啥类型打印时’object‘呢,很神奇有趣的现象,'你不知道的JavaScript'解释,其实相对于js的bug,不过可以这么理解null是由obect派生出来的,那个bug可以看如下代码打印:

var arr = ['12','as'];
var obj = {
 name: '杨毅',
 age: 23,
 gender: 'man'
};
var fn = function () {
 console.log('hello world!');
};
console.log(arr instanceof Object); // true
console.log(obj instanceof Object); // true
console.log(fn instanceof Object); // true
console.log(null instanceof Object); // false
console.log(12 instanceof Object); // false
console.log('123' instanceof Object); // false
console.log(new Null() instanceof Object) // 报错

instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上,不过也通过这个可以看出js将null归分于基本数据类型,但是无论如何使用typeof无法看出是null还是引用类型,代码如下

2>.判断三种引用类型

var arr = ['12','as'];
var obj = {
 name: 'yy',
 age: 25,
 gender: 'man'
};
var fn = function () {
 console.log('hello world!');
};
console.log(typeof arr); // object
console.log(typeof obj); // Object
console.log(typeof fn);  // function

三. 使用instanceof来判断数据类型

instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上。简单来说能验证new构造函数创建出来的实例,不能验证字面量创建出来的

console.log('abc' instanceof String); // false
console.log(new String('abc') instanceof String); // true
console.log(12 instanceof Number); // false
console.log(new Number(12) instanceof Number); // true
console.log(true instanceof Boolean); // false
console.log(new Boolean(true) instanceof Boolean); // true
console.log({name: 'yy'} instanceof Object); // true
console.log(new Object({name: 'yy'}) instanceof Object); // true
console.log(['12','123'] instanceof Object); // true
console.log(['12','123'] instanceof Array); // true
console.log(new Array('12',32) instanceof Object); // true
console.log(new Array('12',32) instanceof Array); // true
console.log(function () {} instanceof Object); // true
console.log(function () {} instanceof Function); // true
console.log(new Function() instanceof Function); // true
console.log(new Date() instanceof Object); // true
console.log(new RegExp instanceof Object); // true
console.log(new String('abc') instanceof Object); // true
console.log(new Number(12) instanceof Object); // true

从上述可以看出:1.字面量创建的基本类型都是不能使用instanceof来判断数据类型的,而引用类型字面量创建的又是可以使用instanceof来判断的。2.不管是基本数据类型还是引用类型的构造函数创建的实例都是派生Object的,也就是说Object处于他们的原型链之上,这是很重要的结论,因为通过原型链的理论,完全可以再Object的原型自定义方法,让其它数据类型数据共享这些方法,那样数据类型都是可以通过原型链查找使用该方法(不考虑那些实例重写这些方法)。代码如下:

Object.prototype.sayHello = function () {
         alert('hello everyone!')
       }
var a = 1;
a.sayHello();
var b = 'abd';
b.sayHello();
var c = true;
c.sayHello()
var d = undefined;
d.sayHello(); // 报错
var e = null;
e.sayHello(); // 报错
var f = {name: 'yy'};
f.sayHello();
var g = ['12','as']
g.sayHello();
var h = function () {};
h.sayHello()
// 另一种写发,使用call改变this指向的写法
Object.prototype.sayHello.call(a)

总结

​ 仅为记忆所写,得不到的永远是最美好的

爱代码,爱生活!

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

推荐阅读更多精彩内容