JavaScript判断数据类型的4中方法

时间:2023-03-09 22:28:57
JavaScript判断数据类型的4中方法

一: typeof

typeof 是一种运算符,它的值有如下几种(number、boolean、string、undefined、null、function、object、symbol)

console.log(typeof 1);  // number
console.log(typeof 1.232); // number
console.log(typeof 111111111111111111111111111111); // number
console.log(typeof NaN); // number console.log(typeof true); // boolean
console.log(typeof false); // boolean console.log(typeof ''); // string
console.log(typeof 'a'); // string
console.log(typeof 'hello'); // string
console.log(typeof "world!"); // string
console.log(typeof String('你好')); // string console.log(typeof undefined); // undefined
console.log(typeof null); // object console.log(typeof {}); // object
console.log(typeof {name: 'Tom', age: 23}); // object console.log(typeof []); // object
console.log(typeof [1, 2, 3]); // object
console.log(typeof function say(){}); // function
console.log(typeof function Person(name, age) {
this.name = name;
this.age = age;
this.say = function () {
console.log('hello, my name is ' + this.name + ', and i am ' + this.age + ' years old.');
};
}); // function console.log(typeof Symbol); // function
console.log(typeof Symbol('name')); // symbol
console.log(typeof new Set()); // object
console.log(typeof new Map()); // object
console.log(typeof new WeakSet()); // object
console.log(typeof new WeakMap()); // object
function Person(name, age) {
this.name = name;
this.age = age;
} let p = new Person('Tom', 23);
console.log(typeof p); // object

从上面的结果可以看出,typeof 运算符只能判断基本类型number、boolean、string、undefined、symbol和函数类型function,其他的如null、数组、字面量对象、构造函数创建的对象都判断为object,无法判断出具体的类型。

二: instanceof 运算符

console.log(1 instanceof Number);  // false
console.log(1.232 instanceof Number); // false
console.log(111111111111111111111111111111 instanceof Number); // false
//console.log(NaN instanceof NaN); // TypeError: Right-hand side of 'instanceof' is not an object
console.log(NaN instanceof Number); // false
console.log('1================================='); console.log(true instanceof Boolean); // false
console.log(false instanceof Boolean); // false
console.log('2================================='); console.log('' instanceof String); // false
console.log('a' instanceof String); // false
console.log('hello' instanceof String); // false
console.log("world!" instanceof String); // false
console.log(String('你好') instanceof String); // false
console.log('3================================='); // console.log(undefined instanceof undefined); // TypeError: Right-hand side of 'instanceof' is not an object
console.log(undefined instanceof Number); // false
console.log(undefined instanceof Object); // false
// console.log(null instanceof null); // TypeError: Right-hand side of 'instanceof' is not an object
console.log(null instanceof Object); // false
console.log('4================================='); console.log({} instanceof Object); // true
console.log({name: 'Tom', age: 23} instanceof Object); // true
console.log('5================================='); console.log([] instanceof Array); // true
console.log([1, 2, 3] instanceof Array); // true
console.log(new Array(4) instanceof Array); // true
console.log('6================================='); console.log(function say(){} instanceof Function); // true
console.log(function Person(name, age) {
this.name = name;
this.age = age;
this.say = function () {
console.log('hello, my name is ' + this.name + ', and i am ' + this.age + ' years old.');
};
} instanceof Function); // true
console.log(Symbol instanceof Function); // true
console.log('7================================='); console.log(Symbol('name') instanceof Symbol); // false
console.log(new Set() instanceof Set); // true
console.log(new Map() instanceof Map); // true
console.log(new WeakSet() instanceof WeakSet); // true
console.log(new WeakMap() instanceof WeakMap); // true
console.log(new Date() instanceof Date); // true
console.log(new RegExp(/he/) instanceof RegExp); // true
function Person(name, age) {
this.name = name;
this.age = age;
} let p = new Person('Tom', 23);
console.log(p instanceof Person); // true

从测试结果可以得出,instanceof 运算符的右边必须为对象,而且 instanceof 运算符只能判断某个构造函数的原型对象是否存在于被检测对象的原型链上(即被检测对象是否是某个够早函数的实例)。

三: 使用 Object.prototype.toString.call(被检测值)

这个方法获取的是对象的 Class 属性值,返回值是固定格式的:[object Class属性]

function myTypeof(obj) {
let s = Object.prototype.toString.call(obj);
return s.match(/\[object\s(\w*)\]/)[1].toLowerCase();
}
console.log(myTypeof(1)); // number
console.log(myTypeof(1.232)); // number
console.log(myTypeof(111111111111111111111111111111)); // number
console.log(myTypeof(NaN)); // number console.log(myTypeof(true)); // boolean
console.log(myTypeof(false)); // boolean console.log(myTypeof('')); // string
console.log(myTypeof('a')); // string
console.log(myTypeof('hello')); // string
console.log(myTypeof("world!")); // string
console.log(myTypeof(String('你好'))); // string console.log(myTypeof(undefined)); // undefined
console.log(myTypeof(null)); // null console.log(myTypeof({})); // object
console.log(myTypeof({name: 'Tom', age: 23})); // object console.log(myTypeof([])); // array
console.log(myTypeof([1, 2, 3])); // array
console.log(myTypeof(new Array(4))); // array console.log(myTypeof(function say(){})); // function
console.log(myTypeof(function Person(name, age) {
this.name = name;
this.age = age;
this.say = function () {
console.log('hello, my name is ' + this.name + ', and i am ' + this.age + ' years old.');
};
})); // function
console.log(myTypeof(Symbol)); // function console.log(myTypeof(Symbol('name'))); // symbol
console.log(myTypeof(new Set())); // set
console.log(myTypeof(new Map())); // map
console.log(myTypeof(new WeakSet())); // weakset
console.log(myTypeof(new WeakMap())); // weakmap
console.log(myTypeof(new Date())); // date
console.log(myTypeof(new RegExp(/he/))); // regexp
function Person(name, age) {
this.name = name;
this.age = age;
} let p = new Person('Tom', 23);
console.log(myTypeof(p)); // object

从检测结果可以得知,次方法可以检测基本类型,函数,数组,js原生对象类型,但是无法检测自定义的对象类型。

四:使用 constructor 属性

constructor 属性返回创建该对象的构造函数的引用。利用此特性我们可以判断对象的类型,其中 null 和 undefined 由于没有构造函数,所以 null 和 undefined 需要特殊处理。

function myTypeof(obj) {
return obj === undefined ? 'undefined' :
(obj === null ? 'null' :
obj.constructor.toString().match(/function\s*([^(]*)/)[1].toLowerCase());
} console.log(myTypeof(1)); // number
console.log(myTypeof(1.232)); // number
console.log(myTypeof(111111111111111111111111111111)); // number
console.log(myTypeof(NaN)); // number console.log(myTypeof(true)); // boolean
console.log(myTypeof(false)); // boolean console.log(myTypeof('')); // string
console.log(myTypeof('a')); // string
console.log(myTypeof('hello')); // string
console.log(myTypeof("world!")); // string
console.log(myTypeof(String('你好'))); // string console.log(myTypeof(undefined)); // undefined
console.log(myTypeof(null)); // null console.log(myTypeof({})); // object
console.log(myTypeof({name: 'Tom', age: 23})); // object console.log(myTypeof([])); // array
console.log(myTypeof([1, 2, 3])); // array
console.log(myTypeof(new Array(4))); // array console.log(myTypeof(function say(){})); // function
console.log(myTypeof(function Person(name, age) {
this.name = name;
this.age = age;
this.say = function () {
console.log('hello, my name is ' + this.name + ', and i am ' + this.age + ' years old.');
};
})); // function
console.log(myTypeof(Symbol)); // function console.log(myTypeof(Symbol('name'))); // symbol
console.log(myTypeof(new Set())); // set
console.log(myTypeof(new Map())); // map
console.log(myTypeof(new WeakSet())); // weakset
console.log(myTypeof(new WeakMap())); // weakmap
console.log(myTypeof(new Date())); // date
console.log(myTypeof(new RegExp(/he/))); // regexp
function Person(name, age) {
this.name = name;
this.age = age;
} let p = new Person('Tom', 23);
console.log(myTypeof(p)); // person

从检测结果得出,利用 constructor 属性能判断出除 null 和 undefined 之外的所有类型。