闰土说JS进阶之「戏说数组」

前言

最近一段时间，我女票跟我诉苦说他们公司很多同事（包括老板），一到中午都痴迷于玩王者荣耀，不玩的会受到排挤，参与不进话题。“什么？你居然不知道梦奇，这可是王者荣耀里新出的英雄哎？”没错，王者荣耀就是这么火，今天我会在王者荣耀里自定义一个英雄，名叫Array（数组）。你想知道该英雄的玩法攻略吗？接下来正文开始。

英雄介绍

首先，玩游戏得先创建英雄Array。创建数组有两种基本方式，第一种是使用Array构造函数，如下所示：

第二种是使用数组字面量表示法，如下所示：

英雄创建完成之后，首先来介绍一下它的一个自带的技能属性，length。Tips：利用length属性可以方便的在数组末尾添加新项。举个例子：

由于数组最后一项的索引始终是length-1，因此下一个新项的位置就是length。

技能攻略1：栈方法

在ECMAScript制定的游戏规则中，提供了一种让Array的行为类似于栈的方法。栈是一种后进先出的数据结构，也就是最新添加的项最早被移除。ES专门为数组贴心的提供了push()和pop()两种技能方法。

push()技能可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。而pop()技能则从数组末尾移除最后一项，减少length的值，返回值是移除的项。请看下面的例子：

技能攻略2：队列方法

刚看完栈方法，接下来我们介绍下Array的队列方法。栈数据结构的访问规则是后进先出，而队列数据结构的访问规则是先进先出。强大的ECMAScript为英雄Array又提供了两种技能，分别是unshift()和shift()。

结合shift()和push()方法，可以像使用队列一样使用数组。举个例子：

以上代码中，首先使用push()方法创建了一个包含3种颜色名称的数组。然后使用shift()方法从数组种取得了第一项，即“red”。在移除第一项后，数组的length就变成了2。

ECMAScript还为Array提供了一个unshift()方法，它能在数组前端添加任意个项并返回新数组的长度。先来看看下面的例子：

这个例子中创建了一个数组并使用unshift()方法先后推入了3个值，数组中的顺序为：black、red、green。在调用pop()方法时，移除并返回的是最后一项，即“green”。

技能攻略3：重排序方法

Array英雄身上自带两个重排序的技能包，一个是基础版的reverse()方法，请看下面的例子：

这个方法直观明了，但不够灵活，万一碰上更强大的对手，就显得束手无策了。于是，才有了升级版的sort()方法。该方法可以接收一个比较函数作为参数，下面来看例子：

在sort()方法里接收compare函数，该比较函数接收两个参数，如果val1小于val2返回-1，如果两数相等，返回0，如果val1大于val2，那么返回1。这是升序，当然也可以通过比较函数产生降序排序的结果，只要交换返回的值就可以。

还有，对于数值类型的对象类型，还有一个更简便的比较函数，请看下图：

技能攻略4：操作方法

ECMAScript为Array提供了很多操作的方法，其中concat()方法可以基于当前数组中的所有项创建一个新数组，但并不会影响当前数组。请看下面的例子：

第二个方法是slice()方法，它能够基于当前数组中的一或多个项创建一个新数组。slice()方法可以接收一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下，slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项，但不包括结束位置的项。注意，slice()方法不会影响原始数组。请看下面的例子：

接下来我要说的这个splice()方法可以说是技能最强大的数组方法。splice()的主要用途是向数组的中部插入项。如果要使用splice()这个强大的技能包，需要遵循它的三个操作规则：

1. 删除：可以删除任意数量的项，只需指定2个参数：要删除的第一项的位置和要删除的项个数。例如，splice(0, 2)会删除数组中的前两项。
2. 插入：可以向指定位置插入任意数量的项，只需提供3个参数：起始位置，0（要删除的个数）和要插入的项。例如，splice(2, 0 ,'red','green')会从当前数组的位置2开始插入字符串“red”和“green”。
3. 替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定3个参数：起始位置，要删除的项个数和要插入的任意数量的项。插入的项不必与删除的项个数相等。

splice()方法始终都会返回一个数组，该数组中包含从原始数组中删除的项（如果没有删除任何的项，则返回一个空数组）。请看以下的代码实例：

技能攻略5：迭代方法

ECMAScript为Array定义了5个迭代方法，分别是every()、filter()、forEach()、map()、some()。传入这些方法的函数都会接收三个参数：数组项的值、该项在数组中的索引和数组对象本身。下面我们直接来看例子：

以上代码中，我简单的说下，every()方法类似于运算符与&，只有所有项满足条件才会返回true，否则返回false。some()方法类似于运算符或||，只要有一项满足条件就会返回true。filter()方法筛选数组中符合条件的项，然后以数组的形式返回。forEach()方法本质上和for循环迭代数组一样，没有返回值。

技能攻略6：归并方法

英雄Array的最后两个杀手锏方法是reduce()和reduceRight()。这两个方法都会迭代数组中的所有项，然后构建一个最终返回的值。其中，reduce()方法从数组的第一项开始，逐个遍历到最后。而reduceRight()正好相反，它从数组的最后一项开始，向前遍历到第一项。

传给reduce()和reduceRight()的函数接收4个参数：前一个值、当前值、项的索引和数组对象。使用reduce()方法可以对数组中的所有值进行求和，比如：

简单说下，使用reduce()还是reduceRight()，主要取决于要从哪头开始遍历数组。除此之外，它们完全相同。

以上，是英雄Array的所有技能属性。

敌军还有5秒到达战场......（终）