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 相关文章推荐
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
理清apply(),call()的区别和关系
Aug 14 Javascript
查看源码的工具 学习jQuery源码不错的工具
Dec 26 Javascript
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
js读取并解析JSON类型数据的方法
Nov 14 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 Javascript
JS模拟实现京东快递单号查询
Nov 30 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错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
php获取post中的json数据的实现方法
2011/06/08 PHP
PHP中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
php 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
JavaScript实现动态创建CSS样式规则方案
2014/09/06 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
js省市县三级联动效果实例
2020/04/15 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
pycharm 使用心得(四)显示行号
2014/06/05 Python
Python中每次处理一个字符的5种方法
2015/05/21 Python
使用pdb模块调试Python程序实例
2015/06/02 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
python批量下载抖音视频
2019/06/17 Python
python二维键值数组生成转json的例子
2019/12/06 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
求职信范文英文版
2014/01/05 职场文书
美术教师求职信范文
2015/03/20 职场文书
党小组考察意见
2015/06/02 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记