介绍
在JavaScript中,数组数据类型由元素列表组成。 JavaScript开发人员可以使用许多有用的内置方法来处理数组。 修改原始数组的方法称为mutator方法 ,返回新值或表示形式的方法称为访问器方法 。
有第三类数组方法,称为迭代方法,它们是对数组中每个项目进行操作的方法,一次一个。 这些方法与循环密切相关。 在本教程中,我们将专注于迭代方法。
为了充分利用本教程,您应该熟悉创建,索引,修改和循环数组,您可以在“ 了解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开发人员网络上的函数参考 。
的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
循环关键字并根据数组的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;
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
,并将结果分配给一个新的变量。
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()
函数测试的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);
Output1
octopus
是匹配测试的第一个项目,索引为1
,因此是返回的索引号。
如果测试不满足, findIndex()
将返回-1
。
const isThereAnEel = eel => {
return [ "eel" ].includes(eel);
}
seaCreatures.findIndex
Output-1
当使用包含很多项目的数组时, findIndex()
方法特别有用。
结论
在本教程中,我们回顾了JavaScript中主要的内置迭代数组方法。 迭代方法对数组中的每个项进行操作,并且经常执行新的功能。 我们讨论了如何循环访问数组,更改数组中每个项目的值,过滤和减少数组,并找到值和索引。
要查看数组的基础知识,请阅读JavaScript中的“了解数组” 。 要查看所有数组方法的完整列表,请查看Mozilla Developer Network上的Array引用 。