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页面顶部卷动广告效果
Dec 01 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
JS如何设置元素样式的方法示例
Aug 28 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
JavaScript实现新年倒计时效果
Nov 17 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 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的Yii框架入门使用教程
2016/02/15 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
php xhprof使用实例详解
2019/04/15 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
javascript+xml技术实现分页浏览
2008/07/27 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
解决vue组件props传值对象获取不到的问题
2019/06/06 Javascript
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
Pycharm2020.1安装无法启动问题即设置中文插件的方法
2020/08/07 Python
python使用建议与技巧分享(二)
2020/08/17 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
大学生素质拓展活动方案
2014/02/11 职场文书
超越自我演讲稿
2014/05/21 职场文书
2014年护士工作总结范文
2014/11/11 职场文书
小班教师个人总结
2015/02/05 职场文书
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle