减少对象数组，根据另一个数据只保留每个 id 的一个对象答案

【问题标题】：Reduce an array of objects an keep only one object of each id depending on another data减少对象数组，根据另一个数据只保留每个 id 的一个对象
【发布时间】：2022-09-22 21:00:27
【问题描述】：

我对编码很陌生，我正在解决一个问题。我无法完全理解 reduce 函数的工作原理。所以基本上我有一个主题对象数组，每个主题都包含一篇文章。当我点击一个按钮时，它会附加一个主题。我只需要在单击时附加文章，否则它将显示所有没有文章的主题。

let buttonValue = 1;

const topics = [{
    id: 1,
    article: {\"date\" : \"01-01-2022\", \"title\" : \"title1\", \"summary\" : \"summary1\"}
  },
  {
    id: 2,
    article: {\"date\" : \"01-01-2022\", \"title\" : \"title2\", \"summary\" : \"summary2\"}
  },
  
  {
    id: 3,
    article: {\"date\" : \"01-01-2022\", \"title\" : \"title3\", \"summary\" : \"summary3\"}
  },
  {
    id: 4,
    article: {\"date\" : \"01-01-2022\", \"title\" : \"title4\", \"summary\" : \"summary4\"}
  },{
    id: 1,
    article: {\"date\" : \"01-02-2022\", \"title\" : \"title5\", \"summary\" : \"summary5\"}
  },
  {
    id: 2,
    article: {\"date\" : \"01-02-2022\", \"title\" : \"title6\", \"summary\" : \"summary6\"}
  },
  {
    id: 3,
    article: {\"date\" : \"01-02-2022\", \"title\" : \"title7\", \"summary\" : \"summary7\"}
  },
  {
    id: 1,
    article: {\"date\" : \"01-02-2022\", \"title\" : \"title5\", \"summary\" : \"summary5\"}
  },
];

结果应该是：

const topics = [
  {
    id: 1,
    article: [{\"date\" : \"01-01-2022\", \"title\" : \"title1\", \"summary\" : \"summary1\"}, {\"date\" : \"01-02-2022\", \"title\" : \"title5\", \"summary\" : \"summary5\"}, {\"date\" : \"01-02-2022\", \"title\" : \"title5\", \"summary\" : \"summary5\"}]
 },
  {
    id: 4,
    article: {\"date\" : \"01-01-2022\", \"title\" : \"title4\", \"summary\" : \"summary4\"}
  },
  {
    id: 2,
    article: {\"date\" : \"01-02-2022\", \"title\" : \"title6\", \"summary\" : \"summary6\"}
  },
  {
    id: 3,
    article: {\"date\" : \"01-02-2022\", \"title\" : \"title7\", \"summary\" : \"summary7\"}
  },

];

这是我的代码：

const articleArray = topics.reduce((acc,cur) => {
  const found = acc.find(topic => topic.id == cur.id && topic.id === buttonValue);
  return found ? found.article.push(cur.article) : acc.push({...cur, article:[cur.article]}), acc;
}, []);

const uniqueTopic = Array.from(new Set(articleArray.map(topic => topic.id)))
 .map(id => {
   return articleArray.find(element => element.id === id)
 })

我很难理解reduce是如何工作的，因为当我控制台日志发现它返回未定义时。有人可以解释一下吗？没有uniqueTopic函数，有没有另一种直接累加和减少数组的方法？我试过了：

const reducedArr = topics.reduce((acc, cur) => {
  acc[cur.id] && (cur.id === buttonValue)
    ? (acc[cur.id].push({...cur, article:[cur.article]}))
    : (acc[cur.id] = cur);
  return acc;
}, {});

它返回未定义。

看看这篇文章可能会有所帮助stackoverflow.com/a/54901360/11120306
为什么 id: 2, 3 和 4 在结果中只有一个对象？

标签： javascript arrays object reduce

【解决方案1】：

我注意到的一个问题是没有初始化空数组来推送新项目。

试试这个来构建简化的数组：

const topics = [ { id: 1, article: { date: "01-01-2022", title: "title1", summary: "summary1" }, }, { id: 2, article: { date: "01-01-2022", title: "title2", summary: "summary2" }, }, { id: 3, article: { date: "01-01-2022", title: "title3", summary: "summary3" }, }, { id: 4, article: { date: "01-01-2022", title: "title4", summary: "summary4" }, }, { id: 1, article: { date: "01-02-2022", title: "title5", summary: "summary5" }, }, { id: 2, article: { date: "01-02-2022", title: "title6", summary: "summary6" }, }, { id: 3, article: { date: "01-02-2022", title: "title7", summary: "summary7" }, }, { id: 1, article: { date: "01-02-2022", title: "title5", summary: "summary5" }, }, ];

const reducedArr = Object.entries(
  topics.reduce((acc, cur) => {
    if (!acc[cur.id]) {
      acc[cur.id] = [];
    }
    acc[cur.id].push(cur.article);
    return acc;
  }, {})
).map(([id, articles]) => ({ id, articles }));

console.log(reducedArr);

【讨论】：