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 相关文章推荐
一些相见恨晚的 JavaScript 技巧
Apr 25 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
javascript拖拽应用实例(二)
Mar 25 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 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中file_exists使用中遇到的问题小结
2016/04/05 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
<script defer> defer 是什么意思
2009/05/10 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
详解Python是如何实现issubclass的
2019/07/24 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
什么是聚集索引和非聚集索引
2012/01/17 面试题
大学生优秀自荐信范文
2014/02/25 职场文书
服装店营销方案
2014/03/10 职场文书
公司聘任书模板
2014/03/29 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
社区综治工作汇报
2014/10/27 职场文书
护士求职自荐信
2015/03/25 职场文书
小学六年级毕业感言
2015/07/30 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书