【js】数据类型检测

118 阅读2分钟

js数据类型

  • 基本数据类型:Number/Boolean/String/Null/Undefined/Symbol/Bigint
  • 引用数据类型:Object(Object/Function/Array/Date/RegExp)

数据类型检测方法

typeof

typeof检测原理:根据在计算机底层基于数据类型的值(二进制)进行检测。

typeof 1 -> 'number' (返回字符串-类型小写)

*注意:

  • tyepof null ->值为 "object"。 对象存储在计算机中,都是以000开始的二进制存储,null也是以000开头进行存储,所以检测出来的结果是对象。
  • typeof 普通对象/数组对象/正则对象/日期对象 -> "object"。
  • 如下表可知,typeof无法区分null,array,普通对象与内置对象。

| typeof | value| typeof | value| | --- | --- || --- | --- | |1 | 'number' ||null | 'object' | |"abc" | 'string' ||[1,2,3] | 'object' | |true | 'boolean' ||function(){} | 'function' | |undefined | 'undefined' ||{name:""} | 'object' | |Symbol() | 'symbol' ||new Date() | 'object' | |38n | 'bigint' || new RegExp() | 'object' |

instanceof

  • 底层机制:只要当前类出现在实例的原型链上,结果都是true
  • 由于我们可以肆意的修改原型的指向,所以检测出来的结果是不准的
  • 不能检基本数据类型
let arr = [];
console.log(arr instanceof Array); //=>true 
console.log(arr instanceof RegExp); //=>false
console.log(arr instanceof Object); //=>true 
// 实例.__proto__===类.prototype
// 不能检基本数据类型
1 instanceof Object -> false

constructor

  • 用起来看似比instanceof还好用一些(基本类型支持的)
  • constructor可以随便改,所以也不准
1665495648896.png
let arr = [];
console.log(arr.constructor === Array); // true
console.log(arr.constructor === RegExp); // false
console.log(arr.constructor === Object); // false
// 检测基本类型
let n = 1
console.log(n.constructor === Number); // true 
ƒ Number() { [native code] }
//更改
Number.prototype.constructor = 'AA';
let n = 1;
console.log(n.constructor === Number); // false 
*/

Object.prototype.toString.call([value])

  • 标准检测数据类型的办法:Object.prototype.toString不是转换为字符串,是返回当前实例所属类的信息
  • 返回值"[object Number/String/Boolean/Null/Undefined/Symbol/Object/Array/RegExp/Date/Function]"
image.png

类型检测方法封装

function typeDetection(value){
    let classObject = {}
    let toString  = Object.prototype.toString
    // 设定数据类型的映射表
    let typeArr = ["Null", "Number", "String", "Function", "Array", "Date", "RegExp", "Object", "Error", "Symbol"]
    typeArr.forEach(type => {
        classObject[`[object ${type}]`] = type.toLowerCase();
    });
    return typeof value === "object" || typeof obj === "function" ?
        classObject[toString.call(value)] || "object" :
            typeof value;
}