如何在地图之前删除重复的答案

【问题标题】：How to remove duplicated before map如何在地图之前删除重复的
【发布时间】：2019-11-01 20:30:05
【问题描述】：

[{
  "NS": "food",
  "Brand": "bosch",
  "legendKey": "5_1"
},
{
  "NS": "food",
  "Brand": "bosch",
  "legendKey": "5_1"
},
{
  "NS": "performance",
  "Brand": "ge",
  "legendKey": "4_2"
}]


<ul class="legend">Needstates
    {
    this.state.legend ? legend.map((ele, i) =>{
    return(
    <li>
    <span key={i} style={{backgroundColor:this.state.colors[ele['legendKey'][2]-1]}}></span> {ele['NS']}
    </li>
    )
    }
    ):
    null
    }
</ul>

这里我试图在 react.js 中映射上面的 json。但是根据 NS 密钥，其中一些是重复的。

删除重复项后如何映射。

请看一下

【问题讨论】：

Removing duplicate array values and then storing them [react]的可能重复
那是数组
我的是数组中的对象

标签： reactjs

【解决方案1】：

来源：https://dev.to/vuevixens/removing-duplicates-in-an-array-of-objects-in-js-with-sets-3fep

var x = [
    {
      "NS": "food",
      "Brand": "bosch",
      "legendKey": "5_1"
    },
    {
      "NS": "food",
      "Brand": "bosch",
      "legendKey": "5_1"
    },
    {
      "NS": "performance",
      "Brand": "ge",
      "legendKey": "4_2"
    }
  ];

  var unique = Array.from(new Set(x.map(a => a.NS))).map(NS => x.find(a => a.NS === NS));

  console.log(unique)

【讨论】：

【解决方案2】：

您可以过滤以获取唯一值，然后呈现您的数据

<ul class="legend">Needstates
  {
    this.state.legend ? this.state.legend.filter((item , index, arr) => arr.findIndex(obj => obj.NS === item.NS) == index).map((ele, i) =>{
      return(
        <li>
          <span key={i} style={{backgroundColor:this.state.colors[ele['legendKey'][2]-1]}}></span> {ele['NS']}
        </li>
      )
    }): null
  }
</ul>

【讨论】：

【解决方案3】：

解决方案 1：您可以更改属性必须检查唯一性的 keys 变量。

const keys = ['NS', 'Brand', 'legendKey']
const filtered = this.state.legend.filter(
  (s => o => 
    (k => !s.has(k) && s.add(k))
    (keys.map(k => o[k]).join('|'))
  )
  (new Set)
);

console.log(filtered);

输出：

[ { NS：“食物”，品牌：“博世”，legendKey：“5_1”}， { NS: 'performance', Brand: 'ge', legendKey: '4_2' } ]

解决方案 2：您可以使用像 lodash 这样的第三方库，它具有像 uniqWith 这样的功能。

【讨论】：

【解决方案4】：

我们将您的原始数据称为json 和您的独特项目unique。我们将通过评估是否已使用 Brand 和 NS 来检查是否存在重复。

    let json = [{
      "NS": "food",
      "Brand": "bosch",
      "legendKey": "5_1"
    },
    {
      "NS": "food",
      "Brand": "bosch",
      "legendKey": "5_1"
    },
    {
      "NS": "performance",
      "Brand": "ge",
      "legendKey": "4_2"
    }]
    
    let unique = []
    
    json.forEach((item) => {
    	var i = unique.findIndex((uniqueItem) => {
    		return uniqueItem.NS == item.NS && uniqueItem.Brand == item.Brand
    	})
    	if(i < 0){
    		unique.push(item)
    	}
    })
    
    console.log(unique)

干净利落地关注正在发生的事情。

我们有一个名为unique 的空[] 开始。
然后我们遍历json，for-each item，我们会检查里面 unique 查找匹配uniqueItem 的索引，使用 NS 和品牌作为参数。将该索引存储在名为 i 的变量中。
如果索引小于 0，则表示没有匹配项找到，这意味着它必须是原始的/或至少是第一个发生，所以我们将其推送到唯一的。
我们继续遍历json，现在如果找到匹配的项目，我们将获得 0 或更大的索引，这意味着它是重复的，所以我们不会对它做任何事情。

【讨论】：

【解决方案5】：

简单的例子：

    let things= [{
          "NS": "food",
          "Brand": "bosch",
          "legendKey": "5_1"
        },
        {
          "NS": "food",
          "Brand": "bosch",
          "legendKey": "5_1"
        },
        {
          "NS": "performance",
          "Brand": "ge",
          "legendKey": "4_2"
        }];
    
  let result =  [...new Set(things.map(s => JSON.stringify(s)))].map(s => JSON.parse(s));
console.log(result)

【讨论】：