JavaScript判断数据类型的多种方法【 js判断一个变量的类型】

更新日期: 2018-03-29 阅读: 5.5k 标签: 数据

在JavaScript中,变量一共有七种内置类型,分别为:

string: 字符串类型,由单引号或双引号来说明,如"string"
number:数字类型,比如什么整数啊浮点数啊都叫数字。
Boolean: 布尔类型,也就是true和false啦。
undefined:未定义类型,就是你创建一个变量后却没给它赋值~
null: 空值,null就是没有,什么也不表示。
object: 对象类型,是我们在js中经常使用的类型。
symbol : ES6引入了一种新的原始数据类型,Symbo表示独一无二的值。


判断js中数据类型的方法主要有:typeof、instanceof、 constructor、 prototype.toString.call()等,下面就逐一介绍它们的异同。


1、最常见的判断方法:typeof

console.log(typeof 'hello')   // string
console.log(typeof 1)   // number
console.log(typeof {})   // object
console.log(typeof function(){})   // function
console.log(typeof true)   // boolen
console.log(typeof Symbol())  //symbol
//其中typeof返回的类型都是字符串形式,需注意,例如:
console.log(typeof 'string' == "string") // true
console.log(typeof 'a' == 'String')  // false
//另外typeof 可以判断function的类型;在判断除Object类型的对象时比较方便。


2、判断已知对象类型的方法: instanceof

console.log([] instanceof Array) //判断是数组类型 true
console.log(new Date instanceof Date) //判断是日期类型  true
console.log(function(){} instanceof Function) //判断为function类型   true

注意:

1.instanceof 后面一定要是对象类型,并且大小写不能错,该方法适合一些条件选择或分支。

2.instanceof判断一个对象是否是另一个对象的实例,所以下面返回的是false:

console.log(true instanceof Boolean) //false
console.log('hello' instanceof String) //false
console.log(1 instanceof Number) // false

上面返回false的原因是,都是基本数据类型,不是对象,可以使用typeof来判断。使用new的形式就可以了,如下:

console.log(new String('hello') instanceof String) //true
console.log(new Number(1) instanceof Number) // true
console.log(new Boolean(true) instanceof Boolean) //true


3、根据对象的constructor判断

var a=[1,2];
console.log(a.constructor === Array); // true	数组
var b=1
console.log(b.constructor === Number);  // true	数字
var c='hello'
console.log(c.constructor === String); // true	字符串
var d={a: 1}
console.log(d.constructor === Object);  // true 对象
var e=Symbol()
console.log(e.constructor === Symbol);	// true 符号
var f = function a() { };
console.log(f.constructor === Function);  // true 函数
var j= new Date();
console.log(j.constructor === Date);	 // true 日期 
var h= new RegExp();
console.log(h.constructor === RegExp);	// true 正则

注意点1:如果数据不存在构造函数的时候,就会报错,如null,undefined:

var a=null
a.constructor// 报错:null 是 JS 原型链的起点,没有构造函数;
var b=undefined
b.constructor // 报错:undefined没有构造函数;
//错误提示:Uncaught TypeError: Cannot read property 'constructor' of null at <anonymous>:2:3

注意点2:constructor在类继承时会出错,解决construtor的问题通常是让对象的constructor手动指向自己。如下:

function A(){};
function B(){};
A.prototype = new B(); //A继承自B
var aObj = new A();
console.log(aobj.constructor === B) //true;
console.log(aobj.constructor === A) //false;
//而instanceof方法不会出现该问题,对象直接继承和间接继承的都会报true:
console.log(aobj instanceof B) -----//true;
console.log(aobj instanceof B) -----//true;
//言归正传,解决construtor的问题通常是让对象的constructor手动指向自己:
aobj.constructor = A; //将自己的类赋值给对象的constructor属性
console.log(aobj.constructor === A) //true;
console.log(aobj.constructor === B) //false; //基类不会为true;


4、prototype.toString.call()方法

var a=[1,2]
console.log(Object.prototype.toString.call(a) === '[object Array]') // true;
var b=1
console.log(Object.prototype.toString.call(b) === '[object Number]') // true;
var c='hello'
console.log(Object.prototype.toString.call(c) === '[object String]') // true;
var d=new Date()
console.log(Object.prototype.toString.call(d) === '[object Date]') // true;
var e=function(){}
console.log(Object.prototype.toString.call(e) === '[object Function]') // true;
var f={};
console.log(Object.prototype.toString.call(f) === '[object Object]') // true;
var j=Symbol()
console.log(Object.prototype.toString.call(j) === '[object Symbol]') // true;
var h=null
console.log(Object.prototype.toString.call(h) === '[object Null]')//true
var i=undefined
console.log(Object.prototype.toString.call(i)=== '[object Undefined]')	//true
var k=Math
console.log(Object.prototype.toString.call(k)=== '[object Math]')	//true

可以看出使用prototype.toString.call()方法,能更加精准的判断多种类型,比typeof判断的更多更具体。


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/566

相关推荐

js判断数字是奇数还是偶数的2种方法实现

奇数和偶数的判断是数学运算中经常碰到的问题,这篇文章主要讲解通过JavaScript来实现奇偶数的判断。2种判断方法:求余% 、&1

进制转换_二进制、八进制和十六进制数之间的转换

在计算机语言中常用的进制有二进制、八进制、十进制和十六进制,十进制是最主要的表达形式。对于进制,有两个基本的概念:基数和运算规则。

mock.js模拟数据

开发时,后端还没完成数据输出,前端只好写静态模拟数据。数据太长了,将数据写在js文件里,完成后挨个改url。某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼。想要尽可能还原真实的数据,要么编写更多代码,要么手动修改模拟数据

几个数据持久化框架Hibernate、JPA、Mybatis、JOOQ和JDBC Template的比较

因为项目需要选择数据持久化框架,看了一下主要几个流行的和不流行的框架,对于复杂业务系统,最终的结论是,JOOQ是总体上最好的,可惜不是完全免费,最终选择JDBC Template。

nodejs 使用 xlsx 实现导入导出

将数据导出成excel方法,下面介绍两种方式,一种是将数组数据导出成excel,一种是将json数据导出成excel,都非常简单

web scraper 抓取网页数据的几个常见问题

如果你想抓取数据,又懒得写代码了,可以试试 web scraper 抓取数据。如果你在使用 web scraper 抓取数据,很有可能碰到如下问题中的一个或者多个,而这些问题可能直接将你计划打乱,甚至让你放弃 web scraper 。

双向数据绑定与单向数据绑定的各自优势和关系

在react中是单向数据绑定,而在vue和augular中的特色是双向数据绑定。为什么会选择两种不同的机制呢?我猜测是两种不同的机制有不同的适应场景,查了一些资料后,总结一下。

原生JS数据绑定的实现

双向数据绑定是非常重要的特性 —— 将JS模型与HTML视图对应,能减少模板编译时间同时提高用户体验。我们将学习在不使用框架的情况下,使用原生JS实现双向绑定 —— 一种为Object.observe

Nginx返回大长度的JSON数据被截断

1 添加Nginx参数,增加缓存字符串大小;2 遇到权限问题,原因是大文件会先缓存到/proxy-temp文件夹下面,然后再返回;修改文件夹的权限为Nginx用户

js常见的八种数据结构

数组(Array)数组是最简单、也是使用最广泛的数据结构。栈(Stack)栈是一种特殊的线性表,仅能在线性表的一端操作,栈顶允许操作,栈底不允许操作。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!