vue reduce函数的使用

Posted 2023-03-18

参考技术A callback （执行数组中每个值的函数，包含四个参数）
initialValue （作为第一次调用 callback 的第一个参数。）

第一种写法

运行

①设置了初始值，所以pre初始为
②item为数组（即字符串）第一项 j
③pre[item] 记录每个元素出现的次数，第一次使用时无定义，输出为undefind，执行pre[item]=1；当元素第二次出现，pre[item]在该元素第一次出现时记录为，1所以执行 ++，变为2；以此类推

第二种写法

使用reduce函数返回一个数组

【中文标题】使用reduce函数返回一个数组

【英文标题】：Using the reduce function to return an array

【发布时间】：2016-05-27 15:46:37

【问题描述】：

为什么当我想在reduce函数中使用push函数返回一个新数组时出现错误。但是，当我在 reduce 函数中使用 concat 方法时，它返回一个新数组没有问题。

我要做的就是将一个数组传递给 reduce 函数并返回相同的数组。

var store = [0,1,2,3,4];

var stored = store.reduce(function(pV,cV,cI)
  console.log("pv: ", pV);
  return pV.push(cV);
,[]);

这会返回一个错误。但是当我使用 concat 时：

var store = [0,1,2,3,4];

var stored = store.reduce(function(pV,cV,cI)
  console.log("pv: ", pV);
  return pV.concat(cV);
,[]);

它返回相同的数组。

有什么想法吗？

【问题讨论】：

return PV.push 表示在下一次迭代中，PV 将是一个数字，而不是一个数组，因为 push 返回数组的长度 - 如果你愿意，你可以这样做 return pV.push(cV), pV; - 不过，有除了少了 1 行代码（即pV.push(cV); return pV;

）之外没有任何好处

如果您只想“复制”数组...var stored = store.slice(); 就可以了

@Andy 想详细说明一下吗？ docs literally 状态 map calls a provided callback function once for each element in an array, in order, and constructs a new array from the results 似乎完美地描述了提问者在做什么。

@Andy - 你可以用鞋跟把钉子钉在墙上 - 但通常我们更喜欢正确的工具来完成正确的工作！阅读这两种方法的文档，或者只是阅读下面的答案。

@Andy - 要将钉子钉在墙上，您需要的是锤子，而不是鞋子（同样适用）

【参考方案1】：

push 返回数组的新长度。

你需要的是最初提供的数组。

所以修改如下代码。

var store = [0, 1, 2, 3, 4];

var stored = store.reduce(function(pV, cV, cI)
  console.log("pv: ", pV);
  pV.push(cV);
  return pV; // *********  Important ******
, []);

concat 返回结合了所提供数组的元素和连接元素的新数组。所以它起作用了。

【参考方案2】：

为了完整起见，对于遇到此问题的下一个人，您所做的通常是通过map 实现的，如文档中所述

map 按顺序为数组中的每个元素调用一次提供的回调函数，并根据结果构造一个新数组

对比reduce的描述：

reduce() 方法对累加器和数组的每个值（从左到右）应用一个函数，以将其减少为单个值。

（强调我的）所以你看，虽然你可以操纵reduce来返回一个新的数组，它的一般用法是将一个数组减少为一个值。

所以对于您的代码，这将是：

var store = [0,1,2,3,4];

var stored = store.map(function(pV)
  console.log("pv: ", pV);
  return pV;
);

比尝试在reduce 函数中使用push 或concat 重构新数组要简单得多。

【讨论】：

有时，你想做一个.filter().map()，而不是 O(2N)，你可以通过使用 .reduce() 进行单次传递将工作减半，保持 O(N)。

我假设使用 ECMA 会像 store.map(it => return it);?

@fedorqui'SOstopharming' store.map(it => (it)) 也可以。

太棒了！虽然我想我会使用带有return 的版本，所以对我来说更容易理解:)

【参考方案3】：

我知道这是同一个答案，但我只是想表明，使用reduce ()，语法也可以使用 ES6 简化为一行代码：

var store = [0,1,2,3,4];

var stored = store.reduce((pV,cV) => [...pV, cV], []);

console.log(stored);

【参考方案4】：

Array.prototype.push 方法返回数组的新长度。

Array.prototype.concat 方法将新元素插入数组并返回数组，以便进一步处理。这就是你需要对 reduce 做的事情：在下一次迭代中传递修改后的数组。

【讨论】：

但不是同一个数组； concat 分配了一个效率低下的新数组。

【参考方案5】：

你总是可以使用解构：

var store = [0,1,2,3,4];

var stored = store.reduce(function(pV,cV,cI)
  console.log("pv: ", pV);
  return [...pV, cV];
,[]);

console.log(stored);

【参考方案6】：

如果您需要为每个迭代的项目返回一个包含多个项目的数组，reduce 会很有用；

var inputs = media.reduce((passedArray, video) => passedArray.push("-i"); passedArray.push(video.filepath); return passedArray; , []);

这里是用来构建 ffmpeg 的输入数组；

[名称：“bob”，文件路径：“1.mp4”，名称：“sue”，文件路径：“3.mp4”]

=> ["-i", "1.mp4", "-i", "2.mp4]