Day04 - 判断数据类型的方式有哪些？| 面试365

365天打卡记录

🔥 创作不易、大家帮然叔 B栈一键三连

[如何利用闭包完成类库封装] 📺 Billbill视频 📚 掘金文稿 🐱 Github
[谈谈闭包与即时函数的应用] 📺 Billbill视频 📚 掘金文稿 🐱 Github
[分析一下箭头语法为什么不能当做构造函数] 📺 Billbill视频 📚 掘金文稿 🐱 Github
[闭包与科里化、偏应用函数的关系] 📺 Billbill视频 📚 掘金文稿 🐱 Github
[如何用闭包制造惰性函数?] 📺 Billbill视频 📚 掘金文稿 🐱 Github
[什么是闭包？如何产生闭包] 📺 Billbill视频 📚 掘金文稿 🐱 Github
[new 一个构造函数，如果函数返回 return {} 、 return null ， return 1 ， return true 会发生什么情况？] 📺 Billbill视频 📚 掘金文稿 🐱 Github
[new 一个函数发生了什么？] 📺 Billbill视频 📚 掘金文稿 🐱 Github
[判断数据类型的方式有哪些？] 📺 Billbill视频 📚 掘金文稿 🐱 Github
[Number() 的存储空间是多大？如果后台发送了一个超过最大限制的数字怎么办?] 📺 Billbill视频 📚 掘金文稿 🐱 Github
[0.1 + 0.2 === 0.3 嘛？为什么？怎么解决？] 📺 Billbill视频 📚 掘金文稿 🐱 Github
[JS 整数是怎么表示的？] 📺 Billbill视频 📚 掘金文稿 🐱 Github

知识讲解

引用蜗牛哥的大作 juejin.cn/user/421298…

JavaScript 判断数据类型的方式共有四种

typeof
instanceof
constructor
Object.prototype.toString

typeof

typeof 操作符返回一个字符串,表示操作值的类型

利用 typeof 判断数据类型的语法是 typeof target。示例如下：

// 'number'
console.log(typeof 123)
// 'string'
console.log(typeof '123')
// 'boolean'
console.log(typeof true)
// 'symbol'
console.log(typeof Symbol(123))
// 'object'
console.log(typeof [])
// 'object'
console.log(typeof {})
// 'function'
console.log(typeof function(){})
// 'undefined'
console.log(typeof undefined)
// 'object'
console.log(typeof null)
// 'object'
console.log(typeof new Date())
// 'object'
console.log(typeof /\d/g)
// 'object'
console.log(typeof new Error())
typeof` 可以准确判断除 `null` 之外的所有基本数据类型以及 `Function`
对于 `null` 及其他引用数据类型都返回 `object

instanceof

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个 实例对象 的原型链上

利用 instanceof 判断数据类型的语法是 target instanceof constructor。示例如下：

// false
console.log(123 instanceof Number)
// false
console.log('123' instanceof String)
// false
console.log(true instanceof Boolean)
// false
console.log(Symbol(123) instanceof Symbol)
// true
console.log([] instanceof Array)
// true
console.log({} instanceof Object)
// true
console.log(function(){} instanceof Function)
// TypeError: Right-hand side of 'instanceof' is not an object
console.log(undefined instanceof undefined)
// TypeError: Right-hand side of 'instanceof' is not an object
console.log(null instanceof null)
// true
console.log(new Date() instanceof Date)
// true
console.log(/\d/g instanceof RegExp)
// true
console.log(new Error() instanceof Error)

用于判断操作值是否是指定构造函数的实例。

缺点：

不能判断基本数据类型,因为基本数据类型并不是构造函数的实例，没有原型链。
因为原型链的终点是 Object.protype => null,所以引用数据类型的原型链上都会存在 Object.protype,所以引用数据类型 instanceof Object 的时候都返回 true。
原型链可以被修改，所以结果值不一定准确。

constructor

利用 constructor 判断数据类型的语法是 target.constructor === constructor。示例如下：

// Number
console.log((123).constructor)
// String
console.log('123'.constructor)
// Boolean
console.log(true.constructor)
// Symbol
console.log(Symbol(123).constructor)
// Array
console.log([].constructor)
// Object
console.log({}.constructor)
// Function
console.log(function(){}.constructor)
// TypeError: Cannot read properties of undefined (reading 'constructor')
console.log(undefined.constructor)
// TypeError: Cannot read properties of null (reading 'constructor')
console.log(null.constructor)
// Date
console.log(new Date().constructor)
// RegExp
console.log(/\d/g.constructor)
// Error
console.log(new Error().constructor)

用于判断操作值是否是指定构造函数的实例，可以判断 null 和 undefined除外的所有数据类型，之所以 null 和 undefined 不可以，是因为他们作为 JavaScript 运行环境创建时就存在的基本数据类型，不存在 constructor 属性

基本数据类型为什么会有 constructor 属性呢？是因为基本数据类型获取 constructor 属性的时候，JavaScript 自动将基本数据类型的值转为包装对象实例，并在使用后立刻销毁实例。

缺点：constructor 属性可以被修改，所以结果值不一定准确。

Object.prototype.toString

返回对象的类型字符串.

利用 Object.prototype.toString 判断数据类型的语法是 Object.prototype.toString.call(target)。示例如下：

// '[object Number]'
console.log(Object.prototype.toString.call(123))
// '[object String]'
console.log(Object.prototype.toString.call('123'))
// '[object Boolean]'
console.log(Object.prototype.toString.call(true))
// '[object Symbol]'
console.log(Object.prototype.toString.call(Symbol(123)))
// '[object Array]'
console.log(Object.prototype.toString.call([]))
// '[object Object]'
console.log(Object.prototype.toString.call({}))
// '[object Function]'
console.log(Object.prototype.toString.call(function(){}))
// '[object Undefined]'
console.log(Object.prototype.toString.call(undefined))
// '[object Null]'
console.log(Object.prototype.toString.call(null))
// '[object Date]'
console.log(Object.prototype.toString.call(new Date()))
// '[object RegExp]'
console.log(Object.prototype.toString.call(/\d/g))
// '[object Error]'
console.log(Object.prototype.toString.call(new Error()))

可以准确判断所有数据类型。

总结

	typeof	instanceof	constructor	Object.prototype.toString
number	✅	❌	✅	✅
string	✅	❌	✅	✅
boolean	✅	❌	✅	✅
symbol	✅	❌	✅	✅
[]	❌	✅	✅	✅
{}	❌	✅	✅	✅
function() {}	❌	✅	✅	✅
undefined	❌	✅	❌	✅
null	❌	✅	❌	✅
new Date()	❌	✅	✅	✅
/\d/g	❌	✅	✅	✅
new Error()	❌	✅	✅	✅

面试攻略

主要是记区别和不能判断的原因说清楚。

点评

365天打卡记录

🔥 创作不易、大家帮然叔 B栈一键三连

[如何利用闭包完成类库封装] 📺 Billbill视频 📚 掘金文稿 🐱 Github
[谈谈闭包与即时函数的应用] 📺 Billbill视频 📚 掘金文稿 🐱 Github
[分析一下箭头语法为什么不能当做构造函数] 📺 Billbill视频 📚 掘金文稿 🐱 Github
[闭包与科里化、偏应用函数的关系] 📺 Billbill视频 📚 掘金文稿 🐱 Github
[如何用闭包制造惰性函数?] 📺 Billbill视频 📚 掘金文稿 🐱 Github
[什么是闭包？如何产生闭包] 📺 Billbill视频 📚 掘金文稿 🐱 Github
[new 一个构造函数，如果函数返回 return {} 、 return null ， return 1 ， return true 会发生什么情况？] 📺 Billbill视频 📚 掘金文稿 🐱 Github
[new 一个函数发生了什么？] 📺 Billbill视频 📚 掘金文稿 🐱 Github
[判断数据类型的方式有哪些？] 📺 Billbill视频 📚 掘金文稿 🐱 Github
[Number() 的存储空间是多大？如果后台发送了一个超过最大限制的数字怎么办?] 📺 Billbill视频 📚 掘金文稿 🐱 Github
[0.1 + 0.2 === 0.3 嘛？为什么？怎么解决？] 📺 Billbill视频 📚 掘金文稿 🐱 Github
[JS 整数是怎么表示的？] 📺 Billbill视频 📚 掘金文稿 🐱 Github