JavaScript学习笔记:检测数组方法
检查数组的方法
很多时候我们需要对JavaScript中数据类型(Function
、String
、Number
、Undefined
、Boolean
和Object
)做判断。在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
实例化对象带来的问题
constructor
和instanceof
貌似很好的两个检测数组的方法,但实际上还是有些漏洞的,当你在多个frame
中回来跳的时候,这两种方法就惨了。由于每一个frame
都有自己的一套执行环境,跨frame
实例化的对象彼此并不共享原型链,通过instanceof
操作符和constructor
属性检测的方法自然会失败
对象原生toString
检测
Object.prototype.toString
的行为:首先,取得对象的一个内部属性[[Class]]
,然后依据这个属性,返回一个类似于"[object Array]
"的字符串作为结果(看过ECMA标准的应该都知道,[[]]
用来表示语言内部用到的、外部不可直接访问的属性,称为“内部属性”)。利用这 个方法,再配合call
,我们可以取得任何对象的内部属性[[Class]]
,然后把类型检测转化为字符串比较,以达到我们的目的
call
改变toString
的this
引用为待检测的对象,返回此对象的字符串表示,然后对比此字符串是否是[object Array]
,以判断其是否是Array
的实例。为什么不直接o.toString()
?嗯,虽然Array
继承自Object
,也会有toString
方法,但是这个方法有可能会被改写而达不到我们的要求,而Object.prototype
则是老虎的屁股,很少有人敢去碰它的,所以能一定程度保证其“纯洁性”
还有其他的检测方法
道格拉斯提供的:
最佳检测方法
总结
这篇文章主要总结了如何检测一个数组。
typeof
运算符不能检测数组- ECMAScript 5的
isArray
函数是原生的检测方法,但低版本浏览器不支持 - 对象自身的
constructor
属性和instanceof
操作符虽然也能检测数组,但在frame
中会产生问题 - 对象原生
toString
检测也能检测数组
最后在文中引用了其他同行写的检测数组的函数源码以及总结了一个觉得最合适的检测数组的函数。首先它试图使用内置的isArray
来检测,这也是原生的,在浏览器中运行绝对是非常的快。对于不支持isArray
的浏览器,我们也采用了对象的toString
功能来检测一个数组。
JavaScript学习笔记:检测数组方法的更多相关文章
- JavaScript学习笔记之 数组方法一 堆栈 和队列
数组的方法 以及 堆栈的操作的方法 JavaScript是一种弱类型语言,不像其它程序语言需要严格定义数据类型.在JavaScript中数组可以任意修改变动,这样也就出现了一个问题,如果边遍历数组边操 ...
- JavaScript学习笔记之数组(二)
JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...
- JavaScript学习笔记:数组reduce()和reduceRight()方法
很多时候需要累加数组项的得到一个值(比如说求和).如果你碰到一个类似的问题,你想到的方法是什么呢?会不会和我一样,想到的就是使用for或while循环,对数组进行迭代,依次将他们的值加起来.比如: v ...
- JavaScript学习笔记——4.数组
数组(Array) 数组也是一个对象 数组中保存的内容我们称为元素 数组的操作 - 创建数组 - var arr = new Array(); - var arr = []; 例如:var m ...
- JavaScript学习笔记:数组的indexOf()和lastindexOf()方法
https://www.w3cplus.com/javascript/array-part-6.html
- JavaScript学习笔记之数组(一)
数组基础篇 一.数组概述 1. 数组的语法 数组(array)是按次序排列的一组值.每个值的位置都有编号(从0开始). var arr=[1,2,3] //arr[0]=1 任何类型的数据,都可以放入 ...
- Java程序猿的JavaScript学习笔记(9—— jQuery工具方法)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿的JavaScript学习笔记(5——prototype和Object内置方法)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- javascript学习笔记(四) Number 数字类型
数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数 toExponential() 方法 用科学 ...
- Java程序猿的JavaScript学习笔记(8——jQuery选择器)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
随机推荐
- .NET基础拾遗(7)多线程开发基础1
一.多线程编程的基本概念 1.1 操作系统层面的进程和线程 (1)进程 进程代表了操作系统上运行着的一个应用程序.进程拥有自己的程序块,拥有独占的资源和数据且可以被操作系统调度. But,即使是同一个 ...
- Android -------- 用XmlPullParser解析器解析XML文件
- Error:Could not determine Java version-- 关于Android Studio JDK设置和JVM version设置
最近在装AS的时候遇到一个问题,新建工程后,编译报错,Error:Could not determine Java version 不言而喻:可定是JDK的问题,网上查到2中可能性 第一:就是JDK路 ...
- Cookie 添加,读取,删除
Name,value – 声明时 new Cookie(key,value); Path - 默认值,即为当前保存cookie的这个serlvet所在的路径. 如果Cookie在这样的路 ...
- VS2013配合EgretVS开发简单塔防游戏
VS2013配合EgretVS开发简单塔防游戏(1) - 环境配置 VS2013配合EgretVS开发简单塔防游戏(2) – 原型设计 VS2013配合EgretVS开发简单塔防游戏(3) – 精灵动 ...
- JS全部API笔记
我相信对于程序猿都有做笔记的习惯. 我初学到现在也做了不少笔记,以前,总是怕写的文章或者好的内容分享出来就怕被直接copy以后更个名就不再是你的. 但通过博客园,学习到不少东西,人家都不怕什么了,我自 ...
- 用angularjs遇到的坑们
最近在用angularjs做一些东西,由于学艺不精,对angularjs了解不够,导致经常会不小心掉进一些自己挖的坑里(⊙_⊙),在这里记下来,谨防又踩. 1.angularjs ng-show no ...
- Python新手学习基础之运算符——位运算
位运算符 位运算实际上是把数字看作二进制来进行计算,它的运算法则如下: 结合实例,来看下位运算是如何进行的吧: 位运算在实际应用中用途很广泛,比如我们经常听到的子网掩码,它其实就是和IP地址做了按位与 ...
- setf
independent flags boolalpha read/write bool elements as alphabetic strings (true and false). showbas ...
- bzoj 2075: [POI2004]KAG
整天鬼畜题搞搞,感觉药丸…… 这种题出到xjoi模拟题里,太神了…… 这题的核心在于分割Cograph,尝试把Cograph的合成过程给求出来. 我们将这张图中的边为黑边,在这张图的补图中出现的边为白 ...