如何在JavaScript中使用数组方法：迭代方法

介绍

在JavaScript中，数组数据类型由一系列元素组成。对于JavaScript开发人员来说，有许多有用的内置方法可用于处理数组。修改原始数组的方法称为变异器方法，而返回新值或表示的方法称为访问器方法。

还有第三类数组方法，称为迭代方法，这些方法逐个操作数组中的每个项。这些方法与循环密切相关。在本教程中，我们将专注于迭代方法。

为了充分利用本教程，您应该对创建、索引、修改和循环遍历数组有一定的了解，您可以在教程理解JavaScript中的数组中进行复习。

在本教程中，我们将使用迭代方法循环遍历数组，在数组中对每个项目执行函数，过滤数组的所需结果，将数组项减少到单个值，并搜索数组以找到值或索引。

理解箭头函数

本教程中的许多示例将使用JavaScript的箭头函数表达式，其表示为一个等号后跟一个大于号：=>。

A function is a block of reusable code that can be executed. Traditionally, a function can be written with the following syntax:

var example = function() {
  // 要执行的代码
}

example();

在撰写时的最新JavaScript版本允许使用箭头函数，其可采用以下语法编写：

var example = () => {
  // 要执行的代码
}

example();

在任一情况下，括号中均可包含参数。当只有一个参数时，括号可以省略，如下所示：

var example = parameter1 => {
  // 要执行的代码
}

在本教程的示例中，我们将使用箭头函数语法。要阅读和了解更多关于 JavaScript 中函数的信息，请阅读 Mozilla 开发者网络上的函数参考。

forEach()

forEach()方法对数组中的每个元素调用一个函数。

让我们从将以下数组分配给变量fish开始：

let fish = [ "piranha", "barracuda", "cod", "eel" ];

我们可以使用forEach()将fish数组中的每个项目打印到控制台。

// 打印数组中的每个项目
fish.forEach(individualFish => {
	console.log(individualFish);
})

一旦我们这样做，我们将收到以下输出：

Output
piranha
barracuda
cod
eel

另一种方法是使用for循环关键字，并将其与数组的长度属性进行比较。

// 循环遍历数组的长度
for (let i = 0; i < fish.length; i++) {
	console.log(fish[i]);
}

以上代码将产生与使用forEach()方法相同的输出。作为专为与数组一起使用而设计的迭代方法，forEach()对于这个特定的任务来说更加简洁和直观。

map()

map() 方法会对数组中的每个元素调用指定的函数，并使用函数返回值构建一个新数组。

举个例子，我们可以使用迭代方法 map()，将循环的每次迭代打印到控制台上。map() 不会改变原始数组，而是返回一个新的数组值。

let fish = [ "piranha", "barracuda", "cod", "eel" ];

// 打印数组中的每个项
let printFish = fish.map(individualFish => {
	console.log(individualFish);
});

printFish;

Output
piranha
barracuda
cod
eel

我们还可以使用 map() 来改变数组中每个项的值。为了演示这一点，我们将在 fish 数组的每个项末尾添加一个 s 以将每个单词变为复数形式。

// 将 fish 数组中的所有项变为复数形式
let pluralFish = fish.map(individualFish => {
	return `${individualFish}s`;
});

pluralFish;

Output
[ 'piranhas', 'barracudas', 'cods', 'eels' ]

原始的 fish 变量保持不变，但 pluralFish 现在包含了原始变量的修改版本。

filter()

filter() 方法会创建一个新数组，其中包含通过给定测试的所有元素。

我们可以使用filter()来返回一个新数组，其中只包含以特定字母开头的项目。为此，我们可以利用字符串索引来调用数组中每个字符串项目中的第一个项目（或字母）。

let seaCreatures = [ "shark", "whale", "squid", "starfish", "narwhal" ];

// 将所有以 "s" 开头的生物筛选到新列表中
let filteredList = seaCreatures.filter(creature => {
  return creature[0] === "s";
});

filteredList;

Output
[ 'shark', 'squid', 'starfish' ]

我们测试了数组中哪些项目在0索引处具有s，并将结果分配给一个新变量。

filter()是一个迭代方法，不会改变原始数组。

reduce()

reduce()方法将数组减少为单个值。

这通常在数字中见到，例如查找数组中所有数字的总和。

let numbers = [ 42, 23, 16, 15, 4, 8 ];

// 获取所有数字值的总和
let sum = numbers.reduce((a, b) => {
	return a + b;
});

sum;

Output
108

reduce()也可以与字符串和其他数据类型一起使用。由reduce()返回的值可以是数字、字符串、数组或其他数据类型。reduce()是一个迭代方法，不会改变原始数组。

find()

find() 方法返回数组中通过给定测试的第一个值。

举个例子，我们将创建一个海洋生物数组。

let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

然后我们将使用 find() 方法来测试数组中是否有任何头足类动物。

// 检查给定值是否是头足类动物
const isCephalopod = cephalopod => {
	return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.find(isCephalopod);

Output
octopus

由于 octopus 是数组中满足 isCephalopod() 函数测试的第一个条目，因此它是第一个返回的值。

find() 方法可以帮助你处理包含许多值的数组。

findIndex()

findIndex() 方法返回数组中通过给定测试的第一个索引。

我们可以使用与 find() 方法相同的 seaCreatures 示例。

let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

使用 isCephalopod 测试，我们将找到第一个匹配项的索引号，而不是值。

// 检查给定值是否是头足类动物
const isCephalopod = cephalopod => {
	return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.findIndex(isCephalopod);

Output
1

octopus 是第一个匹配测试的项目，索引为 1，因此返回的是索引号。

如果测试不满足，则findIndex()将返回-1。

const isThereAnEel = eel => {
    return [ "eel" ].includes(eel);
}

seaCreatures.findIndex

Output
-1

findIndex()方法在处理包含许多项的数组时特别有用。

结论

在本教程中，我们回顾了JavaScript中主要的内置迭代数组方法。迭代方法对数组中的每一项进行操作，并经常执行新功能。我们讨论了如何循环遍历数组、更改数组中每一项的值、过滤和减少数组，并查找值和索引。

要复习数组的基础知识，请阅读JavaScript中的数组理解。有关JavaScript语法的更多信息，请参阅我们的教程“理解JavaScript中的语法和代码结构。”