回顾一下js中数据类型分为两大类,基础类型和引用数据类型,主要有:

基本数据类型

  • Number
  • String
  • Boolean
  • Null
  • Undefined
  • Symbol

复杂数据类型

  • Array
  • Function
  • Object

检测js中的数据类型常用的方法有:

  1. typeof
  2. instanceof
  3. Object.prototype.toString

对比一下这三种方法的优缺点:

typeof方法

typeof 5 // number 有效typeof 'dsd' // string 有效typeof true // boolean 有效typeof undefined // undefined 有效typeof function(){} // function 有效typeof null // object 无效typeof [] // object 无效typeof {} // object 无效

从以上例子中可以看到:

  • typeof 用来检测基本数据类型,除了Null无效外,其他都能返回正确的结果;
  • 但引用类型,除了function外,其他引用类型一律都返回object结果。

Note:这在需要对数据结构进行详细划分的时候就不适用,比如说你要明确区分数组和对象,然后进行处理的时候,typeof就完全达不到效果

好处:检测快捷方便

坏处:不能检测更为准确的数据类型,如Array、Object、Null


instanceof

MDN: 用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

[] instanceof Array; // true{} instanceof Object; // truenewDate() instanceof Date; // truefunction Person(){};newPerson() instanceof Person; // true[] instanceof Object; // truenewDate() instanceof Object; // truenewPerson instanceof Object; // true

由上面例子可以看出:

  • instanceof确实可以检测部分引用数据类型
  • []是Array的实例,也是Object的实例

模拟instanceof的检测过程

instanceof (A, B) = {    var L = A.__proto__;    var R = B.prototype;    if(L === R) {    return true; // A的内部属性 __proto__ 指向 B 的原型对象    }    return false;}

instanceof 只能用来判断两个对象是否属于实例关系, 而不能判断一个对象实例具体属于哪种类型。

由此可见instanceof在有些场景下依然不能满足检测具体类型的需求。


toString

toString是Object的原型方法。调用该方法默认返回当前对象的[[class]]

这是一个内部属性,其格式为 [object Xxx] ,其中 Xxx 就是对象的类型。

Object.prototype.toString.call(5)         // "[object Number]"Object.prototype.toString.call('str')     // "[object String]"Object.prototype.toString.call(true)      // "[object Boolean]"Object.prototype.toString.call(undefined)  // "[object Undefined]"Object.prototype.toString.call(null)       // "[object Null]"Object.prototype.toString.call(function(){})   // "[object Function]"Object.prototype.toString.call([])         // "[object Array]"Object.prototype.toString.call({})         // "[object Object]"

由上可见toString检测各数据类型算非常准确了,基本上覆盖了我们常用的数据类型

所以是判断数据类型最常用的方法。

这里利用toString写一个检测数据类型的方法

function checkDataType(value) {    const typeObj = Object.prototype.toString.call(value)    return typeObj.slice(8, -1)}

同时,Array对象提供isArray方法来检测数据是否为数组对象

Array.isArray([1,2,4]) // trueArray.isArray({foo: 'abc'}) // false

该方法用来检测数组类型也是非常方便的。

喜欢的话,公众号记得关注哦,不定时更新前端小技巧哦!!

js 数据类型_js中检测数据类型的方法汇总相关推荐

  1. React-Native中Animate动画使用方法汇总整理(六)之缩放的实现

    React-Native中Animate动画使用方法汇总整理(六)之缩放的实现 写作时间:2021/9/24 React-Native版本:0.63.2 目标平台:iOS(安卓平台尚未检测) 整理的进 ...

  2. React-Native中Animate动画使用方法汇总整理(四)之timing利用easing实现动画的灵活变换

    React-Native中Animate动画使用方法汇总整理(四)之timing利用easing实现动画的灵活变换 写作时间:2021/9/23 React-Native版本:0.63.2 目标平台: ...

  3. React-Native中Animate动画使用方法汇总整理(一)之简单动画的实现

    React-Native中Animate动画使用方法汇总整理(一)之简单动画的实现 写作时间:2021/9/23 React-Native版本:0.63.2 目标平台:iOS(安卓平台尚未检测) RN ...

  4. js如何操作表格(常用属性方法汇总)

    js如何操作表格(常用属性方法汇总) 一.总结 一句话总结: 二.表格相关的属性和方法 1.1 Table 对象集合 cells[] 返回包含表格中所有单元格的一个数组. 语法:tableObject ...

  5. 统计计量 | 统计学中常用的数据分析方法汇总

    来源:数据Seminar本文约10500字,建议阅读15+分钟 统计学中常用的数据分析方法汇总. Part1描述统计 描述统计是通过图表或数学方法,对数据资料进行整理.分析,并对数据的分布状态.数字特 ...

  6. java异或运算结果数据类型_java中的数据类型和运算符的总结归类。

    首先学习java肯定先要了解java的发展史,以及java的特点,常见的dos命令,jdk的安装,如何开发java程序等等一下概念行的东西,这里面我都不一一说了. 今天这一章主要想总结一下java中的 ...

  7. python中什么是主要数据类型_python中基本数据类型是什么

    python中基本数据类型是什么,变量,整型,类型,赋值,等号 python中基本数据类型是什么 易采站长站,站长之家为您整理了python中基本数据类型是什么的相关内容. python中基本数据类型 ...

  8. r如何查询mysql中的数据类型_MySQL-mysql中的数据类型

    mysql中的数据类型 数值类型 严格数值数据类型(INTEGER.SMALLINT.DECIMAL和NUMERIC), 关键字INT是INTEGER的同义词,关键字DEC是DECIMAL的同义词. ...

  9. c ++基本数据类型_C ++中的数据类型

    c ++基本数据类型 Data types help the associated variables understand the type of data they can store into ...

最新文章

  1. 2019年终总结:好好爱自己
  2. 不止最佳长论文,腾讯AI在ACL上还有这些NLP成果
  3. 关于ARP、MAC、IP欺骗以及TCP劫持
  4. 小白学python买什么书-书单狗 篇一:小白学Python,到底要看多少书?
  5. 从零开始入门 K8s | 理解 RuntimeClass 与使用多容器运行时
  6. 3月16日 winform
  7. (九)HTML5本地存储——本地数据库SQLLite的使用
  8. USACO Training Section 1.2 挤牛奶Milking Cows
  9. android 按钮带图标 阴影_android中带图标的按钮(ImageButton)怎么用
  10. 关于数据统计时的效率
  11. 随想录(什么是软件架构师)
  12. linux 树状目录代码,Linux tree - 以树状图列出目录的内容
  13. item_search_img - 拍立淘搜索淘宝商品(淘宝API)
  14. PHP字体间距设置,wps字间距怎么调整
  15. 世界电信日| 谈谈电信行业缘何牵线云计算?
  16. mysql积累--索引
  17. 阿朱,是时候拥抱 Linux 了!
  18. NB-IoT技术实战开发----keil安装和使用
  19. Redis 的主从复制
  20. 汇编语言 CMP指令

热门文章

  1. Python内置函数查询表——总结篇
  2. 2020年电大c语言程序设计作业1答案,2019年最新电大C语言程序设计作业答案.doc
  3. html类型转换函数,如何在JavaScript中转换数据类型?
  4. c++中结构体套结构体用 = {0}初始化编译报错解决办法(用memset或者={})(error: invalid conversion)
  5. Intel Realsense D435 开始运行启动时报错:RuntimeError: Couldn't resolve requests 原因及解决办法
  6. 黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(二)
  7. 绝命沙虫 精度,double,模拟 牛客白月赛44
  8. xay loves or 异或
  9. Java进阶:AtomicReference详解
  10. java中的“”、“|”、“^”、“~”运算符怎么用?