JavaScript 判断数据类型的4种方法


Posted in Javascript onSeptember 11, 2020

本文提供四种方法判断js数据类型,这里记录了它们之间的差异,分别是 typeof 运算符、instanceof 运算符、constructor 属性、Object.prototype.toString 方法。

一、使用 typeof 判断数据类型

console.log('测试 Number ->', typeof 1); // number
console.log('测试 Boolean ->', typeof true); // boolean
console.log('测试 String ->', typeof ''); // string
console.log('测试 null ->', typeof null); // object
console.log('测试 undefined ->', typeof undefined); // undefined
console.log('测试 NaN ->', typeof NaN); // number
console.log('测试 function ->', typeof function () { }); // function
console.log('测试 Object ->', typeof {}); // object
console.log('测试 Array ->', typeof []); // object
console.log('测试 Date ->', typeof new Date()); // object
console.log('测试 Error ->', typeof new Error()); // object
console.log('测试 RegExp ->', typeof new RegExp()); // object
console.log('测试 Symbol ->', typeof Symbol()); // symbol
console.log('测试 Map ->', typeof new Map()); // object
console.log('测试 Set ->', typeof new Set()); // object

控制台输出如下:

测试 Number -> number
测试 Boolean -> boolean
测试 String -> string
测试 null -> object
测试 undefined -> undefined
测试 NaN -> number
测试 function -> function
测试 Object -> object
测试 Array -> object
测试 Date -> object
测试 Error -> object
测试 RegExp -> object
测试 Symbol -> symbol
测试 Map -> object
测试 Set -> object

总结:

1、typeof只能判断:

  • String(返回string),
  • Number(返回number),
  • Boolean(返回boolean),
  • undefined(返回undefined),
  • function(返回function),
  • Symbol(返回symbol)

2、对于new构造出来的都是返回object

3、对于Object和Array都是返回object

二、使用 instanceof 判断数据类型

console.log('测试 Number ->', 1 instanceof Number); // false
console.log('测试 Boolean ->', true instanceof Boolean); // false
console.log('测试 String ->', '' instanceof String); // false
// console.log('测试 null ->', null instanceof null); // TypeError: Cannot read property 'constructor' of null
// console.log('测试 undefined ->', undefined instanceof undefined); // TypeError: Cannot read property 'constructor' of undefined
console.log('测试 NaN ->', NaN instanceof Number); // false
console.log('测试 function ->', function () { } instanceof Function); // true
console.log('测试 Object ->', {} instanceof Object); // true
console.log('测试 Array ->', [] instanceof Array); // true
console.log('测试 Date ->', new Date() instanceof Date); // true
console.log('测试 Error ->', new Error() instanceof Error); // true
console.log('测试 RegExp ->', new RegExp() instanceof RegExp); // true
console.log('测试 Symbol ->', Symbol() instanceof Symbol); // false
console.log('测试 Map ->', new Map() instanceof Map); // true
console.log('测试 Set ->', new Set() instanceof Set); // true

console.log('测试 new Number ->', new Number(1) instanceof Number); // true
console.log('测试 new Boolean ->', new Boolean(true) instanceof Boolean); // true
console.log('测试 new String ->', new String('') instanceof String); // true

控制台输出如下:

测试 Number -> false
测试 Boolean -> false
测试 String -> false
测试 NaN -> false
测试 function -> true
测试 Object -> true
测试 Array -> true
测试 Date -> true
测试 Error -> true
测试 RegExp -> true
测试 Symbol -> false
测试 Map -> true
测试 Set -> true
测试 new Number -> true
测试 new Boolean -> true
测试 new String -> true

总结:

1、不能判断 null,undefined

2、基本数据类型 Number,String,Boolean 不能被判断

3、instanceof 用来判断对象是否为某一数据类型的实例,
上例中1,true,''不是实例,所以判断为false

三、使用 constructor 判断数据类型

console.log('测试 Number ->', (1).constructor === Number); // true
console.log('测试 Boolean ->', true.constructor === Boolean); // true
console.log('测试 String ->', ''.constructor === String); // true
// console.log('测试 null ->', null.constructor === null); // TypeError: Cannot read property 'constructor' of null
// console.log('测试 undefined ->', undefined.constructor); // TypeError: Cannot read property 'constructor' of undefined
console.log('测试 NaN ->', NaN.constructor === Number); // true 注意:NaN和infinity一样是Number类型的一个特殊值
console.log('测试 function ->', function () { }.constructor === Function); // true
console.log('测试 Object ->', {}.constructor === Object); // true
console.log('测试 Array ->', [].constructor === Array); // true
console.log('测试 Date ->', new Date().constructor === Date); // true
console.log('测试 Error ->', new Error().constructor === Error); // true
console.log('测试 RegExp ->', new RegExp().constructor === RegExp); // true
console.log('测试 Symbol ->', Symbol().constructor === Symbol); // true
console.log('测试 Map ->', new Map().constructor === Map); // true
console.log('测试 Set ->', new Set().constructor === Set); // true

控制台输出如下:

测试 Number -> true
测试 Boolean -> true
测试 String -> true
测试 NaN -> true
测试 function -> true
测试 Object -> true
测试 Array -> true
测试 Date -> true
测试 Error -> true
测试 RegExp -> true
测试 Symbol -> true
测试 Map -> true
测试 Set -> true

总结:

不能判断null,undefined,其它的都可以

四、使用 Object.prototype.toString 判断数据类型

console.log('测试 Number ->', Object.prototype.toString.call(1)); // [object Number]
console.log('测试 Boolean ->', Object.prototype.toString.call(true)); // [object Boolean]
console.log('测试 String ->', Object.prototype.toString.call('')); // [object String]
console.log('测试 null ->', Object.prototype.toString.call(null)); // [object Null]
console.log('测试 undefined ->', Object.prototype.toString.call(undefined)); // [object Undefined]
console.log('测试 NaN ->', Object.prototype.toString.call(NaN)); // [object Number]
console.log('测试 function ->', Object.prototype.toString.call(function () { })); // [object Function]
console.log('测试 Object ->', Object.prototype.toString.call({})); // [object Object]
console.log('测试 Array ->', Object.prototype.toString.call([])); // [object Array]
console.log('测试 Date ->', Object.prototype.toString.call(new Date())); // [object Date]
console.log('测试 Error ->', Object.prototype.toString.call(new Error())); // [object Error]
console.log('测试 RegExp ->', Object.prototype.toString.call(new RegExp())); // [object RegExp]
console.log('测试 Symbol ->', Object.prototype.toString.call(Symbol())); // [object Symbol]
console.log('测试 Map ->', Object.prototype.toString.call(new Map())); // [object Map]
console.log('测试 Set ->', Object.prototype.toString.call(new Set())); // [object Set]

控制台输出如下:

测试 Number -> [object Number]
测试 Boolean -> [object Boolean]
测试 String -> [object String]
测试 null -> [object Null]
测试 undefined -> [object Undefined]
测试 NaN -> [object Number]
测试 function -> [object Function]
测试 Object -> [object Object]
测试 Array -> [object Array]
测试 Date -> [object Date]
测试 Error -> [object Error]
测试 RegExp -> [object RegExp]
测试 Symbol -> [object Symbol]
测试 Map -> [object Map]
测试 Set -> [object Set]

总结:

目前最完美的判断数据类型的方法

结语:以上为笔者的测试和总结。如有误或不完整地方,欢迎各位老铁指正。

以上就是JavaScript 判断数据类型的4种方法的详细内容,更多关于JavaScript判断数据类型的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
Jquery 切换不同图片示例代码
Dec 05 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
node.js实现爬虫教程
Aug 25 Javascript
Node.js实用代码段之正确拼接Buffer
Mar 17 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 Javascript
jQuery实现日历效果
Sep 11 #jQuery
JS实现密码框效果
Sep 10 #Javascript
JavaScript常用工具函数库汇总
Sep 17 #Javascript
el-form 多层级表单的实现示例
Sep 10 #Javascript
详解React的回调渲染模式
Sep 10 #Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 #Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 #Javascript
You might like
社区(php&&mysql)六
2006/10/09 PHP
PHP生成带有雪花背景的验证码
2008/09/28 PHP
PHP的博客ping服务代码
2012/02/04 PHP
php中stream(流)的用法
2014/03/25 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
MVVM 双向绑定的实现代码
2018/06/21 Javascript
使用Angular Cli如何创建Angular私有库详解
2019/01/30 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
Python使用MONGODB入门实例
2015/05/11 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
Python定时器实例代码
2017/11/01 Python
python简易远程控制单线程版
2018/06/20 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
Python实现代码块儿折叠
2020/04/15 Python
浅谈django 重载str 方法
2020/05/19 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
英国家电直销:Appliances Direct
2016/09/22 全球购物
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
职工运动会邀请函
2014/01/19 职场文书
英语系毕业生求职信
2014/07/13 职场文书