JavaScript -- 无法理解 Array.Map 和 Array.reduce答案

【问题标题】：JavaScript -- Unable to understand Array.Map & Array.reduceJavaScript -- 无法理解 Array.Map 和 Array.reduce
【发布时间】：2023-03-13 17:51:01
【问题描述】：

我一直在研究 FCC（免费代码营）的一个问题，该问题需要扫描二维数组并从每个一维数组中找到最大元素并将结果放入一维数组中。我在 GitHub 上遇到了这个解决方案，无法理解。

    function largestOfFour(arr) {
      return arr.map(function(group){
        return group.reduce(function(prev, current) {
          return (current > prev) ? current : prev;
        }, 0);
      });
    }
largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);

输出为 [5, 27, 39, 1001]

我的 console.log(arr) 给了我：4,5,1,3,13,27,18,26,32,35,37,39,1000,1001,857,1

当作为函数参数传递时，该二维数组是如何转换为一维数组的？

我的 console.log(group) 给了我：4、5、1、3（第一次）、13、27、18、26（第二次）、32、35、37、39（第三次）和 1000 , 1001, 857, 1（第四次）。

匿名函数如何能够将参数组作为 2D 中的单个 1D 数组。

有人可以帮忙吗？

【问题讨论】：

到底是什么问题？您是否根本不了解 map 和 reduce，或者它们在这里的使用方式？

标签： javascript arrays function

【解决方案1】：

例如，当您使用 Array.map 时，它将处理数组中的每个元素。

[1, 2, 3, 4].map(function (item) { return item; } );

将只返回一个带有 [1, 2, 3, 4] 的 new 数组，但假设我们将每个值加倍，我们可以这样做。

[1, 2, 3, 4].map(function (item) { return 2 * item; });

返回 [2, 4, 6, 8]。

所以在您的示例中，您有一个二维数组。 Array.map 在第一层工作。所以在每次迭代中，组是

1st -> [4, 5, 1, 3]
2nd -> [13, 27, 18, 26]
3rd -> [32, 35, 37, 39]
4th -> [1000, 1001, 857, 1]

所以第 1 到第 4 将被传递给 Array.reduce 函数。 Reduce 只是根据传入的数组返回单个值，或者更好地放

reduce() 方法对累加器和数组的每个值（从左到右）应用一个函数，以将其减少为单个值。 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

reduce 中发生的事情是存储最大值，它从 0 开始，在第一次迭代时与值 4 进行比较。由于 4 大于 0，它被存储并成为我们的新最大值。然后它针对 5 进行测试，当 5 大于 4 时，它会将其存储为新的最大值，依此类推。

一旦完成遍历，它就会为该数组生成一个最大值，并给出一个数字作为结果。所以现在将包含数组的映射的第一次迭代更改为数字，在这种情况下，Array.map 生成的数组的第一项应该是 5。

我怀疑的最终输出是

[5, 27, 39, 1001]

【讨论】：

非常感谢。

【解决方案2】：

array.map() 通过更改传递给它的数组的值返回一个新数组，在这种情况下，我们返回一个函数本身 (array.reduce)。

    arr.map(function(group))

arr.map 接收一个名为“组”的二维数组并读取其中的每个值，在本例中是另一个数组。所以在第一次运行'map'时，第一个数组是[4,5,1,3]，我们在它上面调用reduce。

    group.reduce(function(prev, current)

在第一次运行 'reduce' 时，我们有 prev = 4 和 current = 5（“它从第二个值开始”），然后在：

    return (current > prev) ? current : prev;

它要求 5 比 4 大吗？如果是，则返回 5，否则返回 4。所以它返回 5。5 然后传递到 'prev' 以用于下一次运行的 'reduce' 我们有 prev = 5（从上次运行) 和电流 = 1。

    return (1 > 5) ? 1 : 5;

它返回 5，因为它大于 1。

    return (3 > 5) ? 3 : 5;

返回5，因为它大于3。 group.reduce()结束，最终返回值'5'返回给arr.map()，整个第一个数组[4,5,1,3]是替换为单个值“5”。 arr.map() 的下一次运行从第二个数组 [13, 27, 18, 26] 开始。

我实际上在 freecodecamp 上做过这个问题，而且我不必使用 map 或 reduce。我刚刚通读了使用“double for loop / array.push / 返回数组”，尽管“map / reduce”更简洁，并且可能是一种更好的方法。希望能解释一下

【讨论】：