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跟随滚动条滚动浮动代码
Dec 31 Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
js sort 二维数组排序的用法小结
Jan 24 Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
详解vue-cli项目中怎么使用mock数据
May 29 Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 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代码优化的53个细节
2014/03/03 PHP
php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
vue观察模式浅析
2018/09/25 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
python的三目运算符和not in运算符使用示例
2014/03/03 Python
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
python多线程下信号处理程序示例
2019/05/31 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
英国名牌男装店:Standout
2021/02/17 全球购物
新闻学专业个人求职信写作
2014/02/04 职场文书
北京申奥口号
2014/06/19 职场文书
实习证明模板
2015/06/16 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
九年级数学教学反思
2016/02/17 职场文书
感谢信
2019/04/11 职场文书
导游词之清晏园
2019/11/22 职场文书
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫