如何判断 JavaScript 的数据类型?

本文详细介绍了如何使用typeof、instanceof和Object.prototype.toString在JavaScript中判断数据类型,包括null的处理、未定义变量、Number函数调用的区别,以及如何区别原始类型与对象实例。还探讨了如何通过实例化和自定义toStringTag进行更精确的类型判断。
摘要由CSDN通过智能技术生成

如何判断 JavaScript 的数据类型?

JavaScript 数据类型一共有 8 种:

undefined、Null、Boolean、String、Symbol、Number、bigint、Object

除了 Object 之外的 7 种属于原始数据类型。

有时,我们还会细分 Object 的类型,比如 Array, Function,Date,RegExp 等

判断方法

typeof

typeof 可以用来区分除了 Null 类型以外的原始数据类型,对象类型的可以从普通对象里面 识别出函数:

typeof undefined // "undefined"

typeof null // "object" 

typeof 1 // "number" 

typeof "1" // "string" 

typeof Symbol() // "symbol" 

typeof function() {} // "function" 

typeof {} // "object" 

问题一:

typeof 不能识别 null,如何识别 null?

答案:如果想要判断是否为 null,可以直接使用===全等运算符来判断(或者使用下面的 Object.prototype.toString 方法):

let a = null 
console.log(a === null) // true 

问题二:

typeof 作用于未定义的变量,会报错吗?

答案:不会报错,返回"undefined"

typeof randomVariable // "undefined" 

问题三:

typeof Number(1) 的返回值是什么?

答案:“number”。注意 Number 和 String 作为普通函数调用的时候,是把参数转化为相 应 的原始数据类型,也就是类似于做一个强制类型转换的操作,而不是默认当做构造函数 调 用。注意和 Array 区分,Array(…)等价于 new Array(…)

typeof Number(1) // "number" 
typeof String("1") // "string" 
Array(1, 2, 3) 
// 等价于 
new Array(1, 2, 3) 

问题四:

typeof new Number(1) 的返回值是什么?

答案:“object”

typeof new Number(1) // "object" 
typeof new String(1) // "object" 
instanceof

instanceof 不能用于判断原始数据类型的数据:

3 instanceof Number // false 
'3' instanceof String // false
true instanceof Boolean // false

instanceof 可以用来判断对象的类型:

var date = new Date() 
date instanceof Date // true 

var number = new Number() 
number instanceof Number // true 

var string = new String() 
string instanceof String // true 

需要注意的是,instanceof 的结果并不一定是可靠的,因为在 ECMAScript7 规范中可以通 过自定义 Symbol.hasInstance 方法来覆盖默认行为

Object.prototype.toString

Object.prototype.toString.call(undefined).slice(8, -1) // "Undefined" 

Object.prototype.toString.call(null).slice(8, -1) // "Null" 

Object.prototype.toString.call(3).slice(8, -1) // "Number" 

Object.prototype.toString.call(new Number(3)).slice(8, -1) // "Number" 

Object.prototype.toString.call(true).slice(8, -1) // "Boolean" 

Object.prototype.toString.call('3').slice(8, -1) // "String" 

Object.prototype.toString.call(Symbol()).slice(8, -1) // "Symbol" 

由上面的示例可知,该方法没有办法区分数字类型和数字对象类型,同理还有字符串类型 和字符串对象类型、布尔类型和布尔对象类型

另外,ECMAScript7 规范定义了符号 Symbol.toStringTag,你可以通过这个符号自定义 Object.prototype.toString 方法的行为:

'use strict' 

var number = new Number(3) 
number[Symbol.toStringTag] = 'Custom' 
Object.prototype.toString.call(number).slice(8, -1) // "Custom" 

function a () {} 
a[Symbol.toStringTag] = 'Custom' 
Object.prototype.toString.call(a).slice(8, -1) // "Custom" 

var array = [] 
array[Symbol.toStringTag] = 'Custom' 
Object.prototype.toString.call(array).slice(8, -1) // "Custom" 

因为 Object.prototype.toString 方法可以通过 Symbol.toStringTag 属性来覆盖默认行 为,所以 使用这个方法来判断数据类型也不一定是可靠的

Array.isArray

Array.isArray(value) 可以用来判断 value 是否是数组:

Array.isArray([]) // true

Array.isArray({}) // false 

(function () {
    console.log(Array.isArray(arguments))
}()) // false
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值