介绍
在 JavaScript 中, array数据类型由一个元素列表组成. JavaScript 开发人员可以使用许多有用的内置方法来处理数组。 修改原始数组的方法被称为 mutator 方法,而返回新值或表示的方法被称为 accessor 方法。
有第三类数组方法,被称为 ** iteration** 方法,这些方法在一个数组中的每个项目上运行一次,这些方法与循环密切相关。
为了充分利用本教程,您应该熟悉创建,索引,修改和循环数组,您可以在教程中审查 理解JavaScript中的数组。
在本教程中,我们将使用迭代方法通过数组循环,对数组中的每个项目执行函数,过滤数组的所需结果,将数组项目减少到单个值,并通过数组搜索以找到值或索引。
<$>[注]
注: Array 方法被正确地编写为 Array.prototype.method(),因为 Array.prototype 指的是 Array 对象本身。
了解箭头功能
在本教程中,许多例子将使用JavaScript 箭头函数表达式,这些表达式由一个等于符号,然后是大于符号表示: =>。
函数是可重复使用的代码块,可以执行,传统上,函数可以用以下语法写成:
1var example = function() {
2 // code to execute
3}
4
5example();
编写时的最新版本的JavaScript允许使用箭头函数,可以用以下语法编写:
1var example = () => {
2 // code to execute
3}
4
5example();
在这两种情况下,关节可能包含参数;当只有一个参数存在时,可以忽略关节,如下:
1var example = parameter1 => {
2 // code to execute
3}
在本教程中的示例中,我们将使用箭头函数语法. 要阅读和了解更多关于JavaScript中的函数,请阅读 Mozilla 开发者网络上的函数参考。
主持人()
forEach()方法为数组中的每个元素调用一个函数。
让我们从以下分配给变量鱼的数组开始:
1let fish = [ "piranha", "barracuda", "cod", "eel" ];
我们可以使用forEach()来打印鱼数组中的每个项目到控制台。
1// Print out each item in the array
2fish.forEach(individualFish => {
3 console.log(individualFish);
4})
一旦我们这样做,我们将收到以下输出:
1[secondary_label Output]
2piranha
3barracuda
4cod
5eel
另一种方法是使用 for loop的关键字,并对数组的长度属性进行测试。
1// Loop through the length of the array
2for (let i = 0; i < fish.length; i++) {
3 console.log(fish[i]);
4}
上面的代码将具有与使用forEach()的方法相同的输出,作为专门用于数组使用的迭代方法,forEach()对于这个特定的任务更简洁和简单。
地图()
使用map()方法创建一个新的数组,以便在数组中的每个元素上调用函数的结果。
对于如何使用map()迭代方法的示例,我们可以将循环的每个迭代打印到控制台上。
1let fish = [ "piranha", "barracuda", "cod", "eel" ];
2
3// Print out each item in the array
4let printFish = fish.map(individualFish => {
5 console.log(individualFish);
6});
7
8printFish;
1[secondary_label Output]
2piranha
3barracuda
4cod
5eel
我们还可以使用map()来更改数组中的每个项目的值,为了证明这一点,我们将在fish数组中的每个项目的末尾添加一个s来倍增每个单词。
1// Pluralize all items in the fish array
2let pluralFish = fish.map(individualFish => {
3 return `${individualFish}s`;
4});
5
6pluralFish;
1[secondary_label Output]
2[ 'piranhas', 'barracudas', 'cods', 'eels' ]
原始fish变量不变,但pluralFish现在包含原始变量的修改版本。
过滤器()
‘filter()’ 方法创建一个新的数组,其中包含通过给定测试结果的元素。
我们可以使用 filter() 返回一个包含只有以特定字母开始的列表中的项目的新数组. 要做到这一点,我们可以使用 string indexing 来调用数组中的每个字符串项目中的第一个项目(或字母)。
1let seaCreatures = [ "shark", "whale", "squid", "starfish", "narwhal" ];
2
3// Filter all creatures that start with "s" into a new list
4let filteredList = seaCreatures.filter(creature => {
5 return creature[0] === "s";
6});
7
8filteredList;
1[secondary_label Output]
2[ 'shark', 'squid', 'starfish' ]
我们测试了数组中的哪些项目在0索引中具有s,并将结果分配到一个新的变量中。
filter() 是一种迭代方法,不会改变原始数组。
减少( )
‘reduce()’ 方法将一个数组减少到一个值。
这通常在数字中可以看到,例如在一个数组中找到所有数字的总和。
1let numbers = [ 42, 23, 16, 15, 4, 8 ];
2
3// Get the sum of all numerical values
4let sum = numbers.reduce((a, b) => {
5 return a + b;
6});
7
8sum;
1[secondary_label Output]
2108
reduce() 也可以用于 strings和其他 数据类型。 reduce() 返回的值可以是数字、字符串、数组或其他数据类型。
查找( )
「find()」方法返回通过给定测试的数组中的第一个值。
作为一个例子,我们将创建一系列的海洋生物。
1let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];
接下来,我们将使用find()方法来测试数组中的任何生物是否是脑。
1// Check if a given value is a cephalopod
2const isCephalopod = cephalopod => {
3 return [ "cuttlefish", "octopus" ].includes(cephalopod);
4}
5
6seaCreatures.find(isCephalopod);
1[secondary_label Output]
2octopus
由于 'octopus' 是数组中第一个满足 `isCephalopod()' 函数测试的输入,因此它是第一个返回的值。
find()方法可以帮助您使用包含许多值的数组。
图表( )
「findIndex()」方法返回通过给定测试的数组中的第一个索引。
我们可以从find()方法中使用相同的seaCreatures示例。
1let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];
使用「isCephalopod」測試,我們會找到指數數,而不是第一個匹配的值。
1// Check if a given value is a cephalopod
2const isCephalopod = cephalopod => {
3 return [ "cuttlefish", "octopus" ].includes(cephalopod);
4}
5
6seaCreatures.findIndex(isCephalopod);
1[secondary_label Output]
21
octopus是第一个匹配测试的项目,具有1的索引,因此返回的是索引号。
如果测试不满足,则findIndex()将返回-1。
1const isThereAnEel = eel => {
2 return [ "eel" ].includes(eel);
3}
4
5seaCreatures.findIndex
1[secondary_label Output]
2-1
findIndex()方法在使用包含许多项目的数组时尤其有用。
结论
在本教程中,我们审查了JavaScript中的主要内置迭代数组方法。迭代方法在数组中的每个项目上运行,并且经常执行一个新的函数。
要查看数组的基本知识,请阅读 理解 JavaScript 中的数组。 有关 JavaScript 中的语法的更多信息,请参阅我们关于 [理解 JavaScript 中的语法和代码结构的教程。