JavaScript中数组常用的迭代处理方法有哪些

发布时间：2022-08-04 14:18:50 作者：iii
来源：亿速云阅读：164

JavaScript中数组常用的迭代处理方法有哪些

在JavaScript中，数组是一种非常常见的数据结构，用于存储和操作一组有序的数据。为了更方便地处理数组中的数据，JavaScript提供了多种迭代处理方法。这些方法可以帮助开发者更高效地遍历、过滤、映射、排序和聚合数组中的元素。本文将详细介绍JavaScript中数组常用的迭代处理方法，并通过示例代码展示它们的用法。

1. `forEach` 方法

forEach 方法用于遍历数组中的每个元素，并对每个元素执行指定的操作。它不会返回新的数组，而是直接对原数组进行操作。

语法

array.forEach(callback(currentValue, index, array), thisArg);

callback: 为数组中的每个元素执行的函数，该函数接收三个参数：
- currentValue: 当前处理的元素。
- index (可选): 当前处理元素的索引。
- array (可选): 调用 forEach 的数组。
thisArg (可选): 执行 callback 时使用的 this 值。

示例

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((number, index) => {
  console.log(`Index: ${index}, Value: ${number}`);
});

输出

Index: 0, Value: 1
Index: 1, Value: 2
Index: 2, Value: 3
Index: 3, Value: 4
Index: 4, Value: 5

注意事项

forEach 方法不会改变原数组，但可以在回调函数中修改数组元素。
forEach 方法无法中断遍历，即使使用 return 或 break 也无法提前退出循环。

2. `map` 方法

map 方法用于遍历数组中的每个元素，并对每个元素执行指定的操作，最后返回一个新的数组，新数组中的元素是原数组元素经过回调函数处理后的结果。

语法

array.map(callback(currentValue, index, array), thisArg);

callback: 为数组中的每个元素执行的函数，该函数接收三个参数：
- currentValue: 当前处理的元素。
- index (可选): 当前处理元素的索引。
- array (可选): 调用 map 的数组。
thisArg (可选): 执行 callback 时使用的 this 值。

示例

const numbers = [1, 2, 3, 4, 5];

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

console.log(doubledNumbers); // 输出: [2, 4, 6, 8, 10]

注意事项

map 方法不会改变原数组，而是返回一个新的数组。
map 方法适用于需要对数组中的每个元素进行转换的场景。

3. `filter` 方法

filter 方法用于遍历数组中的每个元素，并根据指定的条件筛选出符合条件的元素，最后返回一个新的数组。

语法

array.filter(callback(currentValue, index, array), thisArg);

callback: 为数组中的每个元素执行的函数，该函数接收三个参数：
- currentValue: 当前处理的元素。
- index (可选): 当前处理元素的索引。
- array (可选): 调用 filter 的数组。
thisArg (可选): 执行 callback 时使用的 this 值。

示例

const numbers = [1, 2, 3, 4, 5];

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

console.log(evenNumbers); // 输出: [2, 4]

注意事项

filter 方法不会改变原数组，而是返回一个新的数组。
filter 方法适用于需要根据条件筛选数组元素的场景。

4. `reduce` 方法

reduce 方法用于遍历数组中的每个元素，并将数组中的元素累积为一个单一的值。reduce 方法接收一个回调函数和一个初始值作为参数，回调函数会对数组中的每个元素执行累积操作。

语法

array.reduce(callback(accumulator, currentValue, index, array), initialValue);

callback: 为数组中的每个元素执行的函数，该函数接收四个参数：
- accumulator: 累积器，累积回调函数的返回值。
- currentValue: 当前处理的元素。
- index (可选): 当前处理元素的索引。
- array (可选): 调用 reduce 的数组。
initialValue (可选): 作为第一次调用 callback 函数时的第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素作为初始值。

示例

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 输出: 15

注意事项

reduce 方法不会改变原数组，而是返回一个累积后的值。
reduce 方法适用于需要对数组中的元素进行累积操作的场景，如求和、求积等。

5. `reduceRight` 方法

reduceRight 方法与 reduce 方法类似，但它从数组的末尾开始遍历数组，而不是从数组的开头。

语法

array.reduceRight(callback(accumulator, currentValue, index, array), initialValue);

callback: 为数组中的每个元素执行的函数，该函数接收四个参数：
- accumulator: 累积器，累积回调函数的返回值。
- currentValue: 当前处理的元素。
- index (可选): 当前处理元素的索引。
- array (可选): 调用 reduceRight 的数组。
initialValue (可选): 作为第一次调用 callback 函数时的第一个参数的值。如果没有提供初始值，则将使用数组中的最后一个元素作为初始值。

示例

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduceRight((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 输出: 15

注意事项

reduceRight 方法不会改变原数组，而是返回一个累积后的值。
reduceRight 方法适用于需要从数组末尾开始累积操作的场景。

6. `every` 方法

every 方法用于检查数组中的每个元素是否都满足指定的条件。如果所有元素都满足条件，则返回 true，否则返回 false。

语法

array.every(callback(currentValue, index, array), thisArg);

callback: 为数组中的每个元素执行的函数，该函数接收三个参数：
- currentValue: 当前处理的元素。
- index (可选): 当前处理元素的索引。
- array (可选): 调用 every 的数组。
thisArg (可选): 执行 callback 时使用的 this 值。

示例

const numbers = [1, 2, 3, 4, 5];

const allEven = numbers.every((number) => {
  return number % 2 === 0;
});

console.log(allEven); // 输出: false

注意事项

every 方法不会改变原数组。
every 方法适用于需要检查数组中的所有元素是否都满足某个条件的场景。

7. `some` 方法

some 方法用于检查数组中是否至少有一个元素满足指定的条件。如果至少有一个元素满足条件，则返回 true，否则返回 false。

语法

array.some(callback(currentValue, index, array), thisArg);

callback: 为数组中的每个元素执行的函数，该函数接收三个参数：
- currentValue: 当前处理的元素。
- index (可选): 当前处理元素的索引。
- array (可选): 调用 some 的数组。
thisArg (可选): 执行 callback 时使用的 this 值。

示例

const numbers = [1, 2, 3, 4, 5];

const hasEven = numbers.some((number) => {
  return number % 2 === 0;
});

console.log(hasEven); // 输出: true

注意事项

some 方法不会改变原数组。
some 方法适用于需要检查数组中是否至少有一个元素满足某个条件的场景。

8. `find` 方法

find 方法用于查找数组中第一个满足指定条件的元素。如果找到满足条件的元素，则返回该元素，否则返回 undefined。

语法

array.find(callback(currentValue, index, array), thisArg);

callback: 为数组中的每个元素执行的函数，该函数接收三个参数：
- currentValue: 当前处理的元素。
- index (可选): 当前处理元素的索引。
- array (可选): 调用 find 的数组。
thisArg (可选): 执行 callback 时使用的 this 值。

示例

const numbers = [1, 2, 3, 4, 5];

const firstEven = numbers.find((number) => {
  return number % 2 === 0;
});

console.log(firstEven); // 输出: 2

注意事项

find 方法不会改变原数组。
find 方法适用于需要查找数组中第一个满足某个条件的元素的场景。

9. `findIndex` 方法

findIndex 方法用于查找数组中第一个满足指定条件的元素的索引。如果找到满足条件的元素，则返回该元素的索引，否则返回 -1。

语法

array.findIndex(callback(currentValue, index, array), thisArg);

callback: 为数组中的每个元素执行的函数，该函数接收三个参数：
- currentValue: 当前处理的元素。
- index (可选): 当前处理元素的索引。
- array (可选): 调用 findIndex 的数组。
thisArg (可选): 执行 callback 时使用的 this 值。

示例

const numbers = [1, 2, 3, 4, 5];

const firstEvenIndex = numbers.findIndex((number) => {
  return number % 2 === 0;
});

console.log(firstEvenIndex); // 输出: 1

注意事项

findIndex 方法不会改变原数组。
findIndex 方法适用于需要查找数组中第一个满足某个条件的元素的索引的场景。

10. `includes` 方法

includes 方法用于检查数组中是否包含指定的元素。如果包含，则返回 true，否则返回 false。

语法

array.includes(searchElement, fromIndex);

searchElement: 需要查找的元素。
fromIndex (可选): 开始查找的索引位置，默认为 0。

示例

const numbers = [1, 2, 3, 4, 5];

const includesThree = numbers.includes(3);

console.log(includesThree); // 输出: true

注意事项

includes 方法不会改变原数组。
includes 方法适用于需要检查数组中是否包含某个元素的场景。

11. `indexOf` 方法

indexOf 方法用于查找数组中指定元素的第一个索引。如果找到，则返回该元素的索引，否则返回 -1。

语法

array.indexOf(searchElement, fromIndex);

searchElement: 需要查找的元素。
fromIndex (可选): 开始查找的索引位置，默认为 0。

示例

const numbers = [1, 2, 3, 4, 5];

const indexOfThree = numbers.indexOf(3);

console.log(indexOfThree); // 输出: 2

注意事项

indexOf 方法不会改变原数组。
indexOf 方法适用于需要查找数组中某个元素的索引的场景。

12. `lastIndexOf` 方法

lastIndexOf 方法用于查找数组中指定元素的最后一个索引。如果找到，则返回该元素的索引，否则返回 -1。

语法

array.lastIndexOf(searchElement, fromIndex);

searchElement: 需要查找的元素。
fromIndex (可选): 开始查找的索引位置，默认为数组的最后一个索引。

示例

const numbers = [1, 2, 3, 4, 5, 3];

const lastIndexOfThree = numbers.lastIndexOf(3);

console.log(lastIndexOfThree); // 输出: 5

注意事项

lastIndexOf 方法不会改变原数组。
lastIndexOf 方法适用于需要查找数组中某个元素的最后一个索引的场景。

13. `sort` 方法

sort 方法用于对数组中的元素进行排序。默认情况下，sort 方法会将数组元素转换为字符串，然后按照字符的Unicode码点进行排序。

语法

array.sort(compareFunction);

compareFunction (可选): 用于指定排序顺序的函数。该函数接收两个参数 a 和 b，分别表示要比较的两个元素。如果 a 应该排在 b 前面，则返回一个负数；如果 a 应该排在 b 后面，则返回一个正数；如果 a 和 b 相等，则返回 0。

示例

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

numbers.sort((a, b) => {
  return a - b;
});

console.log(numbers); // 输出: [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

注意事项

sort 方法会改变原数组。
sort 方法适用于需要对数组中的元素进行排序的场景。

14. `reverse` 方法

reverse 方法用于反转数组中的元素顺序。

语法

array.reverse();

示例

const numbers = [1, 2, 3, 4, 5];

numbers.reverse();

console.log(numbers); // 输出: [5, 4, 3, 2, 1]

注意事项

reverse 方法会改变原数组。
reverse 方法适用于需要反转数组元素顺序的场景。

15. `flat` 方法

flat 方法用于将嵌套的数组“扁平化”，即将多维数组转换为一维数组。

语法

array.flat(depth);

depth (可选): 指定要扁平化的嵌套层数，默认为 1。

示例

const numbers = [1, [2, [3, [4, 5]]]];

const flattenedNumbers = numbers.flat(2);

console.log(flattenedNumbers); // 输出: [1, 2, 3, [4, 5]]

注意事项

flat 方法不会改变原数组，而是返回一个新的数组。
flat 方法适用于需要将多维数组转换为一维数组的场景。

16. `flatMap` 方法

flatMap 方法结合了 map 和 flat 方法的功能。它首先对数组中的每个元素执行 map 操作，然后将结果“扁平化”为一维数组。

语法

array.flatMap(callback(currentValue, index, array), thisArg);

callback: 为数组中的每个元素执行的函数，该函数接收三个参数：
- currentValue: 当前处理的元素。
- index (可选): 当前处理元素的索引。
- array (可选): 调用 flatMap 的数组。
thisArg (可选): 执行 callback 时使用的 this 值。

示例

const numbers = [1, 2, 3];

const doubledAndFlattened = numbers.flatMap((number) => {
  return [number, number * 2];
});

console.log(doubledAndFlattened); // 输出: [1, 2, 2, 4, 3, 6]

注意事项

flatMap 方法不会改变原数组，而是返回一个新的数组。
flatMap 方法适用于需要对数组中的每个元素进行映射并扁平化结果的场景。

17. `entries` 方法

entries 方法返回一个数组迭代器对象，该对象包含数组中每个元素的键值对。

语法

array.entries();

示例

const numbers = [1, 2, 3];

const iterator = numbers.entries();

for (const [index, value] of iterator) {
  console.log(`Index: ${index}, Value: ${value}`);
}

输出

Index: 0, Value: 1
Index: 1, Value: 2
Index: 2, Value: 3

注意事项

entries 方法不会改变原数组。
entries 方法适用于需要遍历数组的键值对的场景。

18. `keys` 方法

keys 方法返回一个数组迭代器对象，该对象包含数组中每个元素的键（索引）。

语法

array.keys();

示例

const numbers = [1, 2, 3];

const iterator = numbers.keys();

for (const key of iterator) {
  console.log(`Key: ${key}`);
}

输出

Key: 0
Key: 1
Key: 2

注意事项

keys 方法不会改变原数组。 -

JavaScript中数组常用的迭代处理方法有哪些

JavaScript中数组常用的迭代处理方法有哪些

1. forEach 方法

语法

示例

输出

注意事项

2. map 方法

语法

示例

注意事项

3. filter 方法

语法

示例

注意事项

4. reduce 方法

语法

示例

注意事项

5. reduceRight 方法

语法

示例

注意事项

6. every 方法

语法

示例

注意事项

7. some 方法

语法

示例

注意事项

8. find 方法

语法

示例

注意事项

9. findIndex 方法

语法

示例

注意事项

10. includes 方法

语法

示例

注意事项

11. indexOf 方法

语法

示例

注意事项

12. lastIndexOf 方法

语法

示例

注意事项

13. sort 方法

语法

示例

注意事项

14. reverse 方法

语法

示例

注意事项

15. flat 方法

语法

示例

注意事项

16. flatMap 方法

语法

示例

注意事项

17. entries 方法

语法

示例

输出

注意事项

18. keys 方法

语法

示例

输出

注意事项

相关阅读

1. `forEach` 方法

2. `map` 方法

3. `filter` 方法

4. `reduce` 方法

5. `reduceRight` 方法

6. `every` 方法

7. `some` 方法

8. `find` 方法

9. `findIndex` 方法

10. `includes` 方法

11. `indexOf` 方法

12. `lastIndexOf` 方法

13. `sort` 方法

14. `reverse` 方法

15. `flat` 方法

16. `flatMap` 方法

17. `entries` 方法

18. `keys` 方法