JavaScript数组迭代器专题

本文为JavaScript数组（Array）迭代器（Iteration）专题。

• Array.forEach()方法
  
• Array.map()方法
  
• Array.filter()方法
  
• Array.reduce() 和 Array.reduceRight() 方法
  
• Array.every()方法
  
• Array.some()方法
  
• Array.indexOf()方法
• Array.lastIndexOf()方法
  
• Array.find()方法
  
• Array.findIndex()方法
  

Array.forEach()方法

forEach()方法可以将数组的元素依次传入到指定的一个回调函数中去，在每次函数中，针对每次传入的数组元素进行更多操作。

function myFunction( value, index, array ) {
    txt += "<li>" + value + " " + index + "</li>";
}

var array_wife = [ "西施", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ];
var txt = "<ul>";
array_wife.forEach( myFunction );
txt += "</ul>";

运行一下

根据上述代码，可见传入迭代函数的myFunction有3个参数：

• value - 每次传入的数组中的元素
• index - 传入函数的元素在数组中的索引位置（非必须参数）
• array - 数组本身（非必须参数）

如果把index参数和array参数缺省，只用value参数，如下：

function myFunction( value ) {
    txt += "<li>" + value + "</li>";
}

var array_wife = [ "西施", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ];
var txt = "<ul>";
array_wife.forEach( myFunction );
txt += "</ul>";

运行一下

Array.map()方法

map()方法与forEach()方法类似，但不同的是使用map方法迭代处理完指定数组后，会返回一个处理完的结果数组。forEach方法，更像把一串佛珠扔出去，扔出去搞事即可；map方法，更像是佛珠扔出去搞事，搞完事还得回来，重新恢复成一串佛珠，但是这串佛珠很可能跟之前的佛珠不一样了；正好比有句哲言——“人不可能踏入同一条河两次。”

function myFunction( value, index, array ) {
    return value + "-" + index;
}

var array_wife = [ "西施", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ];
var new_array = array_wife.map( myFunction );

运行一下

根据上述代码，可见传入迭代函数的myFunction有3个参数：

• value - 每次传入的数组中的元素
  
• index - 传入函数的元素在数组中的索引位置（非必须参数）
  
• array - 数组本身（非必须参数）
  

myFunction函数返回的值，就是新的结果字符串该索引位置上新的值。

因为index和array参数可以省略，因此只传入value参数也是可以的，如下案例所示：

function myFunction( value ) {
    return value + "-666" ;
}

var array_wife = [ "西施", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ];
var new_array = array_wife.map( myFunction );

运行一下

Array.filter()方法

filter()方法将数组传入迭代函数，并将此迭代函数当做一个过滤器，符合过滤条件的数组元素才会被留下而组成新的数组，最后将新的数组作为结果返回。

// 只要数组元素不等于玉环，以及索引位置不是0的数组元素都返回到新数组中去
function myFunction( value, index, array  ) {
    return (value != "玉环") && (index != 0) ;
}

var array_wife = [ "西施", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ];
var new_array = array_wife.filter( myFunction );

运行一下

根据上述代码，可见传入过滤函数的myFunction有3个参数：

• value - 每次传入的数组中的元素
  
• index - 传入函数的元素在数组中的索引位置（非必须参数）
  
• array - 数组本身（非必须参数）
  

过滤函数返回的是过滤条件表达式，true则返回该元素到新数组，false即抛弃该元素。

index和array参数可以缺省，最后将新的数组作为结果返回：

// 把玉环给过滤掉
function myFunction( value ) {
    return value != "玉环" ;
}

var array_wife = [ "西施", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ];
var new_array = array_wife.filter( myFunction );

运行一下

Array.reduce() 方法

reduce方法中的迭代函数过程中，prev参数是上一次迭代过程中函数返回的值。（第一次迭代默认返回value值，不进行其他操作；因此真正的reduce操作是从第二次迭代开始。）

迭代结束后，reduce()方法返回的是最后一次迭代函数返回的值。

// prev是指上次迭代函数返回的结果
function myFunction( prev, value, index, array  ) {
    return prev + " " + value + "-" + index;
}

var array_wife = [ "西施", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ];
var res = array_wife.reduce( myFunction ); // 只会返回最后一次函数结果

运行一下

根据上述代码，可见传入过滤函数的myFunction有4个参数：

• prev - 上次迭代函数返回的结果
  
• value - 每次传入的数组中的元素
  
• index - 传入函数的元素在数组中的索引位置（非必须参数）
  
• array - 数组本身（非必须参数）
  

缺省index和array则如下所示：

// prev是指上次迭代函数返回的结果
function myFunction( prev, value ) {
    return prev + "-->" + value;
}

var array_wife = [ "西施", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ];
var res = array_wife.reduce( myFunction ); // 只会返回最后一次函数结果

运行一下

默认情况下，Array.reduce()方法是从左到右进行数组元素迭代；若想从右向左进行迭代，则可以使用Array.reduceRight()方法，使用方法以此类推，不展开详解了。看此示例即可。

Array.every()方法

every()方法跟filter方法有点像，迭代函数都会返回一个判断表达式，但是不一样的是，every()方法最终返回的是true或false。若针对每一个数组元素进行判断，如果条件都成立，则返回true；否则则返回false。index参数和array参数都是非必须参数，也可以缺省。代码如下：

// 检查是否所有数组元素的长度都是2
// index参数 和 array参数 是非必须参数
function myFunction( value, index, array ) {
    return value.length == 2;
}

var array_wife = [ "西施", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ];
var res = array_wife.every( myFunction ); 

运行一下

Array.some()方法

some()方法与every()方法类似，而some方法的要求比较低，只要存在某个数组元素可以使判断表达式成立过，最终some()方法就可以直接返回true；反之，若是没有任何一个数组元素值使判断表达式成立，那最终就返回false。

// 检查是否存在某个数组元素值等于貂蝉
function myFunction( value, index, array ) {
    return value == "貂蝉";
}

var array_wife = [ "西施", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ];
var res = array_wife.some( myFunction ); 

运行一下

Array.indexOf()方法

indexOf()方法也可用于搜索数组对象中是否存在指定对象，若能找到，则返回指定对象从左向右第一次出现位置的数组索引位置。若是找不到指定对象，则返回-1。

先看一个例子吧：

var array_wife = [ "西施", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ];
var res = array_wife.indexOf( "貂蝉" );     // 会返回1

运行一下

Array.indexOf() 语法：

Array.indexOf( item, start );

item是必须参数，指代拟查询对象；
start是非必须参数，指代从数组的哪个索引位置开始查询（包含该位置）；该参数缺省下，则从头开始查询，等价于start为0。

举一个设置start参数的例子：

var array_wife = [ "西施", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ];
var res = array_wife.indexOf( "貂蝉", 2 );     // 会返回-1

运行一下

Array.lastIndexOf()方法

与indexOf()方法类似，但不同的是lastIndexOf()方法是返回指定对象从右向左第一次出现位置的索引位置。若是找不到指定对象，则返回-1。

var array_wife = [ "西施", "貂蝉", "昭君", "貂蝉", "虞姬", "貂蝉", "小乔" ];
var res = array_wife.lastIndexOf( "貂蝉" );     // 会返回5

运行一下

类似，indexOf()方法，lastIndexOf()方法也可以传入第二个参数，指代从数组的哪个索引位置开始进行查询，这里就不展开说啦~

Array.find()方法

find()方法传入回调函数，从左到右，依次测试数组中的元素值是否符合函数中返回的表达式，一旦符合判断表达式，则算找到，结束迭代并返回此元素值；若最终依然找不到符合判断表达式的值，则返回undefined。

function myFunction(value, index, array) {
  return value == "貂蝉";
}

var array_wife = [ "西施", "貂蝉", "昭君", "貂蝉", "虞姬", "貂蝉", "小乔" ];
var res = array_wife.find( myFunction );    // 会返回"貂蝉"

运行一下

Array.findIndex()方法

findIndex()方法类似find()方法，不一样的是，findIndex()方法返回的不是元素值，而是返回找到的符合条件的值的索引位置；若找不到则返回-1。

function myFunction(value, index, array) {
  return value == "貂蝉";
}

var array_wife = [ "西施", "貂蝉", "昭君", "貂蝉", "虞姬", "貂蝉", "小乔" ];
var res = array_wife.findIndex( myFunction );     // 会返回1

运行一下