设为首页收藏本站
开启辅助访问
JS filter、map、reduce等十三种遍历数组方法详细总结🔥 您所在的位置：网站首页 › 如何遍历字符串数组 › JS filter、map、reduce等十三种遍历数组方法详细总结🔥

JS filter、map、reduce等十三种遍历数组方法详细总结🔥

2024-01-19 06:52| 来源: 网络整理| 查看: 265

我正在参加「掘金·启航计划」

前言

在日常工作中，无论是原生开发还是使用如 vue、react 等框架开发，使用 数组 遍历操作数据都是十分频繁的，因此，本文总结一下，方便自己和大家参考。内容较多，可以点赞+收藏，方便使用时查阅！

前置知识补充 1. 什么是JS迭代方法？

JS迭代方法可以被视为一种更简洁和功能丰富的遍历循环方式。它们提供了一种更高级、更抽象的方法来处理数组或类数组对象的元素，而无需使用传统的for循环或while循环。

迭代方法封装了遍历的逻辑，并提供了更多的操作选项，例如映射、筛选、聚合等，使代码更易读、简洁，并且能够以函数式编程的方式来处理数据。

2. 什么是高阶函数？

高阶函数是指能够接受一个或多个函数作为参数，并返回一个新函数作为结果的函数。将函数作为数据进行操作，使得函数具有更高的抽象和灵活性，简而言之，高阶函数是能够操作其他函数的函数。

// 高阶函数示例：接受函数作为参数 function greet(name, callback) { const message = `Hello, ${name}!`; callback(message); } // 回调函数 function printMessage(message) { console.log(message); } // 调用高阶函数，并传递回调函数作为参数 greet('John', printMessage); 遍历方法目录 for循环（稍许繁琐，可中断和跳过） for-of（简化for循环，更加灵活，无需索引） forEach (适合对每个元素执行操作，没有返回值) some（检查数组中是否至少存在一个元素满足指定的条件） every（检查数组中的所有元素是否都满足指定的条件） filter（根据指定的条件筛选出数组中满足条件的元素） find（查找满足指定条件的第一个元素） findIndex（查找满足指定条件的第一个元素索引） findLast（查找满足指定条件的最后一个元素） findLastIndex（查找满足指定条件的最后一个元素索引） map（数据不符合展示要求，需要处理时） reduce（强大灵活: 数值计算、数组变换、扁平化数组...） reduceRight（跟上面方法区别就是从后往前遍历） 1. for循环

for 循环对数组进行遍历是最常见和最基本的方法之一,虽然简单灵活但是语法冗长，容易出错，可读性也不高。现在基本被高阶函数替代,如 forEach、map、filter、reduce

示例:

const array = [1, 2, 3]; for (let i = 0; i < array.length; i++) { console.log(array[i]); } 2. for-of

for...of 语句用于遍历可迭代对象,它提供了一种更简单和直观的方式来迭代元素，而无需使用索引

示例:

// 迭代映射对象 const map = new Map([["name", "John"], ["age", 30]]); for (const [key, value] of map) { console.log(key, value); } // name John // age 30 3. forEach* 参数: forEach(callbackFn[, thisArg])，接受一个回调函数作为参数，回调函数可以接受三个参数：element正在处理的当前元素。、index当前元素的索引、array被遍历的数组。 返回值: undefined 是否改变原数组: 可以改变原数组 使用时机: 用于对数组中的每个元素执行指定的操作

特性:

除非抛出异常，否则没有办法停止或中断，不能使用break 会报错 不可以直接修改元素，但是可以修改元素的属性

示例:

const numbers = [1, 2, 3, 4, 5]; // 除非抛出异常，否则没有办法停止或中断。不能使用break。返回值为undefined const value = numbers.forEach((item, index, arr) => { console.log(item, index, arr)å // if(item === 2) break; // 报错 SyntaxError: Illegal break statement return item // 无效 }) // 不可以直接修改元素，但是可以修改元素的属性 numbers.forEach((item, index, arr) => { item = item * 2; // 这里只是修改了形参item的值，并不会修改原数组 arr[index] = item * 2; // 通过修改属性修改原数组值 }) 4. some 参数: some(callbackFn[, thisArg])，接受一个回调函数作为参数，回调函数可以接受三个参数：element正在处理的当前元素。、index当前元素的索引、array被遍历的数组。 返回值: true|false 是否改变原数组:不改变原数组 使用时机: 用于检查数组中是否至少存在一个元素满足指定的条件

特性:

除非抛出异常或者返回 true ，否则没有办法停止或中断，不能使用break 会报错 如果有一个元素符合条件，则循环不再继续，直接返回 true,否则返回 false

示例:

const numbers = [1, 2, 3, -4, 5]; const hasNegative = numbers.some(num => num < 0); console.log(hasNegative); 5. every 参数: every(callbackFn[, thisArg])，接受一个回调函数作为参数，回调函数可以接受三个参数：element正在处理的当前元素。、index当前元素的索引、array被遍历的数组。 返回值: true|false 是否改变原数组: 不改变原数组 使用时机: 用于检查数组中的所有元素是否都满足指定的条件

特性:

除非抛出异常或者返回 false ，否则没有办法停止或中断，不能使用break 会报错 如果有一个元素不符合条件，则循环不再继续，直接返回 false,否则返回 true

示例:

// 必须都满足才返回true，否则立刻终止循环 const numbers = [1, 2, 3, 4, 5]; const allPositive = numbers.every(num => num > 0); console.log(allPositive); // true // 数组排序判断：在对数组进行排序或筛选时，可以使用 `every` 方法进行判断。 // 例如，检查数组是否已按升序排序。 const sortedNumbers = [1, 2, 3, 4, 5]; const isSortedAscending = sortedNumbers.every((num, index, arr) => { if (index === 0) { return true; } return num >= arr[index - 1]; }); console.log(isSortedAscending); // true

some 和 every 刚好相反

some 只要有一个符合条件的就返回 true

every 必须全部满足条件才返回 true

6. filter* 参数: filter(callbackFn[, thisArg])，接受一个回调函数作为参数，回调函数可以接受三个参数：element正在处理的当前元素。、index当前元素的索引、array被遍历的数组。 返回值: []|[...ele] 是否改变原数组: 不改变原数组 使用时机: 用于根据指定的条件筛选出数组中满足条件的元素

特性:

除非抛出异常，否则没有办法停止或中断，不能使用break 会报错 筛选掉不符合条件的元素，返回符合条件的元素

示例:

const numbers = [1, 2, 3, 4, 5]; const evenNumbers = numbers.filter(num => num % 2 === 0); console.log(evenNumbers); // [2, 4] // 对象属性筛选,筛选出成年用户 const users = [ { name: 'John', age: 25 }, { name: 'Jane', age: 18 }, { name: 'Bob', age: 30 } ]; const adultUsers = users.filter(user => user.age >= 18); console.log(adultUsers); // [{ name: 'John', age: 25 }, { name: 'Jane', age: 18 }, { name: 'Bob', age: 30 }] 7. find 参数: find(callbackFn[, thisArg])，接受一个回调函数作为参数，回调函数可以接受三个参数：element正在处理的当前元素。、index当前元素的索引、array被遍历的数组。 返回值: undefined|符合条件的元素 是否改变原数组: 不改变原数组 使用时机: 用于在数组中查找满足指定条件的第一个元素

特性:

除非抛出异常或者找到 符合条件的元素 ，否则没有办法停止或中断，不能使用break 会报错 找到第一个符合条件的元素返回并中断循环，否则所有元素都循环一遍，返回undefined

示例:

const numbers = [1, 2, 3, -4, 5]; const negativeNumber = numbers.find(num => num < 0); console.log(negativeNumber); // -4 const users = [ { name: 'John', age: 25 }, { name: 'Jane', age: 18 }, { name: 'Bob', age: 30 } ]; const user = users.find(user => user.name === '张三'); console.log(user); // undefined

filter 和 find的区别(面试考点*):

返回值:

filter函数：返回一个由满足条件的元素组成的新数组，如果没有元素满足条件，则返回空数组。

find函数：返回满足条件的第一个元素，如果没有找到满足条件的元素，则返回undefined。

用途:

filter函数：用于筛选出数组中符合条件的元素，并返回一个新数组。适用于需要筛选多个元素的情况。 find函数：用于查找数组中满足条件的第一个元素，并返回该元素。适用于查找单个元素的情况。 8. findIndex

和 find类似。只不过是查找元素下标，没有找到符合条件的就返回 -1

示例:

const array = [1, 2, 3, 4, 5]; const foundIndex = array.findIndex((element) => element > 3); const noIndex = array.findIndex((element) => element > 10); console.log(foundIndex); // 输出结果：3 console.log(noIndex); // 输出结果：-1 9. findLast

findLast 方法用于在数组中从后往前查找满足条件的元素，并返回该元素。和 find 方法类似，但是从数组的末尾开始搜索，找到满足条件的最后一个元素

应用场景：

查找数组中的最后一个满足特定条件的元素。 需要从数组的末尾开始搜索并获取满足条件的元素。

示例:

const numbers = [1, 2, 3, 4, 5]; const lastEvenNumber = numbers.findLast(num => num % 2 === 0); console.log(lastEvenNumber); // 4 10. findLastIndex

findLastIndex 方法用于在数组中从后往前查找满足条件的元素，并返回该元素的索引。和 findIndex 方法类似，但是从数组的末尾开始搜索，找到满足条件的最后一个元素的索引。

应用场景：

查找数组中最后一个满足特定条件的元素的索引。 需要从数组的末尾开始搜索并获取满足条件的元素的索引。

注意： 找到的最后一个满足条件的索引不是从数组末尾开始的，而是从数组第一个元素开始的索引

示例:

const numbers = [1, 2, 3, 4, 5]; const lastEvenNumberIndex = numbers.findLastIndex(num => num === 4); console.log(lastEvenNumberIndex); // 3 11. map* 参数: map(callbackFn[, thisArg])，接受一个回调函数作为参数，回调函数可以接受三个参数：element正在处理的当前元素。、index当前元素的索引、array被遍历的数组。 返回值: 返回一个新数组，该数组由回调函数的返回值组成。 是否改变原数组: 不改变原数组 使用时机: 返回的数据不符合我们的要求，可以使用 map 把数据处理成我们想要的

特性:

数组长度保持一致：新数组的长度与原数组相同，每个元素对应原数组中的一个元素。新数组元素受返回值影响 除非抛出异常，否则没有办法停止或中断，不能使用break 会报错

示例:

const fruits = ['apple', 'banana', 'orange']; const capitalizedFruits = fruits.map(fruit => fruit.toUpperCase()); console.log(capitalizedFruits); // ['APPLE', 'BANANA', 'ORANGE'] 12. reduce* 参数: 接收两个参数 参数一：是一个函数，函数有四个参数，分别是：上一次的值，当前值，当前值的索引，数组 参数二：可选的基底值，可以设置一个数字参与求和运算 返回值: 最终累积结果：reduce方法返回最终的累积结果，可以是任意数据类型，如数字、字符串、对象或数组。 是否改变原数组: 不改变原数组 使用时机: 用于各种集合处理和聚合的情况,可以根据需求定义自定义的合并操作 const count = [0, 1, 2, 3, 4].reduce((prev, curr, index, array) => prev + curr); console.log(count); // 10

callback 被调用四次，每次调用的参数和返回值如下表：

2858557191184d6d9e29fc1a010a126b.png

如果你打算提供一个初始值作为reduce()方法的第二个参数，以下是运行过程及结果：

const count = [0, 1, 2, 3, 4].reduce((prev, curr, index, array) => prev + curr, 10); console.log(count); // 20

5e47bd51c93140b6ac46c78fedac4564.png

应用1: 求和

const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((acc, curr) => acc + curr, 0); console.log(sum); // 15

应用2: 数组扁平化

const nestedArray = [[1, 2], [3, 4], [5, 6]]; const flattenedArray = nestedArray.reduce((acc, curr) => acc.concat(curr), []); console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]

应用3: 数组元素的最大值和最小值

const numbers = [10, 5, 8, 3, 12]; const maxNumber = numbers.reduce((max, curr) => Math.max(max, curr), Number.MIN_SAFE_INTEGER); console.log(maxNumber); // 12 const minNumber = numbers.reduce((min, curr) => Math.min(min, curr), Number.MAX_SAFE_INTEGER); console.log(minNumber); // 3

应用4:求平均值

const scores = [85, 90, 76, 92, 88]; const averageScore = scores.reduce((sum, curr) => sum + curr, 0) / scores.length; console.log(averageScore); // 86.2 13. reduceRight

reduceRight 和 reduce 都是对数组元素进行累计操作，这两个之间的区别在于迭代方向，reduce 从数组左侧开始迭代，reduceRight从数组右侧。

reduceRight 需要从数组的尾部开始处理元素以满足特定的需求，如字符串反转，处理树结构等...

应用1: 字符串反转

const str = 'Hello, World!'; const reversedStr = [...str].reduceRight((acc, curr) => acc + curr, ''); console.log(reversedStr); // "!dlroW ,olleH"

应用2: 扁平化树结构

const tree = { name: 'A', children: [ { name: 'B', children: [ { name: 'D', children: [] }, { name: 'E', children: [] } ] }, { name: 'C', children: [] } ] }; function flattenTree(tree) { return [tree, ...tree.children.reduceRight((acc, curr) => { return [...acc, ...flattenTree(curr)]; }, [])]; } const flattenedTree = flattenTree(tree); console.log(flattenedTree); // [ // { name: 'A', children: [...] }, // { name: 'B', children: [...] }, // { name: 'D', children: [] }, // { name: 'E', children: [] }, // { name: 'C', children: [] } // ] 总结🎉

特定的循环，并且需要中断和跳过可使用 for

无需返回值可使用 forEach、for...of

检查是否满足指定条件而无需使用元素可使用 some、every

筛选符合条件的元素可使用filter、find、findLast

找到符合条件的元素索引可使用 findIndex、findLastIndex

需要对不符合展示条件的数据继续再处理时可使用map

需要依赖数组元素上次结果，如累计可使用 reduce、reduceRight



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有