JavaScript遍历数组的三种方法map、forEach与filter实例详解

本文将介绍JavaScript中遍历数组的三种方法：map、forEach和filter。对于每一种方法，我们将深入剖析其特点、使用方法以及应用场景。最后，本文将提供两个实例帮助读者更好地理解这些方法的应用。

map

map方法可以检索并处理数组中的每一个元素，并将处理结果以新的数组形式返回。简单来说，它将原数组和处理结果一一对应，形成一个新的数组。下面我们使用一个实例来演示map方法的使用。

实例

接下来大家看一下如何使用map方法对数组进行处理。假设我们要将一个含有三个元素（apple、banana、pear）的数组中的所有元素转换成大写字母。

let fruits = ['apple', 'banana', 'pear'];
let uppercase_fruits = fruits.map(x => x.toUpperCase());
console.log(uppercase_fruits); // ["APPLE", "BANANA", "PEAR"]

上面的代码定义了一个名为fruits的数组，其中包含三个水果:"apple"、 "banana" 和 "pear"。我们使用map方法将每个元素都转成了大写字母，并将结果保存到新的数组uppercase_fruits中。最后的输出结果是["APPLE", "BANANA", "PEAR"]。

应用场景

由于map方法可以返回一个新的数组，因此它适用于需要对原数组进行“转化”并生成一个新数组的场景。比如，从一个自定义对象数组中提取某一字段构成一个新的数组；将数值数组每个元素平方后得到新的数组等等。

forEach

forEach方法是遍历数组中的每个元素并对它们执行操作的一种方式。与map不同，forEach不返回新的数组，而是直接对原数组进行操作。让我们开始一起探索forEach的效果和应用场景吧。

实例

下面我们依旧以数组的操作为例，演示使用forEach方法将我们定义的数组中的元素都打印到控制台上。

let fruits = ['apple', 'banana', 'pear'];
fruits.forEach((fruit) => {
  console.log(fruit);
});

如上所示，我们对fruits数组执行了forEach方法并定义了一个函数作为参数。此函数的参数是数组中的一个元素fruit，函数体内执行console.log语句将当前数组元素打印出来。期望的输出结果是：

apple
banana
pear

应用场景

由于forEach方法可以直接对原数组进行操作，因此它非常适用于“遍历需要对数组原地进行处理”的场景。例如，我们可以在遍历一个数组的同时，对数组的每个元素进行排序或删除等操作。

filter

filter方法是一种选择性的遍历数组方式，它可以将数组中满足条件的元素过滤出来，并以新的数组的形式返回。filter方法的使用方法如下所示。

实例

下面，我们演示如何使用filter方法选出数组中长度不少于6个字符的元素。代码实现如下：

let fruits = ['apple', 'banana', 'pear', 'orange', 'watermelon'];
let long_fruits = fruits.filter(x => x.length >= 6);
console.log(long_fruits); // ["banana", "orange", "watermelon"]

如上所示，在运行filter方法时，我们传入一个lambda表达式，每次迭代过程中，lambda表达式的参数x表示数组中的一个元素。lambda表达式的执行结果若为true，则将该元素加入到新的数组中。

应用场景

filter方法通常适用于“筛选数组中满足指定条件的元素”的场景。我们可以将它应用于筛选交易数据、过滤图像和声音等多种场合。

示例一：遍历二维数组

下面给出一个简单的例子，用于演示如何使用forEach和map方法遍历二维数组。

let matrix = [['a', 'b'], ['c', 'd']];
matrix.forEach(function(row) {
  row.map(function(column) {
    console.log(column);
  });
});

在这个例子中，我们将一个二维数组matrix作为输入，然后使用forEach方法遍历整个二维数组。在每次迭代过程中，我们使用map方法遍历二维数组中的每一个元素，并在控制台输出它。

示例二：在数组中筛选指定条件的元素

下面我们提供一个使用filter方法的实例，该实例演示如何在数组中选择值在1到10之间的整数。

let numbers = [2, 7, 12, 4, 9, 11, 19];
let filtered_numbers = numbers.filter(function(number) {
  return number > 1 && number < 10 && Number.isInteger(number);
});
console.log(filtered_numbers); // [ 2, 4, 7, 9 ]

在这个例子中，我们定义了一个数组numbers，其中包含一些不同的数字。然后使用filter方法遍历数组，选择那些值在1到10之间而且是整数的元素，并将筛选的结果输出到控制台。

总结

本文介绍了JavaScript遍历数组的三种方法：map、forEach和filter。对于每一种方法，我们通过实例来阐述其应用场景以及使用方法。一般来说，map适用于“转换数组”，forEach适用于“原地处理数组”，filter适用于“筛选数组元素”。掌握这些方法可以大幅提升你开发 JavaScript 应用的效率。