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 绑定事件时传递参数的实现方法
Oct 13 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
angular实现商品筛选功能
Feb 01 Javascript
js制作简单的音乐播放器的示例代码
Aug 28 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 Javascript
在NPM发布自己造的轮子的方法步骤
Mar 09 Javascript
JavaScript仿京东轮播图效果
Feb 25 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实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
python&MongoDB爬取图书馆借阅记录
2016/02/05 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
基于PyTorch中view的用法说明
2021/03/03 Python
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
联想中国官方商城:Lenovo China
2017/10/18 全球购物
遗嘱公证书标准样本
2014/04/08 职场文书
3的组成教学反思
2014/04/30 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
工作收入证明模板
2014/10/10 职场文书
企业年检委托书范本
2014/10/14 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
论文评审意见
2015/06/05 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
redis实现排行榜功能
2021/05/24 Redis