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 相关文章推荐
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
Vue路由跳转问题记录详解
Jun 15 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 Javascript
vue实现抽屉弹窗效果
Nov 15 Javascript
js实现弹窗猜数字游戏
Nov 26 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下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
分析javascript原型及原型链
2018/03/18 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
Python getopt模块处理命令行选项实例
2014/05/13 Python
Python标准库之循环器(itertools)介绍
2014/11/25 Python
Python中的连接符(+、+=)示例详解
2017/01/13 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
机器学习python实战之决策树
2017/11/01 Python
python中如何正确使用正则表达式的详细模式(Verbose mode expression)
2017/11/08 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
对python for 文件指定行读写操作详解
2018/12/29 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
美国户外服装和装备购物网站:Outland USA
2020/03/22 全球购物
庆元旦迎新年广播稿
2014/02/18 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
MySQL索引失效的典型案例
2021/06/05 MySQL