JavaScript迭代与归并方法大全

一、迭代方法

ECMAScript为数组定义了5个迭代方法。每个方法接收两个参数：以每一项为参数运行的函数，以及可选的作为函数运行上下文的作用域对象（影响函数中this的值）。

传给每个方法的函数接收3个参数：数组元素、元素索引和数组本身。因具体方法而异，这个函数的执行结果可能会也可能不会影响方法的返回值。

数组的5个迭代方法如下：

❑ every()：对数组每一项都运行传入的函数，如果对每一项函数都返回true，则这个方法返回true。

❑ filter()：对数组每一项都运行传入的函数，函数返回true的项会组成数组之后返回。

❑ forEach()：对数组每一项都运行传入的函数，没有返回值。

❑ map()：对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组。

❑ some()：对数组每一项都运行传入的函数，如果有一项函数返回true，则这个方法返回true。

这些方法都不改变调用它们的数组。

every()、some()方法

在这些方法中，every()和some()是最相似的，都是从数组中搜索符合某个条件的元素。对every()来说，传入的函数必须对每一项都返回true，它才会返回true；否则，它就返回false。而对some()来说，只要有一项让传入的函数返回true，它就会返回true。

下面是一个例子：

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];

let everyResult = numbers.every((item, index, array) => item > 2);
alert(everyResult);   // false

let someResult = numbers.some((item, index, array) => item > 2);
alert(someResult);    // true

filter()方法

下面再看一看filter()方法。这个方法基于给定的函数来决定某一项是否应该包含在它返回的数组中。比如，要返回一个所有数值都大于2的数组，可以使用如下代码：

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let filterResult = numbers.filter((item, index, array) => item > 2);
alert(filterResult);   // 3,4,5,4,3

接下来map()方法也会返回一个数组。这个数组的每一项都是对原始数组中同样位置的元素运行传入函数而返回的结果。例如，可以将一个数组中的每一项都乘以2，并返回包含所有结果的数组，如下所示：

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let mapResult = numbers.map((item, index, array) => item ＊ 2);
alert(mapResult);   // 2,4,6,8,10,8,6,4,2

foreach()方法

最后，再来看一看forEach()方法。这个方法只会对每一项运行传入的函数，没有返回值。本质上，forEach()方法相当于使用for循环遍历数组。比如：

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.forEach((item, index, array) => {
  // 执行某些操作
});

数组的这些迭代方法通过执行不同操作方便了对数组的处理。

二、归并方法

ECMAScript为数组提供了两个归并方法：reduce()和reduceRight()。这两个方法都会迭代数组的所有项，并在此基础上构建一个最终返回值。

reduce()方法从数组第一项开始遍历到最后一项。而reduceRight()从最后一项开始遍历至第一项。

这两个方法都接收两个参数：对每一项都会运行的归并函数，以及可选的以之为归并起点的初始值。传给reduce()和reduceRight()的函数接收4个参数：上一个归并值、当前项、当前项的索引和数组本身。

reduce()方法

这个函数返回的任何值都会作为下一次调用同一个函数的第一个参数。如果没有给这两个方法传入可选的第二个参数（作为归并起点值），则第一次迭代将从数组的第二项开始，因此传给归并函数的第一个参数是数组的第一项，第二个参数是数组的第二项。

可以使用reduce()函数执行累加数组中所有数值的操作，比如：

let values = [1, 2, 3, 4, 5];
let sum = values.reduce((prev, cur, index, array) => prev + cur);
alert(sum);   // 15

第一次执行归并函数时，prev是1, cur是2。第二次执行时，prev是3（1 + 2）, cur是3（数组第三项）。如此递进，直到把所有项都遍历一次，最后返回归并结果。

reduceRight()方法

reduceRight()方法与之类似，只是方向相反。来看下面的例子：

let values = [1, 2, 3, 4, 5];
let sum = values.reduceRight(function(prev, cur, index, array){
  return prev + cur;
});
alert(sum); // 15

在这里，第一次调用归并函数时prev是5，而cur是4。当然，最终结果相同，因为归并操作都是简单的加法。

究竟是使用reduce()还是reduceRight()，只取决于遍历数组元素的方向。除此之外，这两个方法没什么区别。

上一篇文章：JavaScript索引之indexof()、find()、findIndex()

更多资源请关注公众号：【全面资源集】