在另一个数组内的数组中搜索对象的最佳/最有效方法是啥？

Posted 2023-02-16

【中文标题】在另一个数组内的数组中搜索对象的最佳/最有效方法是啥？

【英文标题】：What is the best/most efficient way to search for an object in an array inside another array?在另一个数组内的数组中搜索对象的最佳/最有效方法是什么？

【发布时间】：2019-01-14 20:33:48

【问题描述】：

我正在构建一个简单的应用程序来存储我去过的地方。我有一个使用 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)
)
  

【参考方案1】：

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

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

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

在同步函数内部。因此，您在发出 get 请求时正在重置状态。相反，您应该链接您的 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)
)

【参考方案2】：

第二个请求成功回调函数需要更新状态

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)
  )

)
  

为了高效的搜索方式

axios.get('http://localhost:3007/countries').then((countries) => 
    let visitedCountriesName = new Set(countries.data.map(country => country.name));
    updatedCountries = updatedCountries.map((country) => 
        if (visitedCountriesName.has(country.name)) country.visited = true
        return country
    );
    this.setState(countries: updatedCountries)
)

【讨论】：

太棒了，所以这只是一件小事。就效率而言，这是最好的方法吗？ （我会接受答案）