JavaScript 数组迭代方法——数组的高级方法

迭代⽅法也叫遍历⽅法，迭代是把集合⾥⾯的元素依次的⼀个⼀个的拿出来

ECMAScript 5 为数组定义了 5 个迭代⽅法。每个⽅法都接收两个参数： 要在每⼀项上运⾏的函数和 （可选的）运⾏该函数的作⽤域对象 —— 影响 this 的值。 传⼊这些⽅法中的函数会接收三个参数：数 组 项的值、该项在数组中的位置和数组对象本身。

如果要学习迭代的⽅法，我们就先回顾⼀下之前我们是怎么遍历数组的

var arr = ["a", "b", "c", "d", "e"];
// 我们采⽤最原始的⽅式来完成迭代
for (var i = 0; i < arr.length; i++) {
console.log(i, arr[i]);
}

概念：数组迭代方法就是对每个数组项进行操作。

内容：

1.Array.forEach()；forEach()方法为每个数组元素调用一次函数（回调函数）；

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

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

注意：函数的的3个形参分别为：

• 项目值
• 项目索引
• 数组本身

2.Array.map()；

map() 方法通过对每个数组元素执行函数来创建新数组。

map() 方法不会对没有值的数组元素执行函数。

map() 方法不会更改原始数组。

它也是数组⾥⾯的⼀个遍历⽅法，它与 forEach 很相似，但是这个⽅法可以接收回调函数的返回

值，它会将回调函数的返回值组成⼀个新的数组

区别 ： map ⽅法与 forEach ⽅法是⾮常相似的，只是 map 可以将回调函数⾥⾯的返回值再构成⼀

个新的数组

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}

3.Array.filter()；

filter 英⽂单词有过滤的意思，它会根据指定的条件在原数组当中过滤符合要求的元素（为 true 就会

保留），再将这些符合要求的元素放在⼀个新数组⾥⾯，最后将这个数组返回

filter() 方法创建一个包含通过测试的数组元素的新数组。

之前的写法：

var arr = [45, 4, 9, 16, 25];;
// 请将arr⾥在的偶数提取出来 ,放在⼀个新的数组⾥⾯
var newArr = [];
arr.forEach(function (item, index, _arr) {
if (item > 18) {
newArr.push(item);
}
});

现在的写法： 

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

4.归并⽅法--Array.reduce()；

reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。

reduce() 方法在数组中从左到右工作。另请参阅 reduceRight()。

reduce() 方法不会减少原始数组。

下面的函数求数组中值的和。其中“100”是初始值。其中“total”参数是前一个返回的值

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction,100);

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

  归并函数默认是从第 2 项开始的

  当前回调函数的返回值会做为下⼀次回调函数的 prev 参数使⽤

  最后⼀次回调函数的返回值给了整个归并函数 result

5.Array.some（）；

这个⽅法相当于⼀真即真的操作，对数组中的每⼀项运⾏给定函数，如果该函数对任⼀项返回

true ，则返回 true

以前的写法实现：

var arr = [1, 3, 5, 9, 7, 4, 11];
// 请问,上⾯的arr当中有偶数吗?
//假设法,我假设上⾯没有偶数
// flag为false代表没有偶数,false为true代表有偶数
var flag = false;
for (var i = 0; i < arr.length; i++) {
if (arr[i] % 2 == 0) {
flag = true;
break;
}
}
console.log(flag?"有偶数":"没偶数");

现在的写法：

var arr = [1, 3, 5, 9, 7, 4, 11];
// 请问,上⾯的arr当中有偶数吗?
var flag = arr.some(function (item, index, _arr) {
return item % 2 == 0;
});
// false||false||false||false||false||true||false
console.log(flag); //true
//上⾯的代码⾥⾯，它是将所有的结果执⾏或运算，最终的结果就是true

6.Array.every()；

这个⽅法与 some 的⽅法是相对的，它执⾏的是⼀假即假的原则，它执⾏逻辑与的操作

就是只要一个值是false就返回false

这个例子检查所有数组值是否大于 18:

var arr = [1, 3, 5, 9, 7, 4, 11];
// 问上⾯的数组中的元素是否全都是奇数
var flag = arr.every(function (item, index, _arr) {
return item % 2 == 1;
});
//true&&true&&true&&true&&true&&false&&true;
console.log(flag); //false
//every要对所有的结果做逻辑与判断，⼀假即假

7.Array.indexOf()；

indexOf() 方法在数组中搜索元素值并返回其位置。

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

注意：如果未找到项目，Array.indexOf() 返回 -1。

           如果项目多次出现，则返回第一次出现的位置。

8.Array.lastIndexOf()；

Array.lastIndexOf() 与 Array.indexOf() 类似，但是从数组结尾开始搜索。

9.Array.find()

find() 方法返回通过测试函数的第一个数组元素的值。

这个例子查找（返回）大于 18 的第一个元素的值:

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

10.Array.findIndex()

findIndex() 方法返回通过测试函数的第一个数组元素的索引。

这个例子查找大于 18 的第一个元素的索引:

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}