JavaScript 之类型判断

更多个人博客：(https://github.com/zenglinan/blog)

如果对你有帮助，欢迎star。

一、基本类型和复杂类型的判断

JavaScript 中的类型判断方式有很多种, 最简单的就是 typeof 一把梭, 但是用 typeof 来进行类型判断有以下几个问题:

1. typeof null === "object"
2. JS 里有许多内置的构造函数, 因此对象又可以分为许多类型: array function date regexp 等等, 但是 typeof 只能显示出 "function" 这一种类型的对象, 也就是说, 除了 function, 其他类型的对象都会被当做 "object"。

为了解决 typeof 判断不准确的问题, 可以采用 Object.prototype.toString.call()

为什么不用 obj.toString() 呢?

因为 Function.prototype, Array.prototype 等这些原型上都重写了 toString 方法, 为了保证输出结果的形式统一, 借用最纯净的 Object 原型上的方法。

Object.prototype.toString.call([])  // "[object Array]"
Object.prototype.toString.call({})  // "[object Object]"
Object.prototype.toString.call(()=>{})  // "[object Function]"
Object.prototype.toString.call(new Date())  // "[object Date]"

Object.prototype.toString.call(null)  // "[object Null]"
Object.prototype.toString.call(1)  // "[object Number]"

要注意: 借用了 Object.prototype.toString 方法之后, 即使是简单类型, 也会输出 [object XXX]

但是这并不是我们所希望的, 因为输出的形式看起来太复杂了, 所以可以将他简化一下:

// 创建类型对象: 键 [object Object] 对应值 ```object```
const typeObj = {}
"Boolean Number String Function Array Date RegExp Object Error Null".split(' ').forEach((item) => {
  typeObj[`[object ${item}]`] = item.toLowerCase()
})

function type(el){
  // 如果是复杂类型或 null, 用 ```Object.prototype.toString.call``` 判断, 否则用 typeof 判断。
  return typeof el === "object" || typeof el === "function" ?
    typeObj[Object.prototype.toString.call(el)] :
    typeof el
}

大功告成。

二、类数组的判断

类数组有几个特点: 有length属性, 属性为整数, 常见的 arguments, NodeList 等都是类数组

function isArrayLike(el){
  if(!el || !("length" in el)){  // 排除 null 和 没有 length 属性的情况 !注意: ! "length" in el 这里要加括号, 因为有运算符优先级问题
    return false
  }
  return !Array.isArray(el) && typeof el === "object"  // 如果不是数组, typeof el 又是 "object"(排除 function), 说明是类数组
}

其实这里的判断还不够严谨, 如果要再苛刻一点, length 的长度应该和键的长度一致, 键应该为整数。

但实际应用场景下用来区分数组和类数组已经足够用了。

三、DOM 元素的判断

isDOMElement = function(obj) {
    return obj && obj.nodeType === 1;  // 1 为节点
};