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的表单操作 简单计算器
Dec 29 Javascript
jquery 插件学习(四)
Aug 06 Javascript
JS画线(实例代码)
Nov 20 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
jquery获取复选框被选中的值
Apr 10 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
js获取ip和地区
Mar 10 Javascript
JS创建Tag标签的方法详解
Jun 09 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 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效率,提高php性能的一些方法
2011/03/24 PHP
php实现httpclient类示例
2014/04/08 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
JavaScript EasyPager 分页函数
2011/05/25 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
2016/06/08 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
基于Python实现一个简单的银行转账操作
2016/03/06 Python
python 回调函数和回调方法的实现分析
2016/03/23 Python
python基础教程项目三之万能的XML
2018/04/02 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
django 外键model的互相读取方法
2018/12/15 Python
python的sorted用法详解
2019/06/25 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
国外平面设计第一市场:99designs
2016/10/25 全球购物
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
Linux面试题LINUX系统类
2015/11/25 面试题
应届生幼儿园求职信
2013/11/12 职场文书
违反工作纪律检讨书
2014/02/15 职场文书
给市场的环保建议书
2014/05/14 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python