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中更短的 Array 类型转换
Oct 30 Javascript
JS实现简单的Canvas画图实例
Jul 04 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
puppeteer库入门初探
Jan 09 Javascript
详解微信小程序之scroll-view的flex布局问题
Jan 16 Javascript
微信小程序封装的HTTP请求示例【附升级版】
May 11 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 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
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
hadoop中一些常用的命令介绍
2013/06/19 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
CI框架常用方法小结
2016/05/17 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
用JS写的一个TableView控件代码
2010/01/23 Javascript
JavaScript toFixed() 方法
2010/04/15 Javascript
向左滚动文字 js代码效果
2013/08/17 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
vue使用codemirror的两种用法
2019/08/27 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
python 禁止函数修改列表的实现方法
2017/08/03 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
静态成员和非静态成员的区别
2012/05/12 面试题
司法局火灾防控方案
2014/06/05 职场文书
雷人标语集锦
2014/06/19 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL