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

更新日期: 2018-03-29阅读量: 3161标签: 数据

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判断的更多更具体。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

广东IDC网运营广州南翔云数据中心正式挂牌广州移动机房

2019年9月,中国移动广州南翔(华德)云数据中心机房正式揭牌!中国移动广州南翔云数据中心作为广东移动最新的T3+级别机房,总规模达到2600多个机柜,并已投产运营数月

ES6 Proxy与数据劫持

随着前端界的空前繁荣,各种框架横空出世,包括各类mvvm框架百家争鸣,比如Anglar、Vue、React等等,它们最大的优点就是可以实现数据绑定,再也不需要手动进行DOM操作了,它们实现的原理也基本上是脏检查或数据劫持

js 实现纯前端将数据导出excel两种方式

将table标签,包括tr、td等对json数据进行拼接,将table输出到表格上实现,这种方法的弊端在于输出的是伪excel,虽说生成xls为后缀的文件,但文件形式上还是html;通过将json遍历进行字符串拼接,将字符串输出到csv文件

Vue项目数据动态过滤实践

页面从后台拿到的数据是由0、1之类的key,而这个key代表的value比如0-女、1-男的对应关系是要从另外一个数据字典接口拿到的

mock.js模拟数据

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

使用Proxy实现双向绑定

vue3.0要用Proxy来实现双向绑定,因此先来尝试一下实现方法。原来vue2的实现使用Object.defineProperty,监听set,但对于数组直接下标给数组设置值监听不了。

vue数据初始化--initState

Vue 实例在建立的时候会运行一系列的初始化操作,而在这些初始化操作里面,和数据绑定关联最大的是 initState。首先,来看一下他的代码:

在 React-Native 中持久化 redux 数据

在最近的一个项目中,要求对 redux 数据做持久化处理,经过研究后成功实现,在此记录一下过程,我们可以使用 redux-persist 对数据做持久化处理,安装npm i --save redux-persist

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

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

链表!比数组更适合做增删操作的数据结构

链表和数组的对比:在大多数语言中,数组的大小是固定的,从数组的起点或中间添加或删除元素的成本很高,因为需要移动元素,链表中的每一个元素在内存中不是连续放置的,和它左右两侧元素是没有关系的

点击更多...

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