JavaScript类型判断操作方法(新手必看篇)

在JavaScript开发中，准确判断数据类型是日常编码的高频操作，也是不少初学者容易踩坑的地方。为什么typeof null 是 “object”? instanceof 的原理是什么？有没有一种“万能”的类型判断方法？本文将从原始类型和引用类型出发，循序渐进的带你搞懂这类型判断背后的门道。

一. 先温习JS中的两大类型阵营

在开始讨论之前，我们先快速回顾一下JS中的数据类型划分：

原始类型

string，number，boolaen，null, undefined, bigint, Symbol

它们直接存储于栈中，赋值给变量时是值的拷贝。

引用类型

Array, function, object, Date

它们存储在堆内存中，变量保存的只是内存地址的引用。

因为这两种类型在底层存储和行为的差异，导致它们各自适合不同的判断方式。

二. typeof———简单直接，但有局限

typeof 操作符是我们最常用的类型判断工具之一。它的特点是：

• 能准确判断除null以外的所有原始类型。

• 对于引用类型，typeof 统一返回 "object"，只有一个特例：函数返回 "function" 。

也就是说，数组、普通对象、日期对象、正则表达式等统统被识别为 "object"。

typeof []         // "object"
typeof {}         // "object"
typeof new Date() // "object"
typeof /reg/      // "object"
typeof function(){}  // "function"

让人迷惑的 null

typeof null  // "object"

为什么判断null返回的是object呢？这是因为：typeof 是通过将值转为二进制，来判断类型的，二进制前三位是 0 的统一被认为是引用类型，在计算机中，所有的引用类型被转为二进制，前三位都是 0（除了函数），而 null 转为二进制是一整串 0，所以null被错误判断为了object。

三.instanceof——基于原型链的归属判断

1. 只能判断引用类型，无法判断原始类型

3. 它是通过隐式原型链来查找 x 是否隶属于 X 这个类型

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

四. Object.prototype.toString——终极万能判断法

如果你想要一个绝对可靠、能区分所有数据类型的方法，那非Object.prototype.toString莫属。

原理浅析

每个对象内部都有一个 [[Class]] 属性，它标记了该对象的类型标签（如 Array、Date、Number、String 等）。当我们调用 Object.prototype.toString 方法时，它会执行以下步骤：

1. 如果值是 undefined，直接返回 "[object Undefined]"。

2. 如果值是 null，返回 "[object Null]"。

3. 否则，将值转换为一个对象（ToObject(this)），然后读取该对象的 [[Class]] 属性，最后拼接成 "[object " + [[Class]] + "]" 的形式。

由于 Object.prototype.toString 可以被任意对象调用，我们通常使用 call 或 apply 来改变它的 this 指向，使其能直接处理原始值。

Object.prototype.toString.call(123)     // "[object Number]"
Object.prototype.toString.call("hello") // "[object String]"
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(new Date()) // "[object Date]"
Object.prototype.toString.call(/reg/)    // "[object RegExp]"
Object.prototype.toString.call(function(){}) // "[object Function]"

五. Array.isArray——专为数组而生

检测数组是最常见的需求之一，虽然Object.prototype.toString.call(arr) === “[object Array]"万无一失，但是数组有一个专门的Array.isArray()方法，更加简单直接。

Array.isArray([])      // true
Array.isArray({})      // false
Array.isArray(new Array(5))  // true

六.各方法对比总结

到此这篇关于JavaScript类型判断操作方法的文章就介绍到这了,更多相关JS类型判断内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论