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 slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
封装html的select标签的js操作实例
Jul 02 Javascript
js单例模式详解实例
Nov 21 Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
使用ES6语法重构React代码详解
May 09 Javascript
JavaScript实现自动跳转文本功能
May 25 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
纯js实现隔行变色效果
Nov 29 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 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动态柱状图实现方法
2015/03/30 PHP
php基础教程
2015/08/26 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
ant design vue中表格指定格式渲染方式
2020/10/28 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
Python开发的实用计算器完整实例
2017/05/10 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
python re模块和正则表达式
2021/03/24 Python
党员入党表决心的话
2014/03/11 职场文书
教室标语大全
2014/06/21 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
终止合同协议书范本
2016/03/22 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript