JS数据类型检测

数据类型检测的方式有哪些

前言:将一些常见类型判断稍些整理一下,此篇为JS数据类型检测的方法

在 JavaScript 中,基本数据类型和对象类型有一个概念叫做 "装箱"(Boxing)。当你尝试在基本数据类型上调用属性或方法时,JavaScript 会自动将基本数据类型转换为对应的对象,然后在对象上执行操作。这是一种隐式的过程 在 Object.prototype.toString.call() 中,这种装箱过程会发生。让我们看看具体的细节:

(这里有利于理解Object.prototype.toString.call()在执行的一些细节处理)

  1. 数字类型(Number)的装箱:

    js 复制代码
    const number = 42;
    const numberObject = new Number(number);
    console.log(Object.prototype.toString.call(numberObject));  // "[object Number]"

    当你尝试调用 Object.prototype.toString.call(number) 时,JavaScript 隐式地将 number 装箱为 Number 对象,然后执行 toString 方法。

  2. 字符串类型(String)的装箱:

    js 复制代码
    const str = 'Hello';
    const stringObject = new String(str);
    console.log(Object.prototype.toString.call(stringObject));  // "[object String]"

    同样,字符串类型也会在需要时被隐式装箱为 String 对象。

这种装箱过程让基本数据类型也可以像对象一样使用一些方法,但需要注意的是,装箱后得到的是一个对象,而不是原始的基本数据类型。在实际开发中,通常直接使用基本数据类型,而不是显式创建对应的包装对象。

(1)typeof(一般用于基本数据类型的判断)

javascript 复制代码
console.log(typeof 2);               // number
console.log(typeof true);            // boolean
console.log(typeof 'str');           // string
console.log(typeof []);              // object    
console.log(typeof function(){});    // function
console.log(typeof {});              // object
console.log(typeof undefined);       // undefined
console.log(typeof null);            // object

其中数组、对象、null都会被判断为object,其他判断都正确。

(2)instanceof

instanceof可以正确判断对象的类型,其内部运行机制是判断在其原型链中能否找到该类型的原型

instanceof 运算符用于检查对象是否是某个构造函数的实例。然而,对于基本数据类型(如数字、布尔和字符串),它们通常会被封装为对应的包装对象(Number、Boolean 和 String)。当你使用 instanceof 检查基本数据类型时,它实际上是检查包装对象而不是基本数据类型。

javascript 复制代码
console.log(2 instanceof Number);                    // false
console.log(true instanceof Boolean);                // false 
console.log('str' instanceof String);                // false 
 
console.log([] instanceof Array);                    // true
console.log(function(){} instanceof Function);       // true
console.log({} instanceof Object);                   // true

可以看到,instanceof只能正确判断引用数据类型 ,而不能判断基本数据类型。instanceof 运算符可以用来判断一个对象在其原型链中是否存在一个构造函数的 prototype 属性。

(3) constructor

javascript 复制代码
console.log((2).constructor === Number); // true
console.log((true).constructor === Boolean); // true
console.log(('str').constructor === String); // true
console.log(([]).constructor === Array); // true
console.log((function() {}).constructor === Function); // true
console.log(({}).constructor === Object); // true

constructor有两个作用,一是判断数据的类型,二是对象实例通过 constrcutor 对象访问它的构造函数。需要注意,如果创建一个对象来改变它的原型,constructor就不能用来判断数据类型了:

ini 复制代码
function Fn(){};
 
Fn.prototype = new Array();
 
var f = new Fn();
 
console.log(f.constructor===Fn);    // false
console.log(f.constructor===Array); // true

(4)Object.prototype.toString.call()

Object.prototype.toString.call() 使用 Object 对象的原型方法 toString 来判断数据类型:

vbscript 复制代码
var a = Object.prototype.toString;
 
console.log(a.call(2));
console.log(a.call(true));
console.log(a.call('str'));
console.log(a.call([]));
console.log(a.call(function(){}));
console.log(a.call({}));
console.log(a.call(undefined));
console.log(a.call(null));

同样是检测对象obj调用toString方法,obj.toString()的结果和Object.prototype.toString.call(obj)的结果不一样,这是为什么?

这是因为toString是Object的原型方法,而Array、function等类型作为Object的实例,都重写了toString方法。不同的对象类型调用toString方法时,根据原型链的知识,调用的是对应的重写之后的toString方法(function类型返回内容为函数体的字符串,Array类型返回元素组成的字符串...),而不会去调用Object上原型toString方法(返回对象的具体类型),所以采用obj.toString()不能得到其对象类型,只能将obj转换为字符串类型;因此,在想要得到对象的具体类型时,应该调用Object原型上的toString方法。

(5)数组类型方法判断

  1. Array.isArrray(arr); //返回布尔值
  2. arr.proto === Array.prototype;
  3. Object.prototype.toString.call(arr).slice(8,-1) === 'Array';
  4. arr instanceof Array
  5. Array.prototype.isPrototypeOf()

Array.prototype.isPrototypeOf()

备注: isPrototypeOf()instanceof运算符不同。在表达式object instanceof AFunction中,会检查object原型链是否与AFunction.prototype匹配,而不是与AFunction自身匹配。

结语:此文来自摘录和自己的理解以及后续的一些补充,希望自己也能深刻理解一些方法在底层细节上的处理。

相关推荐
m0_7482361116 分钟前
Calcite Web 项目常见问题解决方案
开发语言·前端·rust
Watermelo61728 分钟前
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
m0_7482489430 分钟前
HTML5系列(11)-- Web 无障碍开发指南
前端·html·html5
m0_7482356141 分钟前
从零开始学前端之HTML(三)
前端·html
一个处女座的程序猿O(∩_∩)O3 小时前
小型 Vue 项目,该不该用 Pinia 、Vuex呢?
前端·javascript·vue.js
hackeroink6 小时前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
前端·xss
迷雾漫步者7 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
向前看-8 小时前
验证码机制
前端·后端
燃先生._.9 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js