JavaScript - 使用 es6 从对象数组中计算和删除重复项答案

【问题标题】：JavaScript - Count and remove duplicates from array of objects with es6JavaScript - 使用 es6 从对象数组中计算和删除重复项
【发布时间】：2018-06-02 10:35:42
【问题描述】：

我正在尝试解决此问题，但我有点卡住了，需要一些帮助/建议。我正在尝试更好地了解 es6，但我不知道解决问题的最佳方法是什么。

我正在获取一个大的 json，看起来有点像这样：

[
    {
        "company": "Google",
        "location": "USA",
        "email": null
    },
    {
        "company": "Microsoft",
        "location": "USA",
        "email": "mail@mail.com"
    },
    {
        "company": "Google",
        "location": "NLD",
        "email": "mail@mail.com"
    }
]

我在表格中显示这些并想添加复选框过滤器，但我还想在它旁边添加一个计数，如下所示：

[x] Google (2)
[ ] Microsoft (1)
// other function call
[ ] mail@mail.com (2)

我有这个函数，我调用每个键（公司、位置、电子邮件）：

function filterArr(data, key) {

    data.forEach(element => {

        let countedData = data.filter((el) => {
            return el[key] == element[key]
        }).length;
// console.log(element[key] + ": " + countedData);
    });

    data = data.filter((item, index, self) => self.findIndex( t => t[key] === item[key] && item[key] != null) === index )
// console.log(data)
    return data;
}

filterArr(data, "company");

我试图用上述函数实现的输出是：谷歌：2 微软：1

foreach 正确计算了键值，但显然记录了以下内容：谷歌：2 微软：1 谷歌：2

过滤器 console.log 显示 Google 和 Microsoft（只要一次，就像我想要的那样 :)

现在我需要将这两个结合起来，但我不确定如何以及最好的方法是什么。（见我的小提琴：https://jsfiddle.net/z359qo1d/）

你知道下一步该做什么吗？

【问题讨论】：

标签： javascript arrays filter ecmascript-6

【解决方案1】：

Array.prototype.reduce 是你想要的完美匹配

function filterArr(data, key){
  return data.reduce( (result, current) => {
    if(!result[current[key]]){
      result[current[key]] = 1;
    } else {
      result[current[key]] += 1;
    }
    return result;    
  }, {})
}

上面会返回一个像这样的对象

{
  Google: 2,
  Microsoft: 1
}

【讨论】：

我最喜欢的答案。将if(!result[current[key]]) 替换为if(! (current[key] in result) )，否则我猜计数器永远不会增加...
@RaphaMex 很好。更新所以我初始化为 1 而不是 0
谢谢！像魅力一样工作，以为我自己几乎得到了解决方案，但这很好用！

【解决方案2】：

我会做一些不同的事情：

let _in = [
{
    "company": "Google",
    "location": "USA",
    "email": null
},
{
    "company": "Microsoft",
    "location": "USA",
    "email": "mail@mail.com"
},
{
    "company": "Google",
    "location": "NLD",
    "email": "mail@mail.com"
}
]

function countEm(accum, each) {
  if (! accum[each.company] )
    accum[each.company] = 0
  accum[each.company] += 1
  return accum
}

console.log(_in.reduce(countEm, {}))

【讨论】：

【解决方案3】：

Array.prototype.forEach = async function forEach(callback, thisArg) {
  if (typeof callback !== "function") {
    throw new TypeError(callback + " is not a function");
  }
  var array = this;
  thisArg = thisArg || this;
  for (var i = 0, l = array.length; i !== l; ++i) {
    await callback.call(thisArg, array[i], i, array);
  }
};

资料来源：Francesco Marassi

https://francesco.space/blog/2020-04-22-why-isnt-async-await-working-in-a-foreach-cycle/

【讨论】：