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 获取链接(url)参数的方法
Feb 15 Javascript
有关于JS辅助函数inherit()的问题
Apr 07 Javascript
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 Javascript
微信小程序实现吸顶效果
Jan 08 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
高亮度显示php源代码
2006/10/09 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
js每次Title显示不同的名言
2008/09/25 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
Django实现图片文字同时提交的方法
2015/05/26 Python
Python中random模块生成随机数详解
2016/03/10 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
python打包多类型文件的操作方法
2020/09/21 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
医学毕业生自荐信
2013/10/11 职场文书
皮肤科医师岗位职责
2013/12/04 职场文书
校园之声广播稿
2014/01/31 职场文书
超市活动计划书
2014/04/24 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
低碳环保演讲稿
2014/08/28 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
2014年妇联工作总结
2014/11/21 职场文书
撤诉书怎么写
2015/05/19 职场文书
少年雷锋观后感
2015/06/10 职场文书
开学典礼校长致辞
2015/07/29 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python