JS 判断数据类型的方法

125 阅读2分钟

JS 判断数据类型的方法

前言

  • typeof、instanceof、constructor 不是全部的数据类型都可以检验
  • 判断基础类型建议使用 typeof (null 除外)
  • constructor 无法判断出 undefined 类型
  • instanceof 无法判断 string、number、undefined、boolean
  • toString 判断对象时可以直接使用

typeof

语法
typeof operand

operand 表示要返回类型的对象或基本类型的表达式。

描述

typeof 是一个操作符,其右侧跟一个一元表达式,并返回这个表达式的数据类型。

返回的结果用该类型的字符串(全小写字母)形式表示,包括以下 7 种:string、number、boolean、symbol、undefined、object、function 等。

typeof 'a'; // string 
typeof 1; // number 
typeof true; //boolean 
typeof Symbol(); // symbol 
typeof undefined; //undefined
typeof new Function(); // function
typeof null; //object
typeof [1] ; //object
typeof new RegExp(); //object
typeof new Date(); //object
  • 可以识别大部分基础类型(null 识别为 object)
  • 引用类型大部分都识别为 object (function 正常识别)

instanceof

用来检测构造函数的 prototype 是否存在在某个实例的原型链上

语法
object instanceof constructor
  • object:需要被检测的对象
  • constructor:被继承某个的构造函数
使用 instanceof 检验数据类型
[] instanceof Array; // true
new Date() instanceof Date; // true

function a() {}
function b() {}
const c = new a()
c instanceof a; // true
c instanceof b; // false

[] instanceof Object; // true
new Date() instanceof Object; // true
c instanceof Object; // true
  • 这里虽然 instanceof 可以判断 [] 的数据类型为 Array,但同时也认为 [] 是 Object 的实例 是因为 [] 的隐式原型 __proto__ 指向了 Array 的显示原型 Array.prototype,然后 Array 的隐式原型__proto__ 又指向了 Object 的显示原型 Object.prototype,如图:

image-20221014161526861.png

以此类推 new Date() / new a() 同样会生成一条对应原型链

constructor

在 Javascript 语言中,constructor属性是专门为function而设计的,它存在于每一个function的prototype属性中。这个constructor保存了指向function的一个引用。

image-20221014164121520.png

  • null 和 undefined 是无效对象,不存在 constructor

toString

语法
obj.toString() // 返回表示该对象的字符串
描述

每个对象都有一个 toString() 方法,当该对象被表示为一个文本值时,或者一个对象以预期的字符串方式引用时自动调用。默认情况下,toString() 方法被每个 Object 对象继承。如果此方法在自定义对象中未被覆盖,toString() 返回 "[object type]",其中 type 是对象的类型。以下代码说明了这一点:

var o = new Object();
o.toString(); // 返回 [object Object]
使用toString()检查对象类型
var toString = Object.prototype.toString;

toString.call(''); // [object String]
toString.call(1); // [object Number]
toString.call(true); // [object Boolean]
toString.call(Symbol()); // [object Symbol]
toString.call(undefined) ; // [object Undefined]
toString.call(null) ; // [object Null]
toStringtoString.call(new Function()) ; // [object Function]
toString.call(new Date()) ; // [object Date]
toString.call([]) ; // [object Array]
toString.call(new RegExp()) ; // [object RegExp]
toString.call(new Error()) ; // [object Error]
toStringtoString.call(document) ; // [object HTMLDocument]
Object.prototype.toString.call(window) ; //[object global]

new Object().toString(); // [object Object]
  • object 直接调用 toString()可以直接返回 [object Object]