JavaScript判断数据的类型

注:纯手打,如有错误欢迎评论区交流!
转载请注明出处:https://blog.csdn.net/testleaf/article/details/147954653
编写此文是为了更好地学习前端知识,如果损害了有关人的利益,请联系删除!
本文章将不定时更新,敬请期待!!!
欢迎点赞、收藏、转发、关注,多谢!!!

一、typeof:判断基本类型

​​特点​​:能识别基本类型(除 null 外),但对引用类型返回 object

typeof 'hello'      // 'string'
typeof 42           // 'number'
typeof true         // 'boolean'
typeof undefined    // 'undefined'
typeof Symbol()     // 'symbol'
typeof BigInt(10)   // 'bigint'
typeof function(){} // 'function'

// 局限性
typeof null         // 'object' (历史遗留问题)
typeof []           // 'object'
typeof {}           // 'object'

二、instanceof:判断实例原型链

​​特点​​:检查对象是否是某个构造函数的实例(对基本类型无效)。

[] instanceof Array      // true
{} instanceof Object     // true
new Date() instanceof Date // true

// 局限性
'abc' instanceof String  // false (基本类型不适用)
null instanceof Object   // false

三、Object.prototype.toString.call():终极方案

​​特点​​:精准识别所有类型(推荐)。

Object.prototype.toString.call('hello')   // '[object String]'
Object.prototype.toString.call(42)        // '[object Number]'
Object.prototype.toString.call(true)      // '[object Boolean]'
Object.prototype.toString.call(null)      // '[object Null]'
Object.prototype.toString.call(undefined) // '[object Undefined]'
Object.prototype.toString.call([])        // '[object Array]'
Object.prototype.toString.call({})        // '[object Object]'
Object.prototype.toString.call(/regex/)   // '[object RegExp]'
Object.prototype.toString.call(new Date())// '[object Date]'

封装成通用函数​​:

function getType(obj) {
  return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
}
getType([]) // 'array'
getType(null) // 'null'

四、专门方法判断特定类型

1、判断数组

Array.isArray([]) // true

2、判断 NaN

Number.isNaN(NaN) // true (注意:全局 isNaN() 会先尝试转数字)

3、判断 null 或 undefined

value === null      // 仅判断 null
value === undefined // 仅判断 undefined
value == null       // 同时判断 null 或 undefined

五、ES6+ 新增类型判断

1、Map/Set/WeakMap/WeakSet

Object.prototype.toString.call(new Map())    // '[object Map]'
Object.prototype.toString.call(new Set())    // '[object Set]'

2、Promise

Object.prototype.toString.call(Promise.resolve()) // '[object Promise]'

3、自定义类

class MyClass {}
Object.prototype.toString.call(new MyClass()) // '[object Object]' (需自定义 toStringTag)

六、特殊案例处理

1、区分对象和数组

function isObject(obj) {
  return obj !== null && typeof obj === 'object' && !Array.isArray(obj);
}

2、判断纯对象(Plain Object)

function isPlainObject(obj) {
  return Object.prototype.toString.call(obj) === '[object Object]' &&
         Object.getPrototypeOf(obj) === Object.prototype;
}
isPlainObject({})     // true
isPlainObject([])     // false
isPlainObject(new Date()) // false

七、终极方案对比表

方法适用场景局限性
typeof基本类型(除 nullnull 返回 object
instanceof引用类型(检查构造函数)不适用于基本类型
Object.prototype.toString​​所有类型​​(最精准)
Array.isArray()仅判断数组仅适用于数组
=== null 或 === undefined精确判断 null/undefined仅适用于这两个值

八、实际应用示例

function typeCheck(value) {
  const type = Object.prototype.toString.call(value).slice(8, -1);
  switch (type) {
    case 'String':
    case 'Number':
    case 'Boolean':
    case 'Null':
    case 'Undefined':
    case 'Symbol':
    case 'BigInt':
      return type.toLowerCase();
    default:
      return type; // 'Array', 'Object', 'Date', 'RegExp' 等
  }
}

typeCheck(null)      // 'null'
typeCheck([])        // 'Array'
typeCheck(new Date())// 'Date'

九、总结

1、​​基本类型​​:优先用 typeof(注意 null 的坑)。
​​2、引用类型​​:用 Object.prototype.toString.call()
​​3、数组​​:直接用 Array.isArray()
4、​​特殊值​​:nullundefined=== 严格判断。
5、​​ES6+ 类型​​:结合 toString 和专用方法(如 Promise.resolve())。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

testleaf

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值