typeof和instanceof的区别

instanceof 常用来判断一个变量是否为空,或者是什么类型的。但它们之间还是有区别的

instanceof的用法

instanceof返回的是一个布尔值

var a = {};
alert(a instanceof Object); //true
var b = [];
alert(b instanceof Array); //true

需要注意的是,instanceof只能用来判断对象和函数,不能用来判断字符串和数字等,如:

var b = '123';
alert(b instanceof String); //false
alert(typeof b); //string
var c = new String("123");
alert(c instanceof String); //true
alert(typeof c); //object

typeof的用法

 typeof会返回一个变量的基本类型,只有以下几种:number,boolean,string,object,undefined,function;

typeof运算符介 绍:
typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型。
它返回值是一个字符串,该字符串说明运算数的类型。

你知道下面typeof运算的结果吗?

typeof(1);
typeof(NaN);
typeof(Number.MIN_VALUE);
typeof(Infinity);
typeof("123");
typeof(true);
typeof(window);
typeof(document);
typeof(null);
typeof(eval);
typeof(Date);
typeof(sss);
typeof(undefined);

看 看你会几个?

如果看了以后,不是很明白的话,请看下面(明白的人就不用往下看了):
typeof是一个一元运算符,它返回的结果 始终是一个字符串,对不同的操作数,它返回不同的结果。
具体的规则如下
一、对于数字类型的操作数而言, typeof 返回的值是 number。比如说:typeof(1),返回的值就是number。
上面是举的常规数字,对于非常规的数字类型而言,其结果返回的也是number。比如typeof(NaN),NaN在
JavaScript中代表的是特殊非数字值,虽然它本身是一个数字类型。
在JavaScript中,特殊的数字类型还有几种:
Infinity 表示无穷大特殊值
NaN            特殊的非数字值
Number.MAX_VALUE     可表示的最大数字
Number.MIN_VALUE     可表示的最小数字(与零最接近)
Number.NaN         特殊的非数字值
Number.POSITIVE_INFINITY 表示正无穷大的特殊值
Number.NEGATIVE_INFINITY  表 示负无穷大的特殊值

以上特殊类型,在用typeof进行运算进,其结果都将是number。

二、对于字符串类型, typeof 返回的值是 string。比如typeof("123")返回的值是string。 
三、对于布尔类型, typeof 返回的值是 boolean 。比如typeof(true)返回的值是boolean。
四、对于对象、数组、null 返回的值是 object 。比如typeof(window),typeof(document),typeof(null)返回的值都是object。
五、 对于函数类型,返回的值是 function。比如:typeof(eval),typeof(Date)返回的值都是function。
六、如 果运算数是没有定义的(比如说不存在的变量、函数或者undefined),将返回undefined。比如:typeof(sss)、typeof(undefined)都返回undefined。

看完了六条规则,再回头看一下,是不是很简单了……

下面 我们将用程序代码验证一下:

document.write ("typeof(1): "+typeof(1)+"<br>");            //number
document.write ("typeof(NaN): "+typeof(NaN)+"<br>");    //number
document.write ("typeof(Number.MIN_VALUE): "+typeof(Number.MIN_VALUE)+"<br>")  //number
document.write ("typeof(Infinity): "+typeof(Infinity)+"<br>")          //number
document.write ("typeof(\"123\"): "+typeof("123")+"<br>")   //string
document.write ("typeof('123' + 12): "+typeof('123' + 12)+"<br>")  //string
document.write ("typeof('123' + Date): "+typeof('123' + Date)+"<br>")  //string
document.write ("typeof(true): "+typeof(true)+"<br>")     //boole
document.write ("typeof(window): "+typeof(window)+"<br>")  //object
document.write ("typeof(document): "+typeof(document)+"<br>")  //object
document.write ("typeof(null): "+typeof(null)+"<br>")  //object
document.write ("typeof(eval): "+typeof(eval)+"<br>")  //function
document.write ("typeof(Date): "+typeof(Date)+"<br>")  //function
document.write ("typeof(sss): "+typeof(sss)+"<br>")    //undefined
document.write ("typeof(undefined): "+typeof(undefined)+"<br>")  //undefined

判断变量是否存在

如果我们想要判断一个变量是否存在,可以使用typeof:(不能使用if(a) 若a未声明,则报错)

if(typeof a != 'undefined'){
//变量存在
}

判断数组是否为数组

typeof方法不适用于来判断数组,因为不管是数组还是对象,都会返回object,这就需要我们需求其他的方法。

有几种方法可以拿来判断:

constructor属性

这个属性在我们使用js系统或者自己创建的对象的时候,会默认的加上,例如:

var arr = [1,2,3];  //创建一个数组对象
arr.prototype.constructor = Array; //这一句是系统默认加上的

所以我们就可以这样来判断:

var arr = [1,2,3,1];
alert(arr.constructor === Array); // true

instanceof

instanceof是检测对象的原型链是否指向构造函数的prototype对象的,所以我们也可以用它来判断:

var arr = [1,2,3];
alert(arr instanceof Array); // true

自己封装函数判断

            var arr = [1, 2, 3];
function isArrayFn(obj) { //封装一个函数
if(typeof Array.isArray === "function") {
return Array.isArray(obj); //浏览器支持则使用isArray()方法
} else { //否则使用toString方法
return Object.prototype.toString.call(obj) === "[object Array]";
}
}
alert(isArrayFn(arr)); // true

JS中typeof和instanceof的用法和区别的更多相关文章

  1. C#中??和?分别是什么意思? 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中,对象相等和对象一致分别指的是什么?

    C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...

  2. JS中typeof与instanceof的区别

    JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的.但它们之间还是有区别的: Typeof typeof 是一个一元运算,放在一个运算数之前 ...

  3. JS中typeof与instanceof的区别 (2010-05-26 10:47:40

    JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的.但它们之间还是有区别的: typeof typeof 是一个一元运算,放在一个运算数之前 ...

  4. js中typeof和instanceof

    对于typeof和instanceof,我们经常用来检测数据的类型.typeof可以检测Number.Boolean.String.Undefined类型,对于其他类型的数据都返回为object:而i ...

  5. js中typeof与instanceof用法

    今天写JS代码,遇到动态生成多个名称相同的input复选按钮 需要判断其是否是数组,用到了if (typeof(document.MapCheckMgr.checkid)!="undefin ...

  6. JS中typeof和instanceof用法区别

    typeof和instanceof都可以用来判断变量 1.typeof用以获取一个变量或者表达式的类型,typeof一般只能返回如下几个结果: number,boolean,string,functi ...

  7. js中 typeof 和 instanceof 的区别

    typeof 和 instanceof 都能判断数据类型,但是它们之间有什么区别呢,浅谈如下 typeof 用于判断数据类型,返回值为以下6种类型 1.string 2.boolean 3.numbe ...

  8. JavaScript 中typeof、instanceof 与 constructor 的区别?

    typeof.instanceof 与 constructor 详解 typeof  一元运算符 返回一个表达式的数据类型的字符串,返回结果为js基本的数据类型,包括number,boolean,st ...

  9. js中typeof与instanceof用法区别

    今天写JS代码,遇到动态生成多个名称相同的input复选按钮 需要判断其是否是数组,用到了if (typeof(document.MapCheckMgr.checkid)!="undefin ...

随机推荐

  1. javascript 区分对象类型

    在 JavaScript 里使用 typeof 来判断数据类型,只能区分基本类型,即 “number”,”string”,”undefined”,”boolean”,”object” 五种.对于数组. ...

  2. Git管理

    在bitbucket用git用法 核心流程:从远端中心repo那里git clone到本地,再在本地开发(add,commit),通常会利用branch管理,如果觉得code没问题了,就push到远端 ...

  3. View Pi's Status on WebBrowser

    1. install php and cgi support sudo apt-get install php5-common sudo apt-get install php5-cgi sudo a ...

  4. GlusterFS 一

    GlusterFS 一 1 安装源 yum install centos-release-gluster312.noarch 列出所有可用安装包yum list gluster* 安装glusterf ...

  5. VUE 学习笔记 二 生命周期

    1.除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来 var data = { a: 1 } var vm = new Vue({ el: ' ...

  6. MVC中获取所有按钮,并绑定事件!

    <script> var btns = $('[id=addbtn]'); //不能直接使用#ID来获取,必须用[] //循环遍历所有的按钮,一个一个添加事件绑定   for (var i ...

  7. 201621123023《Java程序设计》第13周学习总结

    一.本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 二.为你的系统增加网络功能(购物车.图书馆管理.斗地主等)-分组完成 为了让你的系统可以被多个用户通过网络同 ...

  8. JAVA中Date类的使用

    一. Date类 Date类对象的创建: 1.创建一个当前时间的Date对象 //创建一个代表系统当前日期的Date对象 Date d = new Date(); 2.创建一个我们指定的时间的Date ...

  9. 【BZOJ2440】[中山市选2011]完全平方数

    题意描述 原题 一句话描述: 求第K个不是完全平方数的倍数的数. K≤$10^{9}$ ------------------------------------------ 题解: 首先,直接求第$k ...

  10. jquery中通过trim() length 判断数据是否有值

    在jquery中可以通过如下方式判断某一个字符串是否有值,结合if else if 语句进行业务逻辑的处理 <!DOCTYPE html> <html lang="en&q ...