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 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
点评js异步加载的4种方式
Dec 22 Javascript
Bootstrap零基础学习第一课之模板
Jul 18 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
详解Angular路由之路由守卫
May 10 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
详解如何探测小程序返回到webview页面
May 14 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
Javascript执行流程细节原理解析
May 14 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中养成7个面向对象的好习惯
2010/07/17 PHP
php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
php最简单的删除目录与文件实现方法
2014/11/28 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
JS获取文件大小方法小结
2015/12/08 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
《美丽的小路》教学反思
2014/02/26 职场文书
境外导游求职信
2014/02/27 职场文书
2014中考励志标语
2014/06/05 职场文书
会员卡清退活动总结
2014/08/27 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
城管个人总结
2015/02/28 职场文书
2015员工年度考核评语
2015/03/25 职场文书
基层组织建设年活动总结
2015/05/09 职场文书