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 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
JavaScript 基于原型的对象(创建、调用)
Oct 16 Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
JavaScript函数定义的常见注意事项小结
Sep 16 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
bootstrap轮播图示例代码分享
May 17 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
微信小程序实现留言板功能
Nov 02 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
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翻页类
2009/06/01 PHP
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
ASP Json Parser修正版
2009/12/06 Javascript
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
jQuery基础知识小结
2014/12/22 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
domReady的实现案例
2016/11/23 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
python爬取微信公众号文章
2018/08/31 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
装饰资料员岗位职责
2013/12/30 职场文书
老干部工作汇报材料
2014/10/28 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
Python中的程序流程控制语句
2022/02/24 Python
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL