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 相关文章推荐
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 Javascript
JavaScript中的数组特性介绍
Dec 30 Javascript
Javascript中的几种URL编码方法比较
Jan 23 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 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版本号
2006/10/09 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
许愿墙中用到的函数
2006/10/07 Javascript
eval与window.eval的差别分析
2011/03/17 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
element中的$confirm的使用
2020/04/26 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
python实现折半查找和归并排序算法
2017/04/14 Python
Python实现对字符串的加密解密方法示例
2017/04/29 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
python如何将图片转换为字符图片
2020/08/19 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
python利用opencv实现颜色检测
2021/02/23 Python
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
购买一个高级域名:BuyDomains
2018/03/11 全球购物
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
市场营销管理制度
2014/01/29 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
先进集体申报材料
2014/12/25 职场文书
企业催款函范本
2015/06/24 职场文书
酒店温馨提示语
2015/07/14 职场文书
教师远程培训心得体会
2016/01/09 职场文书
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS