JavaScript 的几种数据类型判断函数

在我们开始了解有关js的类型判断之前,我们先来了解一下js两类数据类型分别是哪些:

基本类型:string、number、undefined、null、boolean、symbol、bigint。

引用类型:Array、Object、Function、Date、Set、Map。

一、typeof

  • typeof 可以正确判断除了 null 以外的所有数据类型

  • typeof 判断引用类型,除了 function 以外,都返回 object

ini 复制代码
let s = 'hello'
let n = 123
let f = true
let u = undefined
let nu = null
let sy = Symbol(1)
let b = 1234523423n

let arr = []
let obj = {}t
let fun = function () { }
let date = new Date()
let set = new Set()
let map = new Map()

当我们分别用函数console.log(typeof()) 执行打印时就会发现:

为什么打印基本类型 null 会出现 object 呢?

原因:typeof 是通过将值转化为二进制来判断类型的,对于二进制前三位是 0 的统一识别为对象,而所有引用类型转换成二进制前三位都是 0,null 的二进制全是 0

为什么打印引用类型 function 会出现 function 而不是 object 呢?

原因:函数得到 typeof === 'function' 是 JavaScript 的刻意设计,目的是明确标识可调用实体,尽管它在技术上是对象的一种子类型。这种区分提高了代码的可读性和类型检查的实用性。

二、instanceof

  • 可以准确判断引用类型,判断的机制是通过判断对象的隐式原型链来查找是否存在左边某一项等于右边的 prototype
  • 不能判断基本的数据类型(基本数据类型默认不访问隐式原型,所以无法识别那些基本类型)
ini 复制代码
let s = 'hello'
let n = 123
let f = true
let u = undefined
let nu = null
let sy = Symbol(1)
let b = 1234523423n

let arr = []
let obj = {}t
let fun = function () { }
let date = new Date()
let set = new Set()
let map = new Map()

当我们分别用函数console.log(X instanceof *) 执行打印时就会发现(由于Undefined 和 Null 都没有构造函数,所以我们这边就注释掉这两行):

javascript 复制代码
console.log(arr instanceof Array);  
console.log(arr instanceof Object);
console.log(obj instanceof Object);  
console.log(fun instanceof Function);
console.log(date instanceof Date);e
console.log(set instanceof Set);
console.log(map instanceof Map);

console.log(s instanceof String);
console.log(n instanceof Number); 
console.log(f instanceof Boolean);
// console.log(u instanceof Undefined);
// console.log(nu instanceof Null);
console.log(sy instanceof Symbol);
console.log(b instanceof BigInt);

看打印结果可知:instanceof 只能判别引用类型,而无法判别基本数据类型(引用类型全为 true ,基类型全为 false )。 而为什么第二行代码也会返回 true 呢? arr.proto === Array.proyotype.proto === Object.prototype.proto 这就类似于儿、父、爷的大小关系。

javascript 复制代码
function myInstanceof(L, R) {
    let L =  L.__proto__
    while(L){
        if (L === R.prototype){
            return true
        }
        L = L.__proto__
        }
        return false
}
console.log(myInstanceof([], Array));

可以通过这串代码来实现寻找某个函数的显示原型是否存在这个函数的隐式原型。

三、Array.isArray

当执行这行代码时:console.log(Array.isArray({})

会返回 false

当执行这行代码时:console.log(Array.isArray([])

会返回 true

所以这个函数只能用于判断里面是否为一个数组。

注意:isArray 没有添加在 Array 的原型上,所以 isArray 不能数组的实例对象访问。

四、Object .prototype.toString.call()

目前Object .prototype.toString.call()是用于判断数据类型最准确的方法。

es5.github.io/#x15.2.4.2

  1. 如果 this 值未定义,则返回" [object Undefined] "。

  2. 如果 this 值为null,则返回" [object Null] "。

  3. 让 O 成为调用 ToObject 并将 this 值作为参数传递的结果。

  4. 令 class 为 O 的 [[Class]] 内部属性的值。

  5. 返回连接三个字符串" [object ", " class "和" ] "的字符串值。

这里我们需要用 this 的显性绑定规则(显示绑定 fn.call(obj, x, x, ...)显示的将 fn 里面的 this 绑定到 obj 上, call 负责帮 fn 接收参数),来将那个 this 指向Object .prototype.toString.call()中的括号里面的内容去实现识别并返回其中的数据类型。

相关推荐
某公司摸鱼前端36 分钟前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~38 分钟前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
wen's2 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
vvilkim3 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim3 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心3 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络3 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
失落的多巴胺5 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear5 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息5 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js