一、前言

ES5中新增的一些处理数组(Array)的方法, 对于用JavaScript处理数据非常有用。我总结了一下,给这些方法分了类,大体如下:

2个索引方法:indexOf() 和 lastIndexOf();

5个迭代方法:forEach()、map()、filter()、some()、every();

2个归并方法:reduce()、reduceRight();

下面我们来具体看一看这些方法怎么用吧!

二、索引方法

索引方法包含indexOf()和lastIndexOf()两个方法,这两个方法都接收两个参数,第一个参数是要查找的项,第二个参数是查找起点位置的索引,该参数可选,如果缺省或是格式不正确,那么默认为0。两个方法都返回查找项在数组中的位置,如果没有找到,那么返回-1。区别就是一个从前往后找,一个从后往前找。

让我们来看一个具体列子吧,首先定义一个数组:

var dataArray = [1, 7, 5, 7, 1, 3];

indexOf():该方法从数组的开头开始向后查找。

console.log(dataArray.indexOf(7));              // 1     缺省, 从第一项开始查找
console.log(dataArray.indexOf(7, 's')); // 1 格式不正确, 从第一项开始查找
console.log(dataArray.indexOf(7, 2)); // 3   从第三个项之后开始查找
console.log(dataArray.indexOf (2)); // -1 未找到, 返回-1

lastIndexOf(): 该方法从数组的末尾开始向前查找。

console.log(dataArray.lastIndexOf (7));       // 3     缺省, 从末尾第一项开始查找
console.log(dataArray.lastIndexOf (7, 's')); // 3 格式不正确, 从末尾第一项开始查找
console.log(dataArray.lastIndexOf (7, 2)); // 1   从末尾第三项往前查找
console.log(dataArray.lastIndexOf ('4')); // -1 未找到, 返回-1

值得注意的是,在比较第一个参数与数组中的每一项时,会使用全等操作符, 要求必须完全相等,否则返回-1。

console.log(dataArray .lastIndexOf ('7'));   // -1,因为这里是字符串,并不是数值类型
 
 

三、迭代方法

迭代方法包含some()、every()、filter()、map()和forEach()五个方法,这些方法都接收两个参数,第一个参数是一个函数,他接收三个参数,数组当前项的值、当前项在数组中的索引、数组对象本身。第二个参数是执行第一个函数参数的作用域对象,也就是上面说的函数中this所指向的值。注意,这几种方法都不会改变原数组。

every()和some()方法有些类似,我们放在一起比较。

every():该方法对数组中的每一项运行给定函数,如果该函数对每一项都返回 true,则返回true。

some(): 该方法对数组中的每一项运行给定函数,如果该函数对任何一项返回 true,则返回true。

感觉有点绕,我们来对着例子讲一讲。

首先我们来看一下every方法,数组中的每一项都会执行给定的函数,如果数组中每一项执行该函数都返回true,那么我们结果返回true,否则返回false。

下面例子中,当我们设置item > 1时,第一项和第五项不符合,所以最终结果返回false。

下面例子中,当我们设置item > 0时,所有项都符合,那么我们最终结果为true。

接下来我们来看some方法,数组中的每一项都会执行给定的函数,只要有一项为true,那么结果结果为true。

下面这个例子,当我们设置item > 5时,第二项就符合,我们直接返回true。

而且值得注意的是,some方法会在数组中任一项执行函数返回true之后,不在进行循环。

下面例子中,我们设置item > 5,当数组中第二项7大于5时,停止循环,直接返回结果。

filter() :该方法对数组中的每一项运行给定函数,返回该函数会返回 true 的项组成的数组。利用这个方法可对数组元素进行过滤筛选。

我们来看下面的例子,当我们设置item > 3时,数组中2、3、4像返回组成了一个新数组。

而且我们可以看出,当我们分别设置item > 3和item > '3'时, 返回的结果是一样的,由此我们可以看出函数支持弱等于(==),不是必须全等于(===)。

filter() 方法类似,jquery中有个grep()方法也用于数组元素过滤筛选。

下面例子中,当我们设置item > 3时,返回的数组和我们用filter方法是一样的。

grep(array, function[, invert])方法,还有一个特性,当invert缺省或是为false,和filter方法一样,正常过滤出符合条件的数组元素,当invert值为true, 正好相反,他会过滤出函数返回值为false的数组元素。

我们来看下面的例子,当设置了invert参数为true之后,函数返回如下过滤后的数组。

map(): 该方法对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。

我们来看下面的例子,我们为数组中的每一项乘以3,返回每一项相乘之后的数组。

我们接下来定义一个航班数组,每次返回该数组元素的航空公司,组成新数组。

forEach(): 该方法对数组中的每一项运行给定函数。这个方法没有返回值。这个方法其实就是遍历循环,和for循环没有太大差别。jquery()也提供了相应的方法each()方法。

下面的例子我们依次进行for循环、forEach方法、each方法的调用,最终执行结果相同。

四、归并方法

归并方法包含reduce()和reduceRight()两个方法,这两个方法都会迭代数组中的所有项,然后生成一个最终返回值。他们都接收两个参数,第一个参数是每一项调用的函数,函数接受是个参数分别是初始值,当前值,索引值,和当前数组,函数需要返回一个值,这个值会在下一次迭代中作为初始值。第二个参数是迭代初始值,参数可选,如果缺省,初始值为数组第一项,从数组第一个项开始叠加,缺省参数要比正常传值少一次运算。

reduce():该方法从数组的第一项开始,逐个遍历到最后一项。

这个方法比较复杂,我们来看一个例子

代码如下:

具体看这个代码,首先我们在传入reduce的函数中打印了prev值,可以看到prev就是数组每两项的和。比如第一个是1,第二个就是1+7 = 8,以此类推。

最后,我们把结果返回给了sum,那sum自然就是数组的每一项之和。这是没设置第二个参数的情况。

下面我们来看看设置了第二个参数为2的例子。

我们可以看出,当设置了第二个参数。我们第一个prev输出的结果就是第二个参数的值。设置了这个参数,会多执行一次。

利用这种方法,我们可以快速的把二维数组转化为一维数组。

顾名思义,reduceRight()就是从右到左,就不详细说了。

五、兼容性问题

ES5里这些处理数组的新方法,在IE6-IE8浏览器还未得到支持,所以我们需要在IE这些低版本浏览器中引入这个es5-shim补丁,这样我们就可以使用它了。

补丁地址:https://github.com/es-shims/es5-shim

本博客文章皆为原创,未尽许可,请勿转载 (http://www.cnblogs.com/song-song/p/5329374.html

聊一聊ES5数组(Array)新增的那些方法的更多相关文章

  1. js set集合转数组 Array.from的使用方法

    1.set集合转化Array数组  注意:这个可以使用过滤数组中的重复的元素 你可以先把数组转化为set集合 然后在把这个集合通过Array.from这个方法把集合在转化为数组 var set = n ...

  2. 数组Array.sort()排序的方法

    数组sort排序 sort比较次数,sort用法,sort常用 描述 方法sort()将在原数组上对数组元素进行排序,即排序时不创建新的数组副本.如果调用方法sort()时没有使用参数,将按字母顺序( ...

  3. 数组Array的十种使用方法

    第一种方法 array toString () 将数组的元素全部转换为字符串; 第二种方法 array join ("这里是分隔符") 这种方法可以把数组的元素转换为字符串,并把分 ...

  4. js中的数组Array定义与sort方法使用示例

    Array的定义及sort方法使用示例 Array数组相当于java中的ArrayList  定义方法:  1:使用new Array(5  )创建数组 var ary = new Array(5): ...

  5. javascript数组Array强大的splice()方法

    javascript的Array数组提供了强大的splice()方法, 用于对数组元素的增删改 1.删除-用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数) 删除: ...

  6. JavaScript (JS)基础:DOM 浅析 (含数组Array、字符串String基本方法解析)

    ①文本对象document: 例如:document.getElementById()    只获取一个对象          document.getElementsByTagName()   获取 ...

  7. Javascript数组Array的forEach方法

    Javascript数组Array的forEach扩展方法 forEach是最常用到的数组扩展方法之一,相当于参数化循环数组,它简单的在数组的每一个元素上应用传入的函数,这也意味着只有存在的元素会被访 ...

  8. es6 --数组--Array.from() 、Array.isArray()、Array.of()、find()、findIndex()、fill()、entries() 、keys() ,values()

    将两类对象转为真正的数组 Array.from()方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Se ...

  9. 详解javascript,ES5标准中新增的几种高效Array操作方法

    1.js中常用的数组Array对象属性: 如图,其中用红色圆圈标记的部分,为ES5新增的属性. 2.浏览器支持情况: IE:9+; Chrome; Firefox2+; Safari 3+; Oper ...

随机推荐

  1. html语意化标签

    一.布局的理解误区 网络上流行管新型的布局方式叫“DIV+CSS”,其实是一个错误的理解,导致了很多人过度依赖 与滥用DIV标签, HTML提供了我们一共七八十个标签,其中常用的有三十个左右,DIV不 ...

  2. put a ContextMenu into the header of a TabPage z

    publicclassMyTabControl:TabControl { protected override void OnMouseUp(MouseEventArgs e){ if(e.Butto ...

  3. Oracle学习网址

    Oracle Error Search: http://www.ora-error.com/ Oracle Database Error Message - Oracle Documentation: ...

  4. Integrating JavaScript into Native Applications

    JavaScriptCore 简介 iOS7 中新加入的 JavaScriptCore.framework 可能被大多数开发人员所忽略,但是如果你之前就在项目中用过自己编译JavaScriptCore ...

  5. eclipse配置tomcat加大内存的方法

    双击tomcat -Dcatalina.base="E:\work\whykt\.metadata\.plugins\org.eclipse.wst.server.core\tmp0&quo ...

  6. SSDT Hook结构

    目录 SSDT Hook效果图 SSDT简介 SSDT结构 SSDT HOOK原理 Hook前准备 如何获得SSDT中函数的地址呢 SSDT Hook流程 SSDT Hook实现进程保护 Ring3与 ...

  7. NIOP1995 石子合并(区间DP)

    状态转移方程在代码中标出 本题注意是圆形,所以之前要预先处理一下s数组.处理之后总长度为2*n-1.第一个合并的起点有n个,所以总的方案数是n 注释在代码中标出 http://www.rqnoj.cn ...

  8. windows串口通信的一个活动图

    1,打开串口的活动图: 2,关闭串口的活动图:

  9. Hive基础介绍

    HIVE结构 Hive 是建立在 Hadoop 上的数据仓库基础构架.它提供了一系列的工具,可以用来进行数据提取转化加载(ETL),这是一种可以存储.查询和分析存储在 Hadoop 中的大规模数据的机 ...

  10. .net iis 域名泛解析实战

    最近做个人网站想实现多个二级域名,一来为了好记,二来为了搜索引擎优化,搜索引擎对二级域名的收录还是比较快的.刚开始做了4,5个二级域名,每个都是在域名解析后台手动添加的,不过随着二级域名越来越多,发现 ...