JavaScript 遍历数组 13 大法， 助你玩转数组操作

JavaScript 遍历数组的 13 种大法

简介

在 JavaScript 中，数组是一种重要的数据结构，可用来存储一系列有序的数据项。对数组进行遍历是 Web 开发中的常见任务，用于获取、更新或删除其中的数据。本文将介绍 13 种不同的 JavaScript 数组遍历方法，每种方法都有其独特的优点和使用场景。

1. filter()

用途： 从数组中筛选出满足特定条件的元素。

语法：

const filteredArray = array.filter(callbackFunction);

callbackFunction 参数：

• element: 正在处理的数组元素。
• index: 正在处理的元素在数组中的索引。
• array: 正在处理的数组。

示例：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter((number) => number % 2 === 0);

console.log(evenNumbers); // [2, 4, 6, 8, 10]

2. map()

用途： 对数组中的每个元素执行相同操作，并返回一个包含操作结果的新数组。

语法：

const mappedArray = array.map(callbackFunction);

callbackFunction 参数：

• element: 正在处理的数组元素。
• index: 正在处理的元素在数组中的索引。
• array: 正在处理的数组。

示例：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const doubledNumbers = numbers.map((number) => number * 2);

console.log(doubledNumbers); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

3. reduce()

用途： 将数组中的所有元素聚合为一个单一的值。

语法：

const reducedValue = array.reduce(callbackFunction, initialValue);

callbackFunction 参数：

• accumulator: 聚合结果的累加器值。
• element: 正在处理的数组元素。
• index: 正在处理的元素在数组中的索引。
• array: 正在处理的数组。

initialValue 参数： 用于初始化累加器值的可选参数。

示例：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const sum = numbers.reduce((total, number) => total + number, 0);

console.log(sum); // 55

4. forEach()

用途： 对数组中的每个元素执行相同操作，但不会返回任何值。

语法：

array.forEach(callbackFunction);

callbackFunction 参数：

• element: 正在处理的数组元素。
• index: 正在处理的元素在数组中的索引。
• array: 正在处理的数组。

示例：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

numbers.forEach((number) => console.log(number));

输出：

1
2
3
4
5
6
7
8
9
10

5. some()

用途： 检查数组中是否至少有一个元素满足特定条件。

语法：

const hasElement = array.some(callbackFunction);

callbackFunction 参数：

• element: 正在处理的数组元素。
• index: 正在处理的元素在数组中的索引。
• array: 正在处理的数组。

示例：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const hasGreaterThan5 = numbers.some((number) => number > 5);

console.log(hasGreaterThan5); // true

6. every()

用途： 检查数组中的所有元素是否都满足特定条件。

语法：

const allElements = array.every(callbackFunction);

callbackFunction 参数：

• element: 正在处理的数组元素。
• index: 正在处理的元素在数组中的索引。
• array: 正在处理的数组。

示例：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const allGreaterThan0 = numbers.every((number) => number > 0);

console.log(allGreaterThan0); // true

7. find()

用途： 从数组中找到第一个满足特定条件的元素。

语法：

const foundElement = array.find(callbackFunction);

callbackFunction 参数：

• element: 正在处理的数组元素。
• index: 正在处理的元素在数组中的索引。
• array: 正在处理的数组。

示例：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const firstGreaterThan5 = numbers.find((number) => number > 5);

console.log(firstGreaterThan5); // 6

8. findIndex()

用途： 从数组中找到第一个满足特定条件的元素的索引。

语法：

const foundIndex = array.findIndex(callbackFunction);

callbackFunction 参数：

• element: 正在处理的数组元素。
• index: 正在处理的元素在数组中的索引。
• array: 正在处理的数组。

示例：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const firstGreaterThan5Index = numbers.findIndex((number) => number > 5);

console.log(firstGreaterThan5Index); // 5

9. includes()

用途： 检查数组中是否包含某个元素。

语法：

const hasElement = array.includes(element);

示例：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const has5 = numbers.includes(5);

console.log(has5); // true

10. indexOf()

用途： 返回数组中某个元素的第一个索引。

语法：

const index = array.indexOf(element);

示例：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const indexOf5 = numbers.indexOf(5);

console.log(indexOf5); // 4

11. lastIndexOf()

用途： 返回数组中某个元素的最后一个索引。

语法：

const index = array.lastIndexOf(element);

示例：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 5];

const lastIndexOf5 = numbers.lastIndexOf(5);

console.log(lastIndexOf5); // 10

12. reverse()

用途： 反转数组中元素的顺序。

语法：

array.reverse();

示例：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

numbers.reverse();

console.log(numbers); // [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]

13. sort()

用途： 对数组中的元素进行排序。

语法：

array.sort(compareFunction);

compareFunction 参数： 用于比较数组元素的函数，它应该返回以下值之一：

• -1: 如果第一个元素应该排在第二个元素之前。
• 0: 如果两个元素