JS判断数据类型的四种方式
在
ECMAScript中数据类型分为两大类（基本类型，引用类型），7种数据类型基本类型：占用空间固定，被存放在了栈中
引用类型：数据结构复杂，
栈中存放引用类型的引用地址，引用地址指向堆中真正的存放对象
- 基本类型：
Number,String,Boolean,Null,Undefined,Symbol - 引用类型：
Object(Function,Array,RegExp,Date...)
1.typeof判断数据类型
- 基本类型：typeof不能判断
null,因为返回的是object - 引用类型：除了
function可以判断，其他的都返回object
console.log(typeof 1);//=>number
console.log(typeof '1');//=>string
console.log(typeof true);//=>boolean
console.log(typeof null);//=>object
console.log(typeof undefined);//=>undefined
console.log(typeof Symbol());//=>symbol
console.log(typeof Function());//=>function
console.log(typeof []);//=>object
console.log(typeof /\.jpg/);//=>object
console.log(typeof new Date());//=>object
2.instanceof判断数据类型
instanceof检测的是原型，如：a instanceof A，检测的是a是不是A的实例
console.log(new Number(1) instanceof Number);//=>true
console.log(new String('1') instanceof String);//=>true
console.log(new Boolean(true) instanceof Boolean);//=>true
function Person(){}
const p=new Person
console.log(p instanceof Person )//=>true
console.log([] instanceof Array);//=>true
const date=new Date
console.log(date instanceof Date);//=>true
console.log(/\.jpg/ instanceof RegExp);//=>true
==注意：==
function Person(){}
const p=new Person
console.log(p instanceof Object )//=>true
console.log([] instanceof Object);//=>true
const date=new Date
console.log(date instanceof Object);//=>true
console.log(/\.jpg/ instanceof Object);//=>true
可以看出这几个引用对象实例也是Object的实例，这是为什么呢？以数组为例分析
[].__proto__-->Array.prototype-->Array.prototype.__proto__-->Object.prototype-->Object.prototype.__proto__-->null
3.constructor判断数据类型
- 当函数被定义时，浏览器引擎会为函数添加一个
prototype原型，prototype上有一个constructor属性指向函数本身; new函数（函数被当成构造函数执行）,如：const fn=new Fn，此时fn.__proto__==Fn.prototype指向同一个地址，因此fn.constructor===Fn
function Fn(){}
const fn=new Fn;
console.log(fn.__proto__===Fn.prototype);//=>true
console.log(fn.constructor===Fn);//=>true
- 类型判断
console.log(new Number(1).constructor===Number);//=>true
console.log(''.constructor===String);//=>true
console.log(true.constructor===Boolean);//=>true
console.log(new Function().constructor===Function);//=>true
console.log(new Date().constructor===Date);//=>true
console.log(new RegExp().constructor===RegExp);//=>true
==注意：==
null和undefined是无效对象，没有constructorconstructor判断是需要注意prototype有没有被重写，如果被重写了引用地址会改变
function Fn(){}
Fn.prototype={};
const fn=new Fn;
console.log(fn.constuctor===Fn);//=>false
4.toString判断数据类型
toString是Object的原型方法，返回值为[object xxx]
console.log(Object.prototype.toString.call(1));//=>[object Number]
console.log(Object.prototype.toString.call('1'));//=>[object String]
console.log(Object.prototype.toString.call(true));//=>[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(Symbol()));//=>[object Symbol]
console.log(Object.prototype.toString.call({}));//=>[object Object]
console.log(Object.prototype.toString.call([]));//=>[object Array]
console.log(Object.prototype.toString.call(new Function()));//=>[object Function]
console.log(Object.prototype.toString.call(new Date()));//=>[object Date]
console.log(Object.prototype.toString.call(new RegExp()));//=>[object RegExp]
5.实现一个判断数据类型的通用方法
function checkType(type) {
return (content) => {
return Object.prototype.toString.call(content) === `[object ${type}]`
}
}
let utilsType = {}
const types = ['Number', 'Boolean', 'String', 'Object', 'Array','Symbol','RegExp','Null','Undefined'];
types.forEach(type => {
utilsType[`is${type}`] = checkType(type);
})
console.log(utilsType.isNumber(1));
console.log(utilsType.isBoolean(true));
console.log(utilsType.isString('1'));
console.log(utilsType.isObject({ name: 1 }));
console.log(utilsType.isArray([1, 2]));
console.log(utilsType.isSymbol(Symbol()));
console.log(utilsType.isRegExp(new RegExp()));
console.log(utilsType.isNull(null));
console.log(utilsType.isUndefined(undefined));
