简单了解JavaScript 中的变量类型判断方法及其应用

简单了解JavaScript 中的变量类型判断方法及其应用

前言

在 JavaScript 中,正确判断变量的类型对于编写健壮的代码至关重要。虽然 JavaScript 提供了 typeof 运算符来简单地判断基本类型,但它在某些情况下可能不够精确。例如,typeof null 返回 "object",这并不符合我们预期的行为。因此,为了进行更加精确的类型判断,我们通常会使用 Object.prototype.toString.call() 方法。

typeof()

typeof 是一个 JavaScript 操作符,用于确定变量或表达式的数据类型

判断原理

  • typeof的判断原理是:将值转换为二进制后看其前三位是不是0,所有的引用类型(除了function)的二进制前三位都是0,null的二进制全部是0

作用类型

    1. 可以判断除了null之外的原始类型
    1. 无法判断除function之外的引用类型

简单示例

js 复制代码
let str='Hello'
let num=123
let flag=false
let un=undefined
let nu=null

console.log(typeof(str))//string
console.log(typeof(num))//number
console.log(typeof(flag))//boolean
console.log(typeof(un))//undefined
console.log(typeof(nu))//object

let obj={}
let arr=[]
let fn=function(){}
let date=new Date()

console.log(typeof(obj))//object
console.log(typeof(arr))//object
console.log(typeof(fn))//function
console.log(typeof(date))//object

输出结果:

instanceof()

判断原理

  • instanceof是通过原型链的查找来判断的

作用类型

    1. 只能用于判断引用类型

简单示例

js 复制代码
let str='Hello'
let num=123
let flag=false
let un=undefined
let nu=null

console.log(str instanceof String)//false
console.log(num instanceof Number)//false
console.log(flag instanceof Boolean)//false
// console.log(un instanceof undefined)//无法判断,因为undefined和null无法检测
// console.log(nu instanceof null)//false


let obj={}
let arr=[]
let fn=function(){}
let date=new Date()

console.log(obj instanceof Object)//true
console.log(arr instanceof Array)//true
console.log(fn instanceof Function)//true
console.log(date instanceof Date)//true
console.log(arr instanceof Date)//false

输出结果:

Object.prototype.toString()

  • 1.Object.prototype.toString.call()

    • Object.prototype.toString.call() 是 JavaScript 中用来判断数据类型的一种常用方法。它的主要作用是返回传入值的内部属性 [[Class]] 的字符串表示,通常用来做精确的类型判断。
    • 简单示例
    js 复制代码
    let a={}
    let b=[]
    let c='hello'
    
    // console.log(Object.prototype.toString(a));
    console.log(Object.prototype.toString.call(a)); 
    console.log(Object.prototype.toString.call(b)); 
    console.log(Object.prototype.toString.call(c));
  • 2.toString()
    *

    1. 对象的toString()
      1. 数组的toString() 将数组中的元素用逗号的方式拼接成字符串
      1. 其它的toString() 直接将值修改成字符串字面量
    • 简单示例

      js 复制代码
      let obj = {};
      console.log(obj.toString()); // "[object Object]"
      let arr = [1, 2, 3];
      console.log(arr.toString()); // "1,2,3"
      let num = 123;
      console.log(num.toString()); // "123"
  • 3.Object.prototype.toString(x)
    *

    1. 如果toString接收的值是undefined,则返回"[object Undefined]"
      1. 如果toString接收的值是null,则返回"[object Null]"
      1. 调用ToObject(x)将x转为对象,此时得到的对象内部一定拥有一个属性[[Class]],而该属性[[Class]]的值就是x的类型
      1. 设class是[[Class]]的值
      1. 返回由"[object "和class和"]"连接而成的字符串
    • 简单示例:

      js 复制代码
      let a={}
      let b=[]
      let c='hello'
      
      console.log(Object.prototype.toString(a));
      console.log(Object.prototype.toString(b));
      console.log(Object.prototype.toString(c));

Array.isArray()

Array.isArray() 是专门用来判断是否为数组的方法,比较简单直接。

作用类型

  • 用来判断是否为数组。

简单示例:

ini 复制代码
javascriptCopy Code
let arr = [];
let obj = {};

console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false

小结

在 JavaScript 编程中,准确判断变量类型是确保代码稳健性的关键。尽管 typeof 提供了基本类型的判断,但其在处理引用类型上存在限制,如不能准确区分数组和对象。为了解决这一问题,通常使用 Object.prototype.toString.call() 方法,它能精确返回变量的类型信息,包括处理特殊值如 null 和 undefined。对于数组判断,推荐使用 Array.isArray() 方法,因其简洁明了。综上,选择适当的方法能有效提升 JavaScript 代码的可靠性和可维护性。

相关推荐
开开心心就好35 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享36 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js