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 remove 自定义数组删除方法
Oct 20 Javascript
Javascript中获取出错代码所在文件及行数的代码
Sep 23 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
网页右侧悬浮滚动在线qq客服代码示例
Apr 28 Javascript
使用AngularJS实现表单向导的方法
Jun 19 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 Javascript
JS中关于正则的巧妙操作
Aug 31 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 Javascript
vuejs实现下拉框菜单选择
Oct 23 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
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
php打造属于自己的MVC框架
2012/03/07 PHP
php+mysql数据库查询实例
2015/01/21 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
js操作select控件的几种方法
2010/06/02 Javascript
围观tangram js库
2010/12/28 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
react项目从新建到部署的实现示例
2021/02/19 Javascript
Python中的多行注释文档编写风格汇总
2016/06/16 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
Django数据库迁移常见使用方法
2020/11/12 Python
详解CSS3中Media Queries的相关使用
2015/07/17 HTML / CSS
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
直接有效的自我评价
2014/01/11 职场文书
社区党员先进事迹
2014/01/22 职场文书
甜点店创业计划书
2014/01/27 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
幽灵公主观后感
2015/06/09 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
SQL Server实现分页方法介绍
2022/03/16 SQL Server
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL
threejs太阳光与阴影效果实例代码
2022/04/05 Javascript