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 相关文章推荐
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
简介JavaScript中Boolean.toSource()方法的使用
Jun 05 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
微信小程序实战之运维小项目
Jan 17 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
详解webpack 如何集成第三方js库
Jun 29 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
layui清空,重置表单数据的实例
Sep 12 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 Javascript
原生js实现购物车功能
Sep 23 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 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中使用sockets:从新闻组中获取文章
2006/10/09 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
use jscript Create a SQL Server database
2007/06/16 Javascript
用jscript启动sqlserver
2007/06/21 Javascript
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
2018/08/29 Javascript
JavaScript实现刮刮乐效果
2020/11/01 Javascript
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
在Python中操作字典之clear()方法的使用
2015/05/21 Python
python中模块查找的原理与方法详解
2017/08/11 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
详解Python的循环结构知识点
2019/05/20 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
Python识别html主要文本框过程解析
2020/02/18 Python
Python中的全局变量如何理解
2020/06/04 Python
python实现三种随机请求头方式
2021/01/05 Python
教师自荐书
2013/10/08 职场文书
《长相思》听课反思
2014/04/10 职场文书
奥林匹克的口号
2014/06/13 职场文书
多媒体教室标语
2014/06/26 职场文书
办公用品管理制度
2015/08/04 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS