JS中的数组遍历方法：map、filter、find、findIndex、some、every、forEach、for in、for of 用法总结
2023-10-24 20:26:17
前言
数组是JavaScript中一种常用的数据结构，用于存储一系列有序的数据项。数组中的每个元素都有一个索引，可以通过索引来访问。数组的遍历是指访问数组中的所有元素。
JavaScript提供了多种数组遍历方法，每种方法都有其独特的用法和特点。本文将介绍这几种数组遍历方法，并比较它们的异同。
1. map()方法
map()方法用于将数组中的每个元素映射到一个新的值，并返回一个新数组。新数组中的每个元素都是原数组中对应元素映射后的值。
语法 ：
map(callback(currentValue, index, array))
参数 ：
- callback：一个回调函数，用于对数组中的每个元素进行映射。该函数接收三个参数：当前元素值、当前元素索引和原数组。
- currentValue：当前正在处理的元素值。
- index：当前正在处理的元素索引。
- array：原数组。
返回值 ：
一个新数组，其中包含原数组中每个元素映射后的值。
示例 ：
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => number * 2);
console.log(doubledNumbers); // 输出：[2, 4, 6, 8, 10]
2. filter()方法
filter()方法用于过滤数组中的元素，并返回一个包含通过过滤条件的元素的新数组。
语法 ：
filter(callback(currentValue, index, array))
参数 ：
- callback：一个回调函数，用于对数组中的每个元素进行过滤。该函数接收三个参数：当前元素值、当前元素索引和原数组。
- currentValue：当前正在处理的元素值。
- index：当前正在处理的元素索引。
- array：原数组。
返回值 ：
一个新数组，其中包含通过过滤条件的元素。
示例 ：
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((number) => number % 2 === 0);
console.log(evenNumbers); // 输出：[2, 4]
3. find()方法
find()方法用于查找数组中第一个满足指定条件的元素，并返回该元素。如果数组中没有满足条件的元素，则返回undefined。
语法 ：
find(callback(currentValue, index, array))
参数 ：
- callback：一个回调函数，用于对数组中的每个元素进行判断。该函数接收三个参数：当前元素值、当前元素索引和原数组。
- currentValue：当前正在处理的元素值。
- index：当前正在处理的元素索引。
- array：原数组。
返回值 ：
数组中第一个满足指定条件的元素，如果没有满足条件的元素，则返回undefined。
示例 ：
const numbers = [1, 2, 3, 4, 5];
const firstEvenNumber = numbers.find((number) => number % 2 === 0);
console.log(firstEvenNumber); // 输出：2
4. findIndex()方法
findIndex()方法用于查找数组中第一个满足指定条件的元素的索引，并返回该索引。如果数组中没有满足条件的元素，则返回-1。
语法 ：
findIndex(callback(currentValue, index, array))
参数 ：
- callback：一个回调函数，用于对数组中的每个元素进行判断。该函数接收三个参数：当前元素值、当前元素索引和原数组。
- currentValue：当前正在处理的元素值。
- index：当前正在处理的元素索引。
- array：原数组。
返回值 ：
数组中第一个满足指定条件的元素的索引，如果没有满足条件的元素，则返回-1。
示例 ：
const numbers = [1, 2, 3, 4, 5];
const firstEvenNumberIndex = numbers.findIndex((number) => number % 2 === 0);
console.log(firstEvenNumberIndex); // 输出：1
5. some()方法
some()方法用于判断数组中是否有至少一个元素满足指定条件。
语法 ：
some(callback(currentValue, index, array))
参数 ：
- callback：一个回调函数，用于对数组中的每个元素进行判断。该函数接收三个参数：当前元素值、当前元素索引和原数组。
- currentValue：当前正在处理的元素值。
- index：当前正在处理的元素索引。
- array：原数组。
返回值 ：
一个布尔值，表示数组中是否有至少一个元素满足指定条件。
示例 ：
const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some((number) => number % 2 === 0);
console.log(hasEvenNumber); // 输出：true
6. every()方法
every()方法用于判断数组中是否所有元素都满足指定条件。
语法 ：
every(callback(currentValue, index, array))
参数 ：
- callback：一个回调函数，用于对数组中的每个元素进行判断。该函数接收三个参数：当前元素值、当前元素索引和原数组。
- currentValue：当前正在处理的元素值。
- index：当前正在处理的元素索引。
- array：原数组。
返回值 ：
一个布尔值，表示数组中是否所有元素都满足指定条件。
示例 ：
const numbers = [1, 2, 3, 4, 5];
const allEvenNumbers = numbers.every((number) => number % 2 === 0);
console.log(allEvenNumbers); // 输出：false
7. forEach()方法
forEach()方法用于对数组中的每个元素执行指定的操作。
语法 ：
forEach(callback(currentValue, index, array))
参数 ：
- callback：一个回调函数，用于对数组中的每个元素执行指定的操作。该函数接收三个参数：当前元素值、当前元素索引和原数组。
- currentValue：当前正在处理的元素值。
- index：当前正在处理的元素索引。
- array：原数组。
返回值 ：
undefined。
示例 ：
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => console.log(number));
// 输出：
// 1
// 2
// 3
// 4
// 5
8. for in
for in循环用于遍历数组中的索引，而不是元素值。
语法 ：
for (let index in array) {
// 执行操作
}
参数 ：
- index：数组的索引。
返回值 ：
undefined。
示例 ：
const numbers = [1, 2, 3, 4, 5];
for (let index in numbers) {
console.log(index); // 输出：0, 1, 2, 3, 4
}
9. for of
for of循环用于遍历数组中的元素值。
语法 ：
for (const element of array) {
// 执行操作
}
参数 ：
- element：数组的元素值。
返回值 ：
undefined。
示例 ：
const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
console.log(number); // 输出：1, 2, 3, 4, 5
}
比较
| 方法 | 用途 | 参数 | 返回值 |
|---|---|---|---|
| map() | 将数组中的每个元素映射到一个新值 | callback | 一个新数组，其中包含原数组中每个元素映射后的值 |
| filter() | 过滤数组中的元素，并返回一个包含通过过滤条件的元素的新数组 | callback | 一个新数组，其中包含通过过滤条件的元素 |
| find() | 查找数组中第一个满足指定条件的元素，并返回该元素 | callback | 数组中第一个满足指定条件的元素，如果没有满足条件的元素，则返回 |
