Question

我正在使用React，但概念是在javascript中。因此，为了简单起见，我希望能保留React代码。

我需要过滤掉两个数组。我的目标是映射数组并检查该对象的属性是否与另一个数组的对象中的属性匹配。

第一个数组如下所示：

[{id: 1}, {id: 2}, {id: 3}, {id: 4}]

第二个看起来像这样：

[{id: 3}, {id: 4}]

因此，如果一个对象具有与另一个数组中的对象相同的id属性，则返回一个react元素/任何内容。

这是我必须工作的东西，但它只通过索引并比较它们。这似乎在第一个数组上正确循环，但我似乎无法通过索引以外的任何东西遍历第二个数组。

return arr1.map((e, i) => {
  return if (e.id === arr2[i].id) {
    return <div>Match</div>
  } else {
    return <div>No Match</div>
  }
})

Answer 1

您可以在第一个数组上使用filter，在第二个数组上使用includes：

arr1
  .filter(e => arr2.map(e2 => e2.id).includes(e.id))
  .map(e => return (<div>Match</div>));

Answer 2

您的问题是您正在逐个索引进行比较。你想知道arr1中的元素是否在arr2中任何地方，对吧？

我会使用arr2.filter搜索所有arr2。所以你会有这样的事情：

return arr1.map((e1, i) => {
  if (arr2.filter(e2 => e2.id === e1.id).length > 0) {  // If there's a match
    return <div>Match</div>
  } else {
    return <div>No Match</div>
  }
})

更新：正如使用Array.some的评论中所建议的那样更好：

return arr1.map((e1, i) => {
  if (arr2.some(e2 => e2.id === e1.id)) {  // If there's a match
    return <div>Match</div>
  } else {
    return <div>No Match</div>
  }
})

Answer 3

你可以使用香草js。执行此循环时，请查看您正在进行的比较：

迭代（省略ID）： ArrayOne vs ArrayTwo

1与3
2与4
3与undefined进行比较（因为它要求undefined.id会出错）
4与undefined进行比较（因为它要求undefined.id会出错）

如果您的元素始终将按顺序排列，您可以遍历第一个数组并构建二进制搜索以快速查找第二个元素。这会使您的时间复杂度达到o(n * log(n))，并且从长远来看会更好。如果你只是想要击中MVP，你可以这样做：

const myFilter = (arrayOne, arrayTwo) => {
  return arrayOne.map((objectOne) => {

    // Using findIndex over includes to be able to pass callback
    // to compare the IDs
    // returns -1 if not found

    const matchIndex = arrayTwo.findIndex((objectTwo) => {
      return objectOne.id === objectTwo.id
    })


    if (matchIndex >= 0) {
      return <div> Match </div>
    } else {
      return <div> NoMatch </div>
    }

  })
}

此方法的时间复杂度为o(n^2)，但根据您的具体情况，这可能是最佳情况。您还可以使用临时数据结构（例如Set）获得o(n)空间权衡的o(n)时间。

比较两个数组中的对象并根据javascript中的匹配返回

3 个答案: