JS数据类型判断

typeof 判断(最常用)

typeof 是 JS 提供的一个运算符,专门用来检测一个变量的类型 。 typeof 有2种使用方式:typeof(表达式)和typeof 变量名,第一种是对表达式做运算,第二种是对变量做运算。

function doSomething() {

    console.log('Hello World!');

}

console.log(typeof 1); // number

console.log(typeof 'Hello'); // string

console.log(typeof []); // object

console.log(typeof {}); // object

console.log(typeof doSomething); // function

console.log(typeof true); // boolean

console.log(typeof new Date()); // object

console.log(typeof new RegExp()); // object

console.log(typeof JSON.stringify({

    name: 'zhencanhua'

})); // string

console.log(typeof null); // object

console.log(typeof undefined); // undefined

console.log(typeof (new Error('error!'))); // object

console.log(typeof a); // undefined

console.log(typeof Symbol()); // symbol

console.log(typeof new Set()); // object

console.log(typeof new Map()); // object

从上面打印结果可以看出,typeof 不能区分引用型数据的类型和 null。另我们可以使用 Array.isArray(arr) 将数组类型的数据从中筛选出来。

instanceof 判断(了解)

instanceof 用来检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。 语法:object(实例对象) instanceof constructor(构造函数)。是的话返回 true,否则返回 false。所以, instanceof 运算符只能用作对象的判断。 针对 typeof 不能判断的引用型数据,我们可以使用 instanceof 运算符。

let arr1 = [1, 2, 3];

let obj1 = {

    name: '小明'

};

function Persion() { }

let persion1 = new Persion();

console.log(arr1 instanceof Array); // true

console.log(arr1 instanceof Object); // true,Array 是Object的子类

console.log(obj1 instanceof Object); // true

console.log(obj1 instanceof Array); // false

console.log(Persion instanceof Function, Persion instanceof Object); // true true

console.log(null instanceof Object); // false

console.log(persion1 instanceof Persion, persion1 instanceof Function, persion1 instanceof Object); // true false true

// String对象和Date对象都属于Object类型

let str1 = 'Hello';

let str2 = new String();

let str3 = new String('你好');

let myDate = new Date();

console.log(str1 instanceof String, str1 instanceof Object); // false, false

console.log(str2 instanceof String, str2 instanceof Object); // true, true

console.log(str3 instanceof String, str3 instanceof Object); // true, true

console.log(myDate instanceof Date, myDate instanceof Object); // true, true

从上面的判断可以看出,instanceof 的使用限制很多,而且还不能很清晰方便的判断出一个实例是数组还是对象或方法。

针对上面方法的弊端,我们可以使用 Object.prototype上的原生toString()方法来检测数据的类型。

Object.prototype.toString.call() 判断(最靠谱)

Object 是 JS 提供的原生对象, Object.prototype.toString对任何变量都会返回这样一个字符串"[object class]",class 就是 JS 内置对象的构造函数的名字。 call是用来改变调用函数作用域的。

Object.prototype.toString() 在toString方法被调用时执行下面的操作步骤:

获取this对象的[[Class]]属性的值。(所以使用call来改变this的指向)

将字符串"[object ",第一步获取的值, 以及 "]"拼接成新的字符串并返回。

[[Class]]是一个内部属性,所有的对象(原生对象和宿主对象)都拥有该属性。在规范中,[[Class]]是这么定义的: 内部属性的描述, [[Class]] 是一个字符串值,表明了该对象的类型。

读了上面的说明,用 call 的关键地方就在第1步,获取的是 this 对象,不加 call 改变作用域时 this 指向的是Object.prototype。

function doSomething() {

    console.log('Hello World!');

}

// 使用Object.prototype.toString.call来判断

console.log(Object.prototype.toString.call(1)); // [object Number]

console.log(Object.prototype.toString.call('Hello')); // [object String]

console.log(Object.prototype.toString.call(false)); // [object Boolean]

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

console.log(Object.prototype.toString.call([1, 2, 3])); // [object Array]

console.log(Object.prototype.toString.call(new Error('error!'))); // [object Error]

console.log(Object.prototype.toString.call(new Date())); // [object Date]

console.log(Object.prototype.toString.call(new RegExp())); // [object RegExp]

console.log(Object.prototype.toString.call(doSomething)); // [object Function]

console.log(Object.prototype.toString.call(null)); // [object Null]

console.log(Object.prototype.toString.call(undefined)); // [object Undefined]

console.log(Object.prototype.toString.call(JSON.stringify({

    name: 'zhencanhau'

}))); // [object String]

console.log(Object.prototype.toString.call(Math)); // [object Math]

console.log(Object.prototype.toString.call(Symbol('abc'))); // [object Symbol]

console.log(Object.prototype.toString.call(new Set())); // [object Set]

console.log(Object.prototype.toString.call(new Map())); // [object Map]

但在实际应用时我们只想获取返回的结果中数组的第二项,比如"[object Number]",我们只想要Number这段字符,那么我们可以写个函数进行过滤:

// 通过定义一个公共函数获取数据类型

function getTypeName(val) {

    let str = Object.prototype.toString.call(val);

    return /^\[object (.*)\]$/.exec(str)[1];

}

console.log(getTypeName(false)); // Boolean

console.log(getTypeName()); // Undefined

console.log(getTypeName(null)); // Null

上面的问题完美解决。

constructor 判断(比较常用)

每一个对象实例都可以通过 constrcutor 对象来访问它的构造函数 。JS 中内置了一些构造函数:Object、Array、Function、Date、RegExp、String等。我们可以通过数据的 constrcutor 是否与其构造函数相等来判断数据的类型。

var arr = [];

var obj = {};

var date = new Date();

var num = 110;

var str = 'Hello';

var getName = function(){};

var sym = Symbol();

var set = new Set();

var map = new Map();

arr.constructor === Array; // true

obj.constructor === Object; // true

date.constructor === Date; // true

str.constructor === String; // true

getName.constructor === Function; // true

sym.constructor === Symbol; // true

set.constructor === Set; // true

map.constructor === Map // true

但是这种方式仍然有个弊端,就是 constructor 所指向的的构造函数是可以被修改的。

function Name(name) {

    this.name = name;

}

function Stuent(age) {

    this.age = age;

}

// 将构造函数Name的实例赋给Student的原型,Student的原型的构造函数会发生改变,将不再指向自身。

Stuent.prototype = new Name('张三');

Stuent.prototype.constructor === Name; // true

Stuent.prototype.constructor === Stuent; // false

亚马逊测评 www.yisuping.com

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