javascript判断一个变量是数组还是对象


Posted in Javascript onApril 10, 2019

javascript中如何准确判断一个变量是什么,面试中这是考一个人基本功扎不扎实必定会问的一个问题。如果你还不是很清楚,相信这篇文章会对你有所帮助。

一,判断方法

1.typeof

我们能够使用typeof判断变量的身份,判断字符串得到string,数字和NaN得到number,函数会得到function等,但是判断数组,对象和null时都会得到object,详细请看js数据类型,这就是typeof的局限性,并不能准确的判断该变量的"真实身份"。那如何判断一个变量是数组还是对象?

 2.instanceof

使用instanceof可以用来判断一个变量是数组还是对象,原理如下:
数组也是对象的一种,使用instanceof都会返回true

var arr = new Array();

var arr = ['aa','bb','cc'];

var obj = { a: 'aa', b: 'bb', c: 'cc' };

console.log(arr instanceof Array); //true

console.log(arr instanceof Object); //true

console.log(obj instanceof Array); //false

console.log(obj instanceof Object); //true

instanceof是如何判断的:

instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性,意思就是该变量通过原型链上能否找到构造函数的prototype 属性,还不清楚原型链的请看原型链,所以就能明白为什么instanceof判断一个变量可以分清楚它到底是数组还是对象:

Array.prototype === arr.__proto__
Object.prototype === arr.__proto__.__proto__
因为arr的原型链上存在Array.prototype和Object.prototype
只有Array类型的变量才会满足arr instanceof Array和arr instanceof Object都返回true,
也只有Object类型变量才满足obj instanceof Array返回false,obj instanceof Object返回true        

3.constructor

var arr = ['aa','bb','cc'];
var obj = {
'a': 'aa',
'b': 'bb',
'c': 'cc'
};
console.log(arr.constructor === Array); //true
console.log(arr.constructor === Object); //false
console.log(obj.constructor === Object); //true

4.Object.prototype.toString.call()

Object.prototype.toString.call()方法可以精准判断变量类型,它返回[object constructorName]的字符串格式,这里的constructorName就是call参数的函数名

var a = NaN;
var b= '222';
var c = null;
var d = false;
var e = undefined;
var f = Symbol(); 
var arr = ['aa','bb','cc'];
var obj = { 'a': 'aa', 'b': 'bb', 'c': 'cc' }; 
var res = Object.prototype.toString.call(arr);
console.log(res); 
//[object Array] var res2 = Object.prototype.toString.call(obj); console.log(res2); //[object Object] var res3 = Object.prototype.toString.call(a); console.log(res3); //[object Number] var res4 = Object.prototype.toString.call(b); console.log(res4); //[object String] var res4 = Object.prototype.toString.call(c); console.log(res4); //[object Null] var res5 = Object.prototype.toString.call(d); console.log(res5); //[object Boolean] var res6 = Object.prototype.toString.call(e); console.log(res6); //[object Undefined] var res7 = Object.prototype.toString.call(f); console.log(res7); //[object Symbol]// JavaScript Document

二,总结

判断简单数据类型可以用typeof,判断数组,对象使用instanceof,constructor和 Object.prototype.toString.call(),最好使用Object.prototype.toString.call(),更加精准

以上所述是小编给大家介绍的javascript判断一个变量是数组还是对象详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 应用技巧集合[推荐]
Aug 30 Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
vue使用xe-utils函数库的具体方法
Mar 06 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
js实现筛选功能
Nov 24 Javascript
Angular CLI 使用教程指南参考小结
Apr 10 #Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
Apr 10 #Javascript
element-ui多文件上传的实现示例
Apr 10 #Javascript
基于mpvue搭建微信小程序项目框架的教程详解
Apr 10 #Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 #Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 #Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 #Javascript
You might like
如何过滤高亮显示非法字符
2006/10/09 PHP
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
PHP判断来访是搜索引擎蜘蛛还是普通用户的代码小结
2015/09/14 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
javascript通过class来获取元素实现代码
2013/02/20 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
node.js实现端口转发
2016/04/14 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
分享几道你可能遇到的python面试题
2017/07/24 Python
Python爬虫实战:分析《战狼2》豆瓣影评
2018/03/26 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
python3实现字符串操作的实例代码
2019/04/16 Python
简单了解django索引的相关知识
2019/07/17 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
最新远光软件笔试题面试题内容
2013/11/08 面试题
.NET程序员的数据库面试题
2012/10/10 面试题
Linux操作面试题
2012/05/16 面试题
写给保洁员表扬信
2014/01/08 职场文书
python3 字符串str和bytes相互转换
2022/03/23 Python