javascript - 在另一个数组中的数组中搜索对象的最佳/最有效方法是什么？

Question

我正在构建一个简单的应用程序来存储我去过的地方。我有一个使用 db.json 文件作为我的数据库的本地快速服务器。我正在提出 2 个请求并遇到问题。

我想做的是遍历两个数组，这样当应用加载时，我去过的国家就已经被预选了。这似乎是一个非常昂贵的调用，而且性能已经很慢了

此外，在我触发 DOM 的第二次重新渲染然后它更新之前，它实际上并没有做我想做的事情。

例如如果我在数据库中预先选择克罗地亚和法国，然后加载应用程序，则不会选择任何一个。但是如果我然后选择韩国(例如)然后在访问列表中，突然所有 3 个都可见

比较数组的更好方法是什么？考虑到对象键不一定相同

componentDidMount(){
axios.get('https://restcountries.eu/rest/v2/all').then((data) => {
  const updatedCountries = data.data.map((country) => {
    return {...country, visited: false, cities: [], showCities: false}
  })
  axios.get('http://localhost:3007/countries').then((countries) => {
    const visitedCountries = countries.data
    for (var i = 0; i < visitedCountries.length; i++){
      for (var k = 0; k < updatedCountries.length; k++){
        if(visitedCountries[i].name === updatedCountries[k].name){
          updatedCountries[k].visited = true
        }
      }
    }
  })
  this.setState({countries: updatedCountries})
})
  }

Answer 1

与其使用数组来存储更新后的国家/地区，不如使用对象。这样，您无需将 updatedCountries 的每个元素与 visitedCountries 的每个元素进行比较，而是可以进行持续查找。这会将您的查找速度从 (n*n) 更改为 (n)。

您最初没有看到任何更新的原因是因为您有一个异步调用:

axios.get('http://localhost:3007/countries')

同步函数内部。因此，您在发出获取请求时正在重置状态。相反，你应该像

这样链接你的 api 调用

axios.get('https://restcountries.eu/rest/v2/all').then((data) => {
  // edit data
  return axios.get('http://localhost:3007/countries')
}).then((data) => {
  // run function comparing both data
  this.setState({countries: updatedCountries})
})