介绍

在JavaScript中,数组数据类型由元素列表组成。 JavaScript开发人员可以使用许多有用的内置方法来处理数组。修改原始数组的方法称为mutator方法,返回新值或表示形式的方法称为accessor方法。

还有第三类数组方法,称为迭代方法,它们是对数组中的每个项目一次操作的方法。这些方法与循环紧密相关。在本教程中,我们将重点介绍迭代方法。

为了充分利用本教程,您应该对数组的创建,索引,修改和循环有一定的了解,您可以在《理解JavaScript中的数组》教程中进行阅读。

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

注意:Array方法正确地写为Array.prototype.method(),因为Array.prototype引用Array对象本身。为简单起见,我们将名称简单列为method()。

了解箭头功能

本教程中的许多示例都将使用JavaScript箭头函数表达式,该表达式由等号后接大于号:=>表示。

函数是可以执行的可重用代码块。传统上,可以使用以下语法编写函数:

var example = function() {
  // code to execute
}

example();

在撰写本文时,最新版本的JavaScript允许使用箭头函数,可以使用以下语法编写箭头函数:

var example = () => {
  // code to execute
}

example();

两种情况下的括号都可以包含参数。如果只有一个参数,则可以省略括号,如下所示:

var example = parameter1 => {
  // code to execute
}

在本教程的所有示例中,我们将使用箭头函数语法。要阅读和理解有关JavaScript中函数的更多信息,请阅读Mozilla开发人员网络上的Functions参考。

forEach()

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

首先,将以下数组分配给变量fish:

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

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

// Print out each item in the array
fish.forEach(individualFish => {
    console.log(individualFish);
})

完成此操作后,我们将收到以下输出:

Output
piranha barracuda cod eel

另一种方法是使用for循环关键字,并针对数组的length属性对其进行测试。

// Loop through the length of the array
for (let i = 0; i < fish.length; i++) {
    console.log(fish[i]);
}

上面的代码将具有与使用forEach()方法相同的输出。作为专门用于数组的迭代方法,forEach()对于此特定任务更加简洁明了。

地图()

map()方法使用对数组中每个元素的函数调用结果来创建一个新数组。

有关如何使用迭代方法map()的示例,我们可以将循环的每次迭代打印到控制台。 map()不会改变原始数组,而是返回一个新的数组值。与forEach()不同,必须将map()方法分配给新变量。

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

// Print out each item in the array
let printFish = fish.map(individualFish => {
    console.log(individualFish);
});

printFish;
Output
piranha barracuda cod eel

我们还可以使用map()更改数组中每个项目的值。为了说明这一点,我们将在fish数组中每个项目的末尾添加s,以使每个单词复数。

// Pluralize all items in the fish array
let pluralFish = fish.map(individualFish => {
    return `${individualFish}s`;
});

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

原始的fish变量没有更改,但是现在polyFishFish包含原始变量的修改版本。

过滤()

filter()方法使用通过给定测试结果的元素创建一个新数组。

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

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

// Filter all creatures that start with "s" into a new list
let filteredList = seaCreatures.filter(creature => {
  return creature[0] === "s";
});

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

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

filter()是一种迭代方法,不会对原始数组进行变异。

降低()

reduce()方法会将数组缩小为单个值。

这在数字中很常见,例如找到数组中所有数字的总和。

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

// Get the sum of all numerical values
let sum = numbers.reduce((a, b) => {
    return a + b;
});

sum;
Output
108

reduce()也可以与字符串和其他数据类型一起使用。 reduce()返回的值可以是数字,字符串,数组或其他数据类型。 reduce()是一种不对原始数组进行变异的迭代方法。

找()

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

例如,我们将创建一系列海洋生物。

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

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

// Check if a given value is a cephalopod
const isCephalopod = cephalopod => {
    return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.find(isCephalopod);
Output
octopus

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

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

findIndex()

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

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

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

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

// Check if a given value is a cephalopod
const isCephalopod = cephalopod => {
    return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.findIndex(isCephalopod);
Output
1

章鱼是第一个与测试匹配的项目,索引为1,因此它是返回的索引号。

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

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

seaCreatures.findIndex
Output
-1

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

结论

在本教程中,我们回顾了JavaScript中主要的内置迭代数组方法。迭代方法对数组中的每个项目进行操作,并且通常执行新功能。我们讨论了如何遍历数组,更改数组中每个项目的值,过滤和精简数组以及查找值和索引。

要查看数组的基础知识,请阅读了解JavaScript中的数组。有关Java语法的更多信息,请参见我们的“了解JavaScript中的语法和代码结构”的教程。