JavaScript Array数组迭代方法every()、some()、filter()、forEach()、map()

蔚落 2022-05-15 10:26 346阅读 0赞

*   *   *  every()方法
         *  some()方法
         *  filter()方法
         *  forEach()方法
         *  map()方法
         *  归并方法

ECMAScript 5为数组定义了 5个迭代方法。每个方法都接收两个参数：要在每一项上运行的函数和 （可选的）运行该函数的作用域对象——影响 this 的值。  
传入这些方法中的函数会接收三个参数：数组项的值item、该项在数组中的位置index和数组对象本身array。  
根据使用的方法不同，这个函数执行后的返回值可能 会也可能不会影响方法的返回值。以下是这 5个迭代方法的作用。

### every()方法 ###

对数组中的每一项运行给定函数，如果该函数对每一项都返回 true，则返回 true。

var num = [1, 3, 5, 8, 10, 13];
    var everyResult = num.every(function(item, index, array) { return (item > 2); });
    alert(everyResult); //false

### some()方法 ###

some()：对数组中的每一项运行给定函数，如果该函数对某一项返回 true，则返回 true

var num2 = [1, 2, 4, 5, 9, 12, 18];
    var someResult = num2.some(function(item, index, array) { return (item > 12); });
    alert(someResult); //true

### filter()方法 ###

filter()：对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组。

var num3 = [1, 3, 7, 4, 9, 18, 333];
    var filterResult = num3.filter(function(item, index, array) { return ((item % 3) == 0); });
    document.write(filterResult); //3, 9, 18, 333

### forEach()方法 ###

forEach()：对数组中的每一项运行给定函数。这个方法没有返回值。

var num4 =  [2, 3, 7, 4, 9, 18, 333];
    var sum = 0;
    num4.forEach(function(item, index, array){ sum += item; });
    document.write(sum); //376

### map()方法 ###

map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

var num5 = [1, 2, 3, 4, 5, 6];
    var mapResult = num5.map(function(item, index, array) { return item * 2; });
    document.write(mapResult); //2, 4, 6, 8, 10, 12

### 归并方法 ###

ECMAScript 5 还新增了两个归并数组的方法：`reduce()`和 `reduceRight()`。  
这两个方法都会迭 代数组的所有项，然后构建一个终返回的值。而 reduceRight()则从数组的后一项开始，向前遍历到第一项。  
这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。传给 reduce()和 reduceRight()的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。  
这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。 使用 reduce()方法可以执行求数组中所有值之和的操作，比如：

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

第一次执行回调函数，prev 是 1，cur 是 2。第二次，prev 是 3（1加 2的结果），cur 是 3（数组 的第三项）。这个过程会持续到把数组中的每一项都访问一遍，后返回结果。 reduceRight()的作用类似，只不过方向相反而已。来看下面这个例子。

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

在这个例子中，第一次执行回调函数，prev 是 5，cur 是 4。当然，终结果相同，因为执行的都 是简单相加的操作。 使用 reduce()还是 reduceRight()，主要取决于要从哪头开始遍历数组。除此之外，它们完全 相同。 支持这两个归并函数的浏览器有 IE9+、Firefox 3+、Safari 4+、Opera 10.5和 Chrome。