JS中判断数据类型的几种方法

    xiaoxiao2022-07-03  109

    JS中的数据类型:String、Number、Boolean、Null、Undefined、Symbol、Function、Array、Object

    通过typeof判断

    console.log(typeof 10); //number console.log(typeof NaN); //number console.log(typeof "10"); //string console.log(typeof false); //boolean console.log(typeof Symbol()); //symbol console.log(typeof function () {}); //function console.log(typeof []); //object console.log(typeof {}); //object console.log(typeof null); //object console.log(typeof undefined); //undefined

    通过typeof无法判断出数组、对象、null的具体类型,那怎么办,我们先来区分对象、数组

    通过constructor判断

    可以通过constructor判断数组和对象,但无法判断null,因为null不是对象没有constructor

    console.log("".constructor == String); //true console.log(false.constructor == Boolean); //true console.log(new Number(10).constructor == Number); //true 这里要使用对象的方式 console.log([].constructor == Array); //true console.log({}.constructor == Object); //true

    当函数被定义时,JS引擎会自动为其添加prototype原型对象,并在原型对象上添加constructor和__proto__两个属性,constructor用于再指向该函数,__proto__最终都指向Object.prototype,用于原型链查找。所以当我们通过构造函数创建对象后,每个对象的原型链上都有constructor属性,而constructor属性又指向了构造函数的引用,所以可以通过这种方式判断数据类型。

    注意: 当开发者自定义了函数的prototype属性后,原有的constructor引用会丢失当我们使用constructor时,会通过原型链向上查找 如果中间都没有,那么最终会在Object.prototype中找到,并指向Object,所以使用constructor 判断是不可靠的,同时开发者在自定义函数的prototype时,虽然不手动的让constructor再指向函数本身,也不会报错但还是要养成良好的编码习惯,手动的让constructor再指向函数本身。

    通过instanceof判断

    console.log([] instanceof Array); //true console.log([] instanceof Object); //true console.log({} instanceof Array); //false console.log({} instanceof Object); //true

    instanceof 是用于判断 A 是否为 B 的实例,因为instanceof是基于原型链进行检测的,所以可以通过instanceof检测数组,但是要检测对象就不是那么准确了,因为数组也是Object

    通过Object.prototype.toString.call判断

    都能判断出来 包括null undefined

    let getType = Object.prototype.toString; console.log(getType.call(undefined)); //[object Undefined] console.log(getType.call(null)); //[object Null] console.log(getType.call([])); //[object Array] console.log(getType.call({})); //[object Object]

    其他: NaN是不等于任何一个值,包括它自己

    console.log(NaN == NaN); //false console.log(NaN === NaN); //false

    通过for…in遍历对象属性时,会遍历出原型上的属性或方法,若只想遍历实例对象上的可以通过hasOwnProperty进行过滤

    最新回复(0)