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

来自菜鸟教程
跳转至:导航、​搜索

介绍

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

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

为了充分利用本教程,您应该熟悉数组的创建、索引、修改和循环,您可以在教程 Understanding Arrays in JavaScript 中查看这些内容。

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

注意: 数组方法正确写为 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);
})

一旦我们这样做,我们将收到以下输出:

Outputpiranha
barracuda
cod
eel

另一种方法是使用 for loop 关键字并针对数组的长度属性对其进行测试。

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

上面的代码将具有与使用 forEach() 方法相同的输出。 作为一种专门用于数组的迭代方法,forEach() 对于这个特定的任务来说更加简洁和直接。

地图()

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

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

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

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

printFish;
Outputpiranha
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 变量没有改变,但 pluralFish 现在包含原始变量的修改版本。

筛选()

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;
Output108

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);
Outputoctopus

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

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

查找索引()

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);
Output1

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

如果测试不满足,findIndex()将返回-1

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

seaCreatures.findIndex
Output-1

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

结论

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

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