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 相关文章推荐
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 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
source.php查看源文件
2006/12/09 PHP
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
JS trim去空格的最佳实践
2011/10/30 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
JQuery的attr 与 val区别
2016/06/12 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
详解Django通用视图中的函数包装
2015/07/21 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
想学python 这5本书籍你必看!
2018/12/11 Python
python游戏地图最短路径求解
2019/01/16 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
战友聚会邀请函
2014/01/18 职场文书
文体活动总结
2015/02/04 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
爱心捐助活动总结
2015/05/09 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
《西门豹》教学反思
2016/02/23 职场文书
Redis读写分离搭建的完整步骤
2021/09/14 Redis
无线电知识基础入门篇
2022/02/18 无线电