JS数据类型判断的几种常用方法


Posted in Javascript onJuly 07, 2020

JavaScript 中常见数据类型有Number、String、Boolean、Object、Array、Json、Function、Date、RegExp、Error、undefined、Null等十几种。ES6还有新增的数据类型有Symbol、Set、Map等。在实际应用中,我们经常需要判断数据类型,现在我归纳几种方法,希望对大家有所帮助。

typeof 判断(最常用)

typeof 是 JS 提供的一个运算符,专门用来检测一个变量的类型 。 typeof 有2种使用方式:typeof(表达式)和typeof 变量名,第一种是对表达式做运算,第二种是对变量做运算。

function doSomething() {
  console.log('Hello World!');
}
console.log(typeof 1); // number
console.log(typeof 'Hello'); // string
console.log(typeof []); // object
console.log(typeof {}); // object
console.log(typeof doSomething); // function
console.log(typeof true); // boolean
console.log(typeof new Date()); // object
console.log(typeof new RegExp()); // object
console.log(typeof JSON.stringify({
  name: 'zhencanhua'
})); // string
console.log(typeof null); // object
console.log(typeof undefined); // undefined
console.log(typeof (new Error('error!'))); // object

console.log(typeof a); // undefined
console.log(typeof Symbol()); // symbol
console.log(typeof new Set()); // object
console.log(typeof new Map()); // object

从上面打印结果可以看出,typeof 不能区分引用型数据的类型和 null。另我们可以使用 Array.isArray(arr) 将数组类型的数据从中筛选出来。

instanceof 判断(了解)

instanceof 用来检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。 语法:object(实例对象) instanceof constructor(构造函数)。是的话返回 true,否则返回 false。所以, instanceof 运算符只能用作对象的判断。 针对 typeof 不能判断的引用型数据,我们可以使用 instanceof 运算符。

let arr1 = [1, 2, 3];
let obj1 = {
  name: '小明'
};
function Persion() { }
let persion1 = new Persion();
console.log(arr1 instanceof Array); // true
console.log(arr1 instanceof Object); // true,Array 是Object的子类
console.log(obj1 instanceof Object); // true
console.log(obj1 instanceof Array); // false
console.log(Persion instanceof Function, Persion instanceof Object); // true true
console.log(null instanceof Object); // false
console.log(persion1 instanceof Persion, persion1 instanceof Function, persion1 instanceof Object); // true false true
// String对象和Date对象都属于Object类型
let str1 = 'Hello';
let str2 = new String();
let str3 = new String('你好');
let myDate = new Date();
console.log(str1 instanceof String, str1 instanceof Object); // false, false
console.log(str2 instanceof String, str2 instanceof Object); // true, true
console.log(str3 instanceof String, str3 instanceof Object); // true, true
console.log(myDate instanceof Date, myDate instanceof Object); // true, true

从上面的判断可以看出,instanceof 的使用限制很多,而且还不能很清晰方便的判断出一个实例是数组还是对象或方法。

针对上面方法的弊端,我们可以使用 Object.prototype上的原生toString()方法来检测数据的类型。

Object.prototype.toString.call() 判断(最靠谱)

Object 是 JS 提供的原生对象, Object.prototype.toString对任何变量都会返回这样一个字符串"[object class]",class 就是 JS 内置对象的构造函数的名字。 call是用来改变调用函数作用域的。

Object.prototype.toString() 在toString方法被调用时执行下面的操作步骤:

  1. 获取this对象的[[Class]]属性的值。(所以使用call来改变this的指向)
  2. 将字符串"[object ",第一步获取的值, 以及 "]"拼接成新的字符串并返回。

[[Class]]是一个内部属性,所有的对象(原生对象和宿主对象)都拥有该属性。在规范中,[[Class]]是这么定义的: 内部属性的描述, [[Class]] 是一个字符串值,表明了该对象的类型。

读了上面的说明,用 call 的关键地方就在第1步,获取的是 this 对象,不加 call 改变作用域时 this 指向的是Object.prototype。

function doSomething() {
  console.log('Hello World!');
}
// 使用Object.prototype.toString.call来判断
console.log(Object.prototype.toString.call(1)); // [object Number]
console.log(Object.prototype.toString.call('Hello')); // [object String]
console.log(Object.prototype.toString.call(false)); // [object Boolean]
console.log(Object.prototype.toString.call({})); // [object Object]
console.log(Object.prototype.toString.call([1, 2, 3])); // [object Array]
console.log(Object.prototype.toString.call(new Error('error!'))); // [object Error]
console.log(Object.prototype.toString.call(new Date())); // [object Date]
console.log(Object.prototype.toString.call(new RegExp())); // [object RegExp]
console.log(Object.prototype.toString.call(doSomething)); // [object Function]
console.log(Object.prototype.toString.call(null)); // [object Null]
console.log(Object.prototype.toString.call(undefined)); // [object Undefined]
console.log(Object.prototype.toString.call(JSON.stringify({
  name: 'zhencanhau'
}))); // [object String]
console.log(Object.prototype.toString.call(Math)); // [object Math]
console.log(Object.prototype.toString.call(Symbol('abc'))); // [object Symbol]
console.log(Object.prototype.toString.call(new Set())); // [object Set]
console.log(Object.prototype.toString.call(new Map())); // [object Map]

但在实际应用时我们只想获取返回的结果中数组的第二项,比如"[object Number]",我们只想要Number这段字符,那么我们可以写个函数进行过滤:

// 通过定义一个公共函数获取数据类型
function getTypeName(val) {
  let str = Object.prototype.toString.call(val);
  return /^\[object (.*)\]$/.exec(str)[1];
}
console.log(getTypeName(false)); // Boolean
console.log(getTypeName()); // Undefined
console.log(getTypeName(null)); // Null

上面的问题完美解决。

constructor 判断(比较常用)

每一个对象实例都可以通过 constrcutor 对象来访问它的构造函数 。JS 中内置了一些构造函数:Object、Array、Function、Date、RegExp、String等。我们可以通过数据的 constrcutor 是否与其构造函数相等来判断数据的类型。

var arr = [];
var obj = {};
var date = new Date();
var num = 110;
var str = 'Hello';
var getName = function(){};
var sym = Symbol();
var set = new Set();
var map = new Map();

arr.constructor === Array; // true
obj.constructor === Object; // true
date.constructor === Date; // true
str.constructor === String; // true
getName.constructor === Function; // true
sym.constructor === Symbol; // true
set.constructor === Set; // true
map.constructor === Map // true

但是这种方式仍然有个弊端,就是 constructor 所指向的的构造函数是可以被修改的。

function Name(name) {
  this.name = name;
}

function Stuent(age) {
  this.age = age;
}
// 将构造函数Name的实例赋给Student的原型,Student的原型的构造函数会发生改变,将不再指向自身。
Stuent.prototype = new Name('张三');
Stuent.prototype.constructor === Name; // true
Stuent.prototype.constructor === Stuent; // false

以上就是我在项目中用到过的数据类型的判断方法,具体使用哪一种,还需要根据自己的实际需求来判断选择。

到此这篇关于JS数据类型判断的几种常用方法的文章就介绍到这了,更多相关JS 数据类型判断内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript之通用简单的table选项卡实现(二)
May 09 Javascript
基于jQuery的实现简单的分页控件
Oct 10 Javascript
两种常用的javascript数组去重方法思路及代码
Mar 26 Javascript
Javascript中 关于prototype属性实现继承的原理图
Apr 16 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
vue-cli常用设置总结
Feb 24 Javascript
JavaScript创建对象的常用方式总结
Aug 10 Javascript
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 #Javascript
jQuery 实现扁平式小清新导航
Jul 07 #jQuery
vue@cli3项目模板怎么使用public目录下的静态文件
Jul 07 #Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 #Javascript
React+EggJs实现断点续传的示例代码
Jul 07 #Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 #Javascript
jQuery 动态粒子效果示例代码
Jul 07 #jQuery
You might like
文件上传类
2006/10/09 PHP
如何设置mysql允许外网访问
2013/06/04 PHP
php常用hash加密函数
2014/11/22 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
[02:09]抵达西雅图!中国军团加油!
2014/07/07 DOTA
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
Python批量修改文本文件内容的方法
2016/04/29 Python
使用Python对MySQL数据操作
2017/04/06 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
python 批量修改/替换数据的实例
2018/07/25 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
Hotels.com南非:酒店预订
2017/11/02 全球购物
大学生毕业自我评价范文分享
2013/11/11 职场文书
路政管理专业个人自荐信范文
2013/11/30 职场文书
2014年大学生就业规划书
2014/04/04 职场文书
工作说明书范文
2014/05/07 职场文书
学前班教学反思
2016/02/24 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers