JS区分Object与Aarry的六种方法总结


Posted in Javascript onFebruary 27, 2017

一、经常遇见的问题:

JS中判断一个对象的类型时,通常使用typeof,这时候问题就来了,因为typeof()辨别数组的时候返回的是object,所以JS

中判断一个对象是不是数组需要一些特殊的处理方式,下面将介绍个人总结的六种处理方法。

二、开门见山

开发中要判断一个对象是不是数组,推荐使用下面这个函数:

function isArray(obj){
  if(Array.isArray){
    return Array.isArray(obj);
  }else{
   return Object.prototype.toString.call(obj)==="[object Array]";
  }
}

上面这个函数是方便急于解决问题的人,下面我将具体述说六种方法,因为可能面试的时候考官需要一个知识全面的你;

三、六种方案详解:

(1)方法一:利用toString方法

通过调用toString( )方法试着将该变量转化为代表其类型的string。该方法对于真正的array可行;参数对象转化为string时

返回[object Arguments]会转化失败;此外, 对于含有数字长度属性的object类也会转化失败。

方法如下:

<!DOCTYPE html>
<html>
 <head>
 <title>Array的判断方法</title>
 <meta charset="utf-8"/>
 <script>
	function isArrayOne(arr){
		return <span style="color:#cc0000;">Object.prototype.toString.call(arr) === "[object Array]";</span>
	}
	var obj = {"k1":"v1"};
	var arr = [1,2];
	console.log("对象的结果:"+isArrayOne(obj));
	console.log("数组的结果:"+isArrayOne(arr));
 </script>
 </head>
 <body>
 
 </body>
</html>

结果如图:

JS区分Object与Aarry的六种方法总结

注意:推荐使用“===”全等于而不使用“==”等等于,因为效率更高!

(2)方法二:通过isArray:

使用Javascript 1.8.5(ECMAScript 5),变量名字.isArray( )可以实现这个目的,前提是有支持这一函数,其实isArray就是

方法一的封装使用。

使用方法十分简单:

Array.isArray(obj); //obj是待检测的对象

返回true或false,如果为true则为数组

(3)方法三:通过instanceof运算符来判断,

注意:instanceof运算符左边是子对象(待测对象),右边是父构造函数(这里是Array),

即:子对象 instanceof 父构造函数

instance: 实例:凡是用new 构造函数()创建出的对象,都称为是构造函数的实例

扯半天都迷糊了,还是直接看代码好:

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>Document</title>
 <script>
	var obj = {"k1":"v1"};
	var arr = [1,2];
	console.log("Instanceof处理对象的结果:"+(obj instanceof Array));
	console.log("Instanceof处理数组的结果:"+(arr instanceof Array));
 </script>
 </head>
 <body>
 
 </body>
</html>

运行结果如下:

JS区分Object与Aarry的六种方法总结

(4)使用isPrototypeOf()函数

原理:检测一个对象是否是Array的原型(或处于原型链中,不但可检测直接父对象,还可检测整个原型链上的所有父对象

使用方法: parent.isPrototypeOf(child)来检测parent是否为child的原型;

需注意的是isPrototypeOf()函数实现的功能和instancof运算符非常类似;

具体代码:

Array.prototype.isPrototypeOf(arr) //true表示是数组,false不是数组

(5)利用构造函数constructor

具体代码:

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>Document</title>
 <script>
	var obj = {'k':'v'};
	var t1 = new Array(1);
	var t2 = t1;
	console.log(obj.constructor == Array);
	console.log(t1.constructor == Array);
	console.log(t2.constructor == Array);
 </script>
 </head>
 <body>
	
 </body>
</html>

结果如图

JS区分Object与Aarry的六种方法总结

(6)使用typeof(对象)+类型名结合判断:

代码如下:

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>Document</title>
 <script>
	function isArrayFour(arr){
		if(typeof(arr)==="object"){
			if(arr.concat){
				return "This is Array";
			}else{
				return "This Not Array";
			}
		}
	}
	var arr = [1];
	var obj = {'k':'v'};
	console.log(typeof(arr));
	console.log(typeof(obj));
	console.log(isArrayFour(arr));
	console.log(isArrayFour(obj));
 </script>
 </head>
 <body>
 
 </body>
</html>

结果如下:

这种方法其实有局限性,有的同学可能一下就破解了,那就是要是

要是对象中不巧定义了这属性怎么办

var obj = {'concat':'Teast me?'};

JS区分Object与Aarry的六种方法总结

我只能说哥你赢了!!!

以上这篇JS区分Object与Aarry的六种方法总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js模拟hashtable的简单实例
Mar 06 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
最简单的tab切换实例代码
May 13 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
Jul 18 Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
详解基于vue-cli优化的webpack配置
Nov 06 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
通过实践编写优雅的JavaScript代码
May 30 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 Javascript
js动态生成表格(节点操作)
Jan 12 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 #Javascript
JavaScript中object和Object的区别(详解)
Feb 27 #Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 #Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 #Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 #Javascript
详解Javascript几种跨域方式总结
Feb 27 #Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 #Javascript
You might like
用PHP开发GUI
2006/10/09 PHP
ThinkPHP登录功能的实现方法
2014/08/20 PHP
PHP数组操作类实例
2015/07/11 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
php和nginx交互实例讲解
2019/09/24 PHP
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
jquery foreach使用示例
2013/09/12 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
灵活使用数组制作图片切换js实现
2016/07/28 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
javascript将非数值转换为数值
2018/09/13 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
Python列表list数组array用法实例解析
2014/10/28 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
新闻专业毕业生英文求职信
2014/03/19 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
孝女彩金观后感
2015/06/10 职场文书
2016中秋节广告语
2016/01/28 职场文书
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android