检查数组的方法

  很多时候我们需要对JavaScript中数据类型(FunctionStringNumberUndefinedBooleanObject)做判断。在JavaScript中提供了typeof操作符可以对这些常用的数据类型做判断。但要使用typeof来判断数据是不是一个数组,就不起作用了。那在实际生产中要如何来检测数据是不是一个数组呢?

1. typeof 操作符

  

  上面的 typeof ["shiyao","23"]; 不能检测出一个数组。那么这里引出一个问题?如何判断数据是个数组类型?

2 检测数组的方法

  A):ECMAScript 5的isArray函数

  

  这看起来最完美的解决方案,因为他是原生的.:IE9+、 Firefox 4+、Safari 5+、Opera 10.5+和Chrome都实现了这个方法,但是在IE8之前的版本是不支持的。在这个基础上对构造函数做一下检测,而且这个检测过程非常的快,而且也非常的准确。事实上对我们的使用太准确了。但在工作是不能确定一个变量是继承自一个数组。这样一来,在某种程度上对构造函数做检测对于我们自己来说是很需要的,也是非常有益的:

   

  对象自身的constructor属性

  上面的示例中,检测构造函数时使用了对像自身的constructor属性。其实constructor属性返回一个指向创建了该对象原型的函数引用。使用该属性也可以检测数组类型。

  

  instanceof操作符

  除了使用对像自身的constructor属性检测一个数组之外,还可以使用instanceof操作符来检测一个数组。

   instanceof 操作符可以用来判断某个构造函数的 prototype 属性是否存在另外一个要检测对象的原型链上。也就是判断instanceof前面的对象是否是后面的类或对象的实例。

  来回忆下 instanceof 运算符的使用方式。a instanceof b 如果返回 true 表示 a 是 b 的一个实例 那么如果 a instanceof Array 返回 true 是不是就说明 a 是 数组类型呢

  

  跨frame实例化对象带来的问题

  constructorinstanceof貌似很好的两个检测数组的方法,但实际上还是有些漏洞的,当你在多个frame中回来跳的时候,这两种方法就惨了。由于每一个frame都有自己的一套执行环境,跨frame实例化的对象彼此并不共享原型链,通过instanceof操作符和constructor属性检测的方法自然会失败

  

  对象原生toString检测

  Object.prototype.toString的行为:首先,取得对象的一个内部属性[[Class]],然后依据这个属性,返回一个类似于"[object Array]"的字符串作为结果(看过ECMA标准的应该都知道,[[]]用来表示语言内部用到的、外部不可直接访问的属性,称为“内部属性”)。利用这 个方法,再配合call,我们可以取得任何对象的内部属性[[Class]],然后把类型检测转化为字符串比较,以达到我们的目的

  

  call改变toStringthis引用为待检测的对象,返回此对象的字符串表示,然后对比此字符串是否是[object Array],以判断其是否是Array的实例。为什么不直接o.toString()?嗯,虽然Array继承自Object,也会有toString方法,但是这个方法有可能会被改写而达不到我们的要求,而Object.prototype则是老虎的屁股,很少有人敢去碰它的,所以能一定程度保证其“纯洁性”

  还有其他的检测方法

  道格拉斯提供的:

  

  最佳检测方法

  

总结

  

这篇文章主要总结了如何检测一个数组。

  • typeof运算符不能检测数组
  • ECMAScript 5的isArray函数是原生的检测方法,但低版本浏览器不支持
  • 对象自身的constructor属性和instanceof操作符虽然也能检测数组,但在frame中会产生问题
  • 对象原生toString检测也能检测数组

最后在文中引用了其他同行写的检测数组的函数源码以及总结了一个觉得最合适的检测数组的函数。首先它试图使用内置的isArray来检测,这也是原生的,在浏览器中运行绝对是非常的快。对于不支持isArray的浏览器,我们也采用了对象的toString功能来检测一个数组。

JavaScript学习笔记:检测数组方法的更多相关文章

  1. JavaScript学习笔记之 数组方法一 堆栈 和队列

    数组的方法 以及 堆栈的操作的方法 JavaScript是一种弱类型语言,不像其它程序语言需要严格定义数据类型.在JavaScript中数组可以任意修改变动,这样也就出现了一个问题,如果边遍历数组边操 ...

  2. JavaScript学习笔记之数组(二)

    JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...

  3. JavaScript学习笔记:数组reduce()和reduceRight()方法

    很多时候需要累加数组项的得到一个值(比如说求和).如果你碰到一个类似的问题,你想到的方法是什么呢?会不会和我一样,想到的就是使用for或while循环,对数组进行迭代,依次将他们的值加起来.比如: v ...

  4. JavaScript学习笔记——4.数组

    数组(Array) 数组也是一个对象   数组中保存的内容我们称为元素 数组的操作 - 创建数组 - var arr = new Array();   - var arr = []; 例如:var m ...

  5. JavaScript学习笔记:数组的indexOf()和lastindexOf()方法

    https://www.w3cplus.com/javascript/array-part-6.html

  6. JavaScript学习笔记之数组(一)

    数组基础篇 一.数组概述 1. 数组的语法 数组(array)是按次序排列的一组值.每个值的位置都有编号(从0开始). var arr=[1,2,3] //arr[0]=1 任何类型的数据,都可以放入 ...

  7. Java程序猿的JavaScript学习笔记(9—— jQuery工具方法)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  8. Java程序猿的JavaScript学习笔记(5——prototype和Object内置方法)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  9. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

  10. Java程序猿的JavaScript学习笔记(8——jQuery选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

随机推荐

  1. 零基础学习云计算及大数据DBA集群架构师【Linux系统配置及网络配置2015年12月30日周三】

    /Mon *************摘要************** 计划任务 )一次性计划任务 服务:atd 命令:at 服务存放文件:/etc/init.d/atd 系统配置文件:/etc/at. ...

  2. jQuery简介以及jQuery选择器

    一 简介 1 定义:jQuery库是JavaScript的封装库 2 优点: 1) : 代码开源 2) : 选择器强大 3) : 完善的Ajax 4) : 浏览器兼容性高 5) : 文档完善(帮助文档 ...

  3. 初学Java ssh之Spring 第三篇

    在这篇中,我学习了依赖注入的两种方式:设值注入和构造注入. 在我们以前的思维中,如果调用一个类时,我们都需要将其手动实例化,当我们创建被调用的工作不需要我们完成时,这就是控制反转,当这个将被调用的实例 ...

  4. Swift--基础(一)基本类型 符号 字符串(不熟的地方)

    常量 变量 let age = 20 常量不可变 var num = 24 变量可变 let count:Int = 2 定义类型 Double(count)  类型转换 符号 1.?? let de ...

  5. 使用angularjs中ng-repeat的$even与$odd属性时的注意事项

    JavaScript中数组的索引是从0开始的,因此我们再取奇偶的时候需要用!$even和!$odd来将$even和$odd的布尔值反转 下面给出一个实例: 使用$odd和$even来制作一个红蓝相间的 ...

  6. powerdesigner设置mysql唯一键,非主键

    员工表如下,先将id设置主键: 现在将"员工id"设置唯一约束: 1,切换到"Keys",发现已经存在一个Key1,这个是刚刚新增主键id.在Key1下发空行出 ...

  7. JS将毫秒转换成时间格式

    JavaScript Date(日期)对象 实例 getTime():返回从 1970 年 1 月 1 日至今的毫秒数. setFullYear(): 设置具体的日期. toUTCString():将 ...

  8. Google的Guava工具类splitter和apache stringutil对比 编辑

    一直用的是apache的stringutil工具类,其实google的工具类项目 guava中居然也有字符串的分隔类splitter的,在 http://code.google.com/p/guava ...

  9. ASP.NET环境下集成CKEditor与CKEditor实现文件上传

    1.从http://ckeditor.com网站上下载ckeditor_aspnet_3.6.4与ckfinder_aspnet_2.4; 2.解压下载的文件ckeditor_aspnet_3.6.4 ...

  10. strcpy and memcpy

    1. Inconsist length. char a3[2]; char *a = "Itis   " strcpy(a3, a); It is wrong. a3 will b ...