欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js类型判断的方法(JS的基本类型共有三种)

程序员文章站 2023-11-24 22:47:16
今天分享3种javascript类型判断的方法:typeof、instanceof、constructor。首先先看下所有的数据类型:空值(null)未定义(undefined)布尔值(boolean...

今天分享3种javascript类型判断的方法:typeof、instanceof、constructor。


首先先看下所有的数据类型:

  • 空值(null)
  • 未定义(undefined)
  • 布尔值(boolean)
  • 数字(number)
  • 字符串(string)
  • 对象 (object)
  • 符号(symbol, es6中新增)
  • 大整数(bigint, es2020 引入)

除去object,其他的我们统称基本类型,最后两个类型为新引入的前端数据类型。

symbol: 是es6中引入的一种原始数据类型,表示独一无二的值。

bigint:是 es2020 引入的一种新的数据类型,用来解决 javascript中数字只能到 53 个二进制位(javascript 所有数字都保存成 64 位浮点数,大于这个范围的整数,无法精确表示的问题。具体可查看:新数据类型 — bigint


1.typeof

example:

console.log(typeof "");            // string
console.log(typeof 1 );            // number
console.log(typeof nan );          // number
console.log(typeof true);          // boolean
console.log(typeof undefined);     // undefined
console.log(typeof function(){});  // function
console.log(typeof isnan);         // function
console.log(typeof symbol());      // symbol
console.log(typeof 123n);          // bigint
console.log(typeof []);            // object
console.log(typeof {});            // object
console.log(typeof null);          // object
console.log(typeof new date());    // object
console.log(typeof new regexp());  // object

对于数组,对象,null以及时间等数据,typeof只能返回object,而不能直接返回对应的类型,还需要通过其他法判断。

2.instanceof

example:

console.log(12 instanceof number);                 // false
console.log('22' instanceof string);               // false
console.log(true instanceof boolean);              // false
console.log(null instanceof object);               // false
console.log(undefined instanceof object);          // false
console.log(function a() {} instanceof function);  // true
console.log([] instanceof array);                  // true
console.log({a: 1} instanceof object);             // true
console.log(new date() instanceof date);           // true

简单来说就是,判断某个数据是否是由某个构造函数的实例,如果是,返回true,不是就返回false。

深层次来讲就是,instanceof 右边的prototype是否能在instanceof左侧的数据的_proto_原型链上找到,这是个遍历的过程。找到就是true。

3.constructor

example:

console.log('22'.constructor === string)             // true
console.log(true.constructor === boolean)            // true
console.log([].constructor === array)                // true
console.log(document.constructor === htmldocument)   // true
console.log(window.constructor === window)           // true
console.log(new number(22).constructor === number)   // true
console.log(new function().constructor === function) // true
console.log(new date().constructor === date)         // true
console.log(new regexp().constructor === regexp)     // true
console.log(new error().constructor === error)       // true

constructor是追溯对象的出生地,也就是说可以知道某个对象是由哪个构造函数产生的。

原理其实是当构造函数被创建时,会在它的prototype上创建constructor属性,而该属性又指向函数本身,当实例被创建时,它的constructor会被继承,嗯….构造函数就是实例的类型。

注意:null 和 undefined 是没有 constructor 存在的,这两种类型的数据需要通过其他方式来判断。

结尾:其实还有一种方法:
object.prototype.tostring.call(),感兴趣的自己去查文档研究研究。