使用 React JS 计算字符串数组中的重复项答案

【问题标题】：Count the duplicates in a string array using React JS使用 React JS 计算字符串数组中的重复项
【发布时间】：2021-06-29 21:10:48
【问题描述】：

以下是我实现的代码，用于在 React 应用程序中使用图表 js 创建条形图。在这里，它创建了一个条形图，其中包含数组中的所有数据。但是，我只想更改此代码以在 x 轴 - 目标，y 轴 - 上给出输出 - 不。这个目的地的发生率，因为它有许多重复的目的地。我为此搜索了方法，但找不到正确的解决方案。谁能帮我做这件事？

const dataArrayY4 = [];
res.data.map(item => {
  dataArrayY4.push(item.time)
})
const dataArrayX4 = []
res.data.map(item => {
  dataArrayX4.push(item.destination)
})
this.setState({
  data4: dataArrayY4,
  labels4: dataArrayX4,
});

【问题讨论】：

问题。 dataArrayY4 如何表示出现次数？您是在寻找一个值还是多个值的出现？
在一个值上。就像如果目的地是斯里兰卡并且它在数组中出现了 5 次，那么 dataArrayY4 是 5 而 dataArrayX4 是斯里兰卡

标签： arrays reactjs sorting chart.js react-chartjs

【解决方案1】：

这可以按如下方式完成：

const res = {
  data: [
    { time: 1, destination: 'A'},
    { time: 3, destination: 'A'},
    { time: 2, destination: 'B'}    
  ]
};

let tmp4 = [];
res.data.map((o, i) => {
  const existing = tmp4.find(e => e.destination == o.destination);
  if (existing) {
    existing.time += o.time;
  } else {
    tmp4.push({time: o.time, destination: o.destination});
  }
})

this.setState({
  data4: tmp.map(o => o.time);
  labels4: tmp.map(o => o.destination);
});

上面的代码可以通过使用Array.reduce()而不是Array.map()来进一步优化。

【讨论】：

【解决方案2】：

我会让代码更有效率。 dataArrayY4 不是一个数组，而是一个对象，它具有一个键值和每个值的出现次数。这样就可以统计 res.data 中所有项的所有出现次数

const dataArrayY4 = {};
res.data.map(item => {
     dataArrayY4[item.destination] = (dataArrayY4[item.destination] || 0) + 1
 })
 
const dataArrayX4 = []
 res.data.forEach(item => {
    dataArrayX4.push(item.destination)
 })
this.setState({
    data4: dataArrayY4,
      labels4: dataArrayX4,
 });

然后，如果您想查找特定值的出现，您使用这个例如。斯里兰卡

this.state.data4['Sri Lanka']

【讨论】：