js数据类型判断的几种方式

最新推荐文章于 2024-09-30 15:23:15 发布

低码艺术家

最新推荐文章于 2024-09-30 15:23:15 发布

阅读量153

点赞数

文章标签： javascript 原型模式前端

本文链接：https://blog.csdn.net/becarchal/article/details/125365364

版权

js数据类型判断的几种方式，推荐第四种，最全最准确

# 实现方式一：使用typeof

仅能返回几种判断类型：string，number，bigint，boolean，undefined，object，function，symbol

const getType = (value) => {
    return typeof value;
}

# 实现方式一：使用instanceof

判断一个实例是否属于某种类型：如：Object，Array，Function，Date，RegExp，构造函数的实例、类的实例等。主要是通过原型链来判断：只要右边变量的 prototype 在左边变量的原型链上即可。

const getType = (value1, Type) => {
    return value1 instanceof Type;
}

// 简单实现一个instanceof
const myInstanceof = (left, right) => {
    
    if (Object(left) !== left) return false;
    const rightType = typeof right
    
    if ((rightType !== 'function' || rightType !== 'object') || !right.prototype) throw new TypeError("Right-hand side of 'instanceof' is not an object");
    const rightPrototype = right.prototype;
    let leftProto = left.__proto__;
    while(true) {
        if (left === null) return false;
        if (leftProto === rightPrototype) return true;
        leftProto = leftProto.__proto__; 
    }
 }

# 实现方式三：使用constructor

有构造函数的类型都可以通过此判断，稳定性不足。注意点：

纯数字、null、undefined是不可以的
重写prototype后，constructor会默认为Object

const getType = (value) => {
  const type = typeof value;
  if (type === 'undefined' || type === 'number' || value === null) return type;
  if (value.constructor === String) return 'string';
  if (value.constructor === Boolean) return 'boolean';
  if (value.constructor === Object) return 'object';
  if (value.constructor === Function) return 'function';
  if (value.constructor === AsyncFunction) return 'asyncFunction';
  if (value.constructor === GeneratorFunction) return 'generatorFunction';
  if (value.constructor === Symbol) return 'symbol';
  if (value.constructor === Array) return 'array';
  if (value.constructor === Date) return 'date';
  if (value.constructor === RegExp) return 'regExp';
  if (value.constructor === Map) return 'map';
  if (value.constructor === WeakMap) return 'weakMap';
  if (value.constructor === Set) return 'set';
  if (value.constructor === WeakSet) return 'weakSet';
  if (value.constructor === Blob) return 'blob';
  if (value.constructor === Uint8Array) return 'uint8Array';
  if (value.constructor === Error) return 'error';
  
}

# 实现方式四：使用Object.prototype.toString.call

Object.prototype.toString.call(value) 的返回格式为[object,Type]，Type是具体的数据类型。

const getType = (value) => {
  //   枚举部分类型
  //   const map = {
  //     '[object String]': 'string',
  //     '[object Number]': 'number'
  //     '[object Boolean]': 'boolean',
  //     '[object Undefined]': 'undefined',
  //     '[object Object]': 'object',
  //     '[object Function]': 'function',
  //     '[object AsyncFunction]': 'asyncFunction',
  //     '[object GeneratorFunction]': 'generatorFunction',
  //     '[object Symbol]': 'symbol',
  //     '[object Null]': 'null',
  //     '[object Array]': 'array',
  //     '[object Date]': 'date',
  //     '[object RegExp]': 'regExp',
  //     '[object Map]': 'map',
  //     '[object WeakMap]': 'weakMap',
  //     '[object Set]': 'set',
  //     '[object WeakSet]': 'weakSet',
  //     '[object Blob]': 'blob',
  //     '[object HTMLDocument]': 'document',
  //     '[object Uint8Array]': 'uint8Array',
  //     '[object Error]': 'error'
  //   };
  //   还有更多
   return Object.prototype.toString.call(value).replace(/^\[object (\S+)\]$/, '$1').toLowerCase();
}

本文地址：