Javascript 中嵌套 for 循环的替代方案答案

【问题标题】：Alternatives to nested for loops in JavascriptJavascript 中嵌套 for 循环的替代方案
【发布时间】：2020-01-15 14:47:41
【问题描述】：

我需要获取数组 1 中的一个元素，并将其与数组 2 中的每个其他元素进行比较，以查看是否匹配。我需要对数组一中的每个元素执行此操作。

for ( let i = 0, j = userArray.length; i < j; i++) {
            for ( let c = 0, d = userArray.length; c < d; c++) {
              object = {
                id: userArray[i].account,
                name: userArray[i].name,
                title: "",
                rating: ""
              }

              if ( userArray[i].account === accountArray[c].id) {

                object.title = accountArray[c].title.title

              }

              if (object.title !== ""){
                objectArray.push(object)

              }

            }

          }

有没有更有效的方法。

期望的结果是将 accountArray 的每个元素与 userArray 的每个单独元素进行比较以搜索匹配项

【问题讨论】：

看起来您的意思是让其中一个循环遍历 accountArray 数组。考虑到用法，可能是内部循环。
它实际上在 if 语句中迭代了帐户数组，因为我只是在索引中使用计数器！ :)
内层循环会根据userArray的长度继续，貌似是不正确的。如果数组的长度不同，您将遇到异常（userArray 比 accountArray 长）或者您将错过 accountArray 中的元素（userArray 比 accountArray 短）。
两个数组的长度相同，但适当指出并会修改，谢谢

标签： javascript reactjs loops for-loop nested

【解决方案1】：

您可以使用数组reduce() 方法将您的userArray 过滤并映射到具有组合结果的新数组中。

这是一个示例（带有存根数据）：

const userArray = [
  { account: 1, name: 'user 1' },
  { account: 2, name: 'user 2' },
  { account: 3, name: 'user 3' },
  { account: 4, name: 'user 4' },
  { account: 5, name: 'user 5' }
];

const accountArray = [
  { id: 1, name: 'account 1', title: 'account 1 title' },
  { id: 3, name: 'account 3', title: 'account 3 title' },
  { id: 5, name: 'account 5', title: 'account 5 title' }
];

const mergedList = userArray.reduce((acc, u) => {
  const account = accountArray.find(a => a.id === u.account);
  
  if (account) {
    acc.push({ 
      id: u.account,
      name: u.name,
      title: account.title,
      rating: ''
    })
  }
  
  return acc;
}, []);

console.log(mergedList);

您可以阅读有关reduce() 方法和find() 方法的信息。

【讨论】：

赞成归零。我真的很想听到更多。
为什么不用 map 而不是 reduce？最后，我们循环遍历一个数组，然后在每个元素上使用.find 进行另一个循环。 ?
@Ajay -- 对我来说，map() 将如何做到这一点对我来说并不明显。发表您的建议作为答案，我会看看。

【解决方案2】：

您可以使用 Array.find 或 Array.filter

Array.find - 返回第一个匹配的元素

array.find(item => item.id === 1)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

Array.filter - 返回所有匹配元素的数组

array.filter(item => item.id === 1)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

希望对你有帮助！

【讨论】：