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 相关文章推荐
深入探讨javascript中的数据类型
Mar 04 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
实例详解angularjs和ajax的结合使用
Oct 22 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
JS实现简单易用的手机端浮动窗口显示效果
Sep 07 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
vue 使用原生组件上传图片的实例
Sep 08 Javascript
vue自定义右键菜单之全局实现
Apr 09 Vue.js
利用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实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
php中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
js匿名函数作为函数参数详解
2016/06/01 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
javascript计算对象长度的方法
2017/10/25 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
Python3.x中自定义比较函数
2015/04/24 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
python实现决策树
2017/12/21 Python
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
护士毕业生自我鉴定
2014/02/08 职场文书
派出所所长先进事迹
2014/05/19 职场文书
高中开学感言
2015/08/01 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书
python 提取html文本的方法
2021/05/20 Python
MongoDB支持的数据类型
2022/04/11 MongoDB