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 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
JavaScript实现简单图片轮播效果
Aug 21 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
Oct 27 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
vue-element-admin项目导入和导出的实现
May 21 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 addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
php计算一个文件大小的方法
2015/03/30 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
javascript document.execCommand() 常用解析
2009/12/14 Javascript
一段批量给页面上的控件赋值js
2010/06/19 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
在vue 中使用 less的教程详解
2018/09/26 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
在Python的Django框架中创建语言文件
2015/07/27 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
Python检查ping终端的方法
2019/01/26 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
教师评优的个人自我评价分享
2013/09/19 职场文书
行政办公室岗位职责
2014/03/18 职场文书
小学生优秀评语大全
2014/04/22 职场文书
2014年征兵标语
2014/06/20 职场文书
2015年消防工作总结
2015/04/24 职场文书
担保贷款承诺书
2015/04/30 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers