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
Feb 25 Javascript
用JS实现的一个include函数
Jul 21 Javascript
jquery 事件对象属性小结
Apr 27 Javascript
有趣的JavaScript数组长度问题代码说明
Jan 20 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
js实现3D旋转效果
Aug 18 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中的垃圾回收机制
2015/08/10 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
用js+xml自动生成表格的东西
2006/12/21 Javascript
Google 静态地图API实现代码
2010/11/19 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
Python中__name__的使用实例
2015/04/14 Python
python文件名和文件路径操作实例
2017/09/29 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
Python实现序列化及csv文件读取
2020/01/19 Python
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
培训主管岗位职责
2014/02/01 职场文书
开学寄语大全
2014/04/08 职场文书
普宁寺导游词
2015/02/04 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
英文导游词
2015/02/13 职场文书
道歉短信大全
2015/05/12 职场文书
预备党员党支部意见
2015/06/02 职场文书
浅谈Python数学建模之固定费用问题
2021/06/23 Python
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python