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中文网其他相关文章!