删除reduce函数输出中的重复项答案

【问题标题】：Remove duplicates within the output of a reduce function删除reduce函数输出中的重复项
【发布时间】：2020-05-14 05:07:56
【问题描述】：

当我的logo 的名称与projects 中的items 对象在reduce 函数的帮助下匹配时，我正在输出projects 的匹配值。但是，每当我点击多个与project.items 匹配的徽标时，我都会渲染重复项。

这是我的代码：

logos.reduce((acc, logo) => {
    if (logo.active) {
        Object.values(projects).forEach((proj) => {
           if (Object.values(proj.items).includes(logo.name)) {
              console.log(acc)
              acc.push((<Project title={proj.title} routeName={proj.routeName} items={proj.items} description={proj.description}/>));
           }
        });
    }
      return acc
}, [])

我的第一个想法是创建另一个数组，运行一个 for 循环并遍历这些值，例如：filteredValues[i].props.title，然后将该循环的内容推送到一个数组中。我像这样在该数组上运行reduce，但无法消除重复项：

const filteredArr = arr.reduce((acc, current) => {
  const x = acc.find(item => item.title === current.title);
  if (!x) {
    return acc.concat([current]);
  } else {
    return acc;
  }
}, []);

无论如何，这是我用来渲染我的Project 组件的acc 的输出

【问题讨论】：

标签： javascript arrays reactjs foreach mapreduce

【解决方案1】：

下面的代码可能是你需要的。

const filteredArr = this.getUnique(arr, 'title'); 

getUnique(arr, comp) {
   const unique =  arr.map(e => e[comp]).map((e, i, final) => final.indexOf(e) === i && i).filter((e) => arr[e]).map(e => arr[e]);

   return unique;
}

涉及的步骤是：

将比较值存储在数组“arr.map(e => e[comp])”中
存储唯一对象的索引 ".....).map((e, i, final) => final.indexOf(e) === i && i)"
消除错误索引并返回唯一对象“.....).filter((e) => arr[e]).map(e => arr[e])”

【讨论】：

【解决方案2】：

你可以这样写你的原始循环

logos
  .reduce((acc, logo) => {
    if (logo.active) {
      Object.values(projects).forEach((proj) => {
        if (
          Object.values(proj.items).includes(logo.name) &&
          !acc.find((item) => item.value === logo.name)
        ) {
          console.log(acc);
          acc.push({
            value: logo.name,
            component: (
              <Project
                title={proj.title}
                routeName={proj.routeName}
                items={proj.items}
                description={proj.description}
              />
            ),
          });
        }
      });
    }
    return acc;
  }, [])
  .map((values) => values.component);

【讨论】：

【解决方案3】：

您可以使用Map 对象过滤掉重复项。

let arrFiltered = [];

// form map of unique arr items
const arrMap = new Map();
arr.forEach(item => arrMap.set(item.title, item));

// form array of all items in map
arrMap.forEach(item => arrFiltered.push(item));

【讨论】：

【解决方案4】：

我必须在原始 forEach 循环之外运行 reduce 函数，并使用 some 函数检查这些值。

    logos.reduce((acc, logo) => {
      if (logo.active) {
          Object.values(projects).forEach((proj) => {
             if (Object.values(proj.items).includes(logo.name)) {
               console.log(acc)

               acc.push((<Project title={proj.title} routeName={proj.routeName} items={proj.items} description={proj.description}/>));
             }
          });
          acc = acc.reduce(function (p, c) {
            if (!p.some(function (el) { return el.props.title === c.props.title; })) p.push(c);
            return p;
          }, []);
      }
        return acc
  }, [])

【讨论】：