web前端:js 判断数据类型方法

79 阅读2分钟

1、typeof 操作符

typeof 目前能返回string,number,boolean,unfined,object,function,symbol,bigint,这八种判断类型。使用方式:typeof(表达式)和typeof 变量名,具体判断如下:

console.log(typeof 'abc' === 'string')  // true
console.log(typeof('abc'))  // string
console.log(typeof 3 === 'number')  // true
console.log(typeof(3))  // number
console.log(typeof 'true' === 'boolean')  // false
console.log(typeof true === 'boolean')  // true
console.log(typeof(true))  // boolean
console.log(typeof(unfined))  //undefined

var a;
// 打印结果
console.log('a == ' ,a);  // a ==  undefined
console.log('a1 == ' , typeof a == 'undefined');  // a1 ==  true
console.log('typeof ==',typeof(a));  // typeof == undefined

var c = {}
// 打印结果
console.log('a == ' , {});  // a ==  Object {}
console.log('b == ' , typeof {} === 'object');  // b ==  true
console.log('typeof ==',typeof(c));  // typeof == object

 function fn(){};
console.log('a == ' , typeof fn === 'function');  // a ==  true
console.log('typeof ==',typeof(fn));  // typeof == function

var a = Symbol();
console.log('a == ' , typeof a === 'symbol');   // a ==  true
console.log('typeof ==',typeof(a));  // typeof == symbol

// bigint 暂无了解,占位待补充

特别注意数组array的typeof 操作符判断

var arr0 = new Array();
console.log('arr0 == ' ,typeof arr0 == 'array');  // arr0 ==  false
console.log('typeof ==',typeof(arr0));  //  typeof == object

2、instanceof A instanceof B 可以判断A是不是B的实例,返回一个布尔值,由构造类型判断出数据类型,目前支持数组,对象,date,function类型。 注: instanceof 后面一定要是对象类型,大小写不能写错!!!

// 数组
var arr = [];
var arr_b = new Array();
console.log('arr ==== ',arr instanceof Array);  // arr ====  true
console.log('arr_b ==== ',arr_b instanceof Array);  // arr_b ====  true

// 对象/键值对
var dic = {};
var dic_a = new Object();
console.log('dic ==== ',dic instanceof Object); // dic ====  true
console.log('dic_a ==== ',arr_b instanceof Object); // dic_a ====  true

// 方法    
var fn = function(){};
console.log('fn ==== ',fn instanceof Function);  // fn ====  true

// 日期
var date_tag = new Date();
console.log('date_tag ==== ',date_tag instanceof Date);  // date_tag ====  true

// Symbol
var ls = Symbol();
var ls1 = Symbol('hello,周杰伦');
console.log('ls ==== ',ls instanceof Symbol); //  ls ====  false
console.log('ls1 ==== ',ls1 instanceof Symbol); //  ls1 ====  false

// 字符串
var abc = '123';
console.log('abc ==== ',abc instanceof String); //  abc ====  false

// 数值
var num = 1;
console.log('num ==== ',num instanceof Number); //  num ====  false

***亲测:***Symbol is not a constructor

3、Object.prototype.toString.call() 通过Object下的toString.call()方法来判断,目前是最为可靠的类型检测手段,它会将当前对象转换为字符串并输出。但它也不是完美的,它无法检测用户自定义类型。 因为Object.prototype是不知道用户会创造什么类型的, 它只能检测ECMA标准中的那些内置类型

console.log(Object.prototype.toString.call('abc')); // [object String]
console.log(Object.prototype.toString.call(1)); // [object Number]
console.log(Object.prototype.toString.call(false)); // [object Boolean]
console.log(Object.prototype.toString.call(null)); // [object Null]
console.log(Object.prototype.toString.call(undefined)); //  [object Undefined]
console.log(Object.prototype.toString.call(new Object())); // [object Object]
console.log(Object.prototype.toString.call(new Array())); // [object Array]
console.log(Object.prototype.toString.call(new Date())); //  [object Date]
console.log(Object.prototype.toString.call(new function(){})); // [object Object]

注意, 这里的Object和function判断打印都是[object Object]。使用Object.prototype.toString.call判断Symbol报错。

// 报错信息:Symbol is not a constructor
console.log(Object.prototype.toString.call(new Symbol()));

4、contructor 依据对象的contructor判断,返回一个布尔值。 注: ===后面一定要是对象类型,大写且不能写错!!!

// 一下打印结果为true
var arr = [];
var dic = {};
var dt = new Date();
var fn = function(){};
var num = 1;
var str = 'abc';
var c = false ; 
        
console.log('type1==',arr.constructor===Array);
console.log('type2==',dic.constructor===Object);
console.log('type3==',dt.constructor===Date);
console.log('type4==',fn.constructor===Function);
console.log('type5==',num.constructor===Number);
console.log('type5==',str.constructor===String);
console.log('type8==',c.constructor===Boolean);