首页 > web前端 > js教程 > 理解JS中的数组迭代器方法:filter、map和reduce

理解JS中的数组迭代器方法:filter、map和reduce

王林
发布: 2024-07-22 21:08:12
原创
889 人浏览过

Understanding Array Iterator Methods in JS: filter, map, and reduce

JavaScript 具有用于数组转换的内置迭代方法。我们来分析一下filter()、map()、reduce()以及它们的使用条件。

Array.filter()

它创建一个新数组,其中包含通过所提供函数实现的测试的所有元素。 它为数组中的每个元素调用一次提供的回调函数,并返回回调函数返回 true 的所有值的新数组。

语法

filter(callbackFn)
filter(callbackFn, thisArg)
登录后复制

其计算结果为:Array.filter((element, index, array) => { ... } )

callbackFn 是一个为数组中的每个元素执行的函数,它应该返回一个 true 值以保留结果数组的元素,否则返回 false 值。该函数接受三个参数:当前元素、索引和数组本身。

在下面的示例中,给定一个数字数组并期望找到偶数,filter() 方法的使用如下所示:

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // Output: [2, 4, 6]
登录后复制

Array.map()

map() 方法创建一个新数组,其中填充了对当前数组中每个元素调用所提供函数的结果。它仅对已赋值的数组索引调用回调函数,对空槽不调用回调函数。

语法

map(callbackFn)
map(callbackFn, thisArg)
登录后复制

这简单地翻译为:Arrays.map((element, index, array) => { ... })

callbackFn 是一个对数组中的每个元素执行的函数,返回值将作为单个元素添加到新数组中。
该函数接受三个参数:当前元素、索引和数组本身。

给定一个数字数组并期望返回它们的平方,map() 方法将是最有效的,如下所示:

const numbers = [1, 2, 3, 4, 5];
const squareNumbers = numbers.map(number => number ** 2);
console.log(squareNumbers); // Output: [1, 4, 9, 16, 25]
登录后复制

我们正在将一个数组的值映射到另一个数组。

Array.reduce()
reduce() 方法按升序索引顺序对数组的每个元素运行回调函数缩减器,并传入前一个元素计算的返回值。在所有数组元素上运行减速器的最终结果是单个值。

如果提供了初始值,它将用作回调的第一次调用中的第一个参数。如果没有提供初始值,则使用数组的第一个元素作为初始值,然后从第二个元素开始迭代。

语法

reduce(callbackFn)
reduce(callbackFn, initialValue)
登录后复制

callbackFn 是对数组中的每个元素执行的函数。它的返回值将成为下次调用回调时累加器参数的值。对于最后一次调用,返回值成为reduce()函数的返回值。
它采用以下参数:累加器、currentValue、currentIndex 和调用它的数组。

使用数字数组并负责查找它们的总和,reduce() 方法可以轻松地对其进行评估,如下所示:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // Output: 15
登录后复制

结论
这些方法filter()、map()和reduce()对于数组迭代和操作是必不可少的。

  • filter() 最适合查找给定数组中满足回调函数条件的所有元素。

  • map() 是一种非破坏性数组方法,最适合用于操作给定数组中的数据并期望返回值。

  • reduce() 对于基于缩减函数将数组元素聚合为单个值非常有用。

参考文献

  • Array.prototype.filter 上的 MDN Web 文档

  • Array.prototype.map 上的 MDN Web 文档

  • Array.prototype.reduce 上的 MDN Web 文档

以上是理解JS中的数组迭代器方法:filter、map和reduce的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板