JavaScript中常见的数据类型判断方法小结
一、typeof
typeof运算符返回一个字符串, 表示操作数的类型, 使用语法:typeof <操作数>
1.1 规则
下表, 是 typeof 针对不同数据类型, 返回的结果值
| 类型 | 结果 |
|---|---|
Boolean | "boolean" |
String | "string" |
Number | "number" |
BigInt | "bigint" |
Symbol | "symbol" |
Undefined | "undefined" |
Null | "object" |
Function (在 class 也是函数) | "function" |
| 其他任何对象 | "object" |
示例代码如下:
console.log(typeof true) // boolean
console.log(typeof '123') // string
console.log(typeof 11111) // number
console.log(typeof Math.LN2) // number
console.log(typeof Infinity) // number
console.log(typeof NaN) // number
console.log(typeof BigInt(11111)) // bigint
console.log(typeof Symbol(1111)) // symbol
console.log(typeof undefined) // undefined
console.log(typeof null) // object
console.log(typeof (() => {})) // function
console.log(typeof class {}) // function
console.log(typeof {}) // object
console.log(typeof []) // object
console.log(typeof /abc/) // object
console.log(typeof new Date()) // object
console.log(typeof new Promise(() => {})) // object1.2 为什么「typeof null」等于「object」
// JavaScript 诞生以来便如此 typeof null === "object";
- 在
JS中typeof null的结果为"object", 这是从JS的第一版遗留至今的一个bug - 在
JS最初的实现中,JS中的值是由一个表示类型的标签和实际数据值表示的, 对象的类型标签是0, 由于null代表的是空指针, 在大多数平台下值表示为0x00, 因此,null的类型标签是0, 因此typeof null也就返回了object - 当然针对这个
BUG曾有一个ECMAScript的修复提案, 但是被拒绝了, 原因是遗留代码太多了, 如果修改的话影响太广, 不如继续将错就错当个和事老
1.3 为什么「typeof (() => {})」等于 「function」
首先我们需要了解一个小知识, 函数是什么? 为什么被调用?
function 实际上是 object 的一个 子类型, 更深点说, 函数是一个可以被调用的对象; 那么它为什么能够被调用呢? 那是因为其内部实现了 [[Call]] 方法, 当函数对象被调用时会执行内部方法 [[call]]
那么回到正题, 为什么 typeof (() => {}) 会返回 function? 这里主要还是要看 ES6 中 typeof 是如何区分函数和对象类型的:
- 一个对象如果没有实现
[[Call]]内部方法, 那么它就返回object - 一个对象如果实现了
[[Call]]内部方法, 那么它就返回function
1.4 注意事项
- 所有使用
构造函数创建的数据,typeof都会返回object或function
const str = new String("String");
const num = new Number(100);
typeof str; // "object"
typeof num; // "object"
const func = new Function();
typeof func; // "function"typeof操作符的优先级高于加法 (+)等二进制操作符, 因此, 必要时候记得用括号
// 括号有无将决定表达式的类型。 const someData = 99; typeof someData + " Wisen"; // "number Wisen" typeof (someData + " Wisen"); // "string"
二、instanceof & isPrototypeOf()
在 JS 中我们有 两种 方式可以判断 原型 是否存在于某个 实例 的 原型链 上, 通过这种判断就可以帮助我们, 确定 引用数据 的具体类型; 需要注意的是该方法 只能用于判断引用数据, 无法判断 基本数据 类型
2.1 instanceof
介绍:
instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上语法:
实例对象 instanceof 构造函数, 返回一个Boolean值示例:
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
const auto = new Car('Honda', 'Accord', 1998);
auto instanceof Car // Car.prototype 是否在 auto 原型链上, true
auto instanceof Object // Object.prototype 是否在 auto 原型链上, true2.2 Object.prototype.isPrototypeOf()
介绍:
isPrototypeOf()方法用于检查一个对象是否存在于另一个对象的原型链中语法:
原型.isPrototypeOf(实例), 返回一个布尔值示例:
function Car() {}
const auto = new Car();
Car.prototype.isPrototypeOf(auto) // Car.prototype 是否在 auto 原型链上, true
Object.prototype.isPrototypeOf(auto) // Object.prototype 是否在 auto 原型链上, true三、根据「constructor」进行判断
constructor 判断方法跟 instanceof 相似, 如下图是 原型、实例、构造函数 之间的一个关系图, 从图可知, 在 实例对象的原型 中存在 constructor 指向 构造函数, 那么借用这个特性我们可以用于判断 数据 类型
function Car() {}
const auto = new Car();
auto.constructor === Car // true不同于 instanceof, 通过该方式既可以处理 引用数据、又能够处理 基本数据
(123).constructor === Number // true
(true).constructor === Boolean // true
('bar').constructor === String // true不同于 instanceof, 不能判断 对象父类
class A {}
class B extends A {}
const b = new B()
b.constructor === B // true
b.constructor === A // false
b instanceof B // true
b instanceof A // true注意: null 和 undefined 没有 constructor, 所以它是无法检测 Null undefined
四、Object.prototype.toString.call()
Object.prototype.toString() 方法返回一个表示该对象的字符串, 该字符串格式为 "[object Type]", 这里的 Type 就是对象的类型
const toString = Object.prototype.toString; toString.call(111); // [object Number] toString.call(null); // [object Null] toString.call(undefined); // [object Undefined] toString.call(Math); // [object Math] toString.call(new Date()); // [object Date] toString.call(new String()); // [object String]
注意: 对于自定义构造函数实例化出来的对象, 返回的是 [object Object]
const toString = Object.prototype.toString;
function Bar(){}
toString.call(new Bar()); // [object Object]默认, 如果一个对象有 Symbol.toStringTag 属性并且该属性值是个字符串, 那么这个属性值, 会被用作 Object.prototype.toString() 返回内容的 Type 值进行展示
const toString = Object.prototype.toString;
const obj = {
[Symbol.toStringTag]: 'Bar'
}
toString.call(obj) // [object Bar]补充: 一个通用方法, 一行代码获取 数据的类型
const getType = (data) => {
return Object.prototype.toString.call(someType)
.slice(8, -1)
.toLocaleLowerCase()
}五、总结
| 判断方法 | 基本类型 | 引用类型 | 父类 | null | undefined |
|---|---|---|---|---|---|
typeof | ✅ | ❌ | ❌ | ❌ | ✅ |
instanceof & isPrototypeOf() | ❌ | ✅ | ✅ | ❌ | ❌ |
constructor | ✅ | ✅ | ❌ | ❌ | ❌ |
Object.prototype.toString.call() | ✅ | ✅ | ❌ | ✅ | ✅ |
| 标题 |
|---|
typeof适合用于判断基本类型, 特别的是:Null会返回object、Function返回function、其余引用类型都返回objectinstanceof & isPrototypeOf()可以用于判断引用数据的类型, 同时可判断对象父类constructor可用于基本类型、引用类型, 但是不可判断null、undefined, 并且无法判断对象父类Object.prototype.toString.call()万能方法, 对于JS中所有类型都能够识别出来, 唯一不足的可能是无法判断对象父类(但是问题不大)
以上就是JavaScript中常见的数据类型判断方法小结的详细内容，更多关于JavaScript 判断方法的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家详细介绍了js实现移动端tab切换时下划线滑动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
inputSuggest文本框输入时提示、自动完成效果(邮箱输入自动补全插件)
inputSuggest在文本框输入字符时提示，类似Windows的“自动完成”功能，当在文本框输入字符时，与此相关的内容会显示在文本框的下边，你可随时使用键盘或鼠标点选那些提示，你就不用输入了2012-05-05
今天小编就为大家分享一篇layui的布局和表格的渲染以及动态生成表格的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
本文通过实例代码给大家介绍了bootstrap导航条效果，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-05-05
这篇文章主要介绍了Javascript对象按照属性排序方法示例探究,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2024-01-01
DOM事件模型的两件事：事件捕捉(Event Capture)的实现问题以及IE的高级事件处理模型的问题。2010-07-07
这篇文章主要为大家介绍了GoJs的文本绘图模板TextBlock使用实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要介绍了tangram.js库实现js类的方式,结合实例形式分析了tangram.js库实现类的创建、继承等相关操作技巧,需要的朋友可以参考下2018-01-01
这篇文章主要介绍了JS代码实现table数据分页效果的相关资料,非常不错，代码简答易懂，非常实用，需要的朋友可以参考下2016-05-05
这篇文章主要为大家详细介绍了js实现带积分弹球小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
最新评论