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 相关文章推荐
js页面跳转常用的几种方式
Nov 25 Javascript
一个JS的日期格式化算法示例
Jul 31 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
浅析JS运动
Dec 28 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
Vue.js动态组件解析
Sep 09 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
深入理解Vue 单向数据流的原理
Nov 09 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 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/11/19 PHP
在Mac OS上编译安装Nginx+PHP+MariaDB开发环境的教程
2016/02/23 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
PHP7 新增功能
2021/03/09 PHP
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
js实现拖拽效果
2015/02/12 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
原生js的数组除重复简单实例
2016/05/24 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
浅析Jquery操作select
2016/12/13 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
layui表格数据重载
2019/07/27 Javascript
python字符串排序方法
2014/08/29 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
初中生个人学习的自我评价
2013/12/04 职场文书
财务部出纳岗位职责
2013/12/22 职场文书
房地产开发计划书
2014/01/10 职场文书
《云雀的心愿》教学反思
2014/02/25 职场文书
党员民主生活会材料
2014/12/15 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
食堂卫生管理制度
2015/08/04 职场文书
担保书格式范文
2015/09/22 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
如何使用PyCharm及常用配置详解
2021/06/03 Python