循环遍历 2 个数组答案

【问题标题】：looping through 2 arrays循环遍历 2 个数组
【发布时间】：2018-12-11 06:07:10
【问题描述】：

我正在尝试遍历 2 个数组。第一个数组是链接名称，第二个数组是链接“a”值。我想遍历两个数组，将第二个数组的值附加到在第一个数组中创建的每个链接的 href /。这就是我所拥有的，它对我不起作用。

const links = ['Home', 'Contact', 'About'];
const hrefLinks = ['/', 'contact', 'about'];

for (let i = 0; i < links.length; i++) {
    for (let j = 0; j < hrefLinks.length; i++) {
        if (links.length === hrefLinks.length) {
            const li = document.createElement('li');
            const liLink = document.createElement('a');
            liLink.setAttribute('href', hrefLinks[i]);
            liLink.className = 'Test-Class';
            li.appendChild(liLink);
            li.className = 'nav-link';
            list.appendChild(li);
            li.innerHTML += links[i];
        }
    }
}

我确实让它与一个 forEach 循环一起工作，但对如何嵌套第二个 forEach 感到困惑；

const links = ['Home', 'Contact', 'About'];
const hrefLinks = ['/', 'contact', 'about'];

 links.forEach(function (link) {
     const li = document.createElement('li');
     const liLink = document.createElement('a');
     li.appendChild(liLink);
     li.className = 'nav-link';
     list.appendChild(li);
     li.innerHTML += link;
 });

这是执行此操作的正确方法还是有更简单/更清洁的方法？

【问题讨论】：

你能把你第一段的第三句话写得更清楚吗？更清楚地说明你想要什么。
你在用jquery吗？
@RobertHarvey 已更改
@azad 不，我不是纯 Js

标签： javascript html for-loop foreach

【解决方案1】：

您不需要嵌套循环 - 您只需将 links 中的 ith 项链接到 hrefLinks 的 ith 项即可。使用forEach，您只需使用回调的第二个参数即可做到这一点，它将引用当前正在迭代的索引：

const list = document.body.appendChild(document.createElement('ul'));


const links = ['Home', 'Contact', 'About'];
const hrefLinks = ['/', 'contact', 'about'];

links.forEach((linkName, i) => {
  const li = document.createElement('li');
  const a = document.createElement('a');
  a.href = hrefLinks[i];
  a.textContent = linkName;
  li.appendChild(a);
  li.className = 'nav-link';
  list.appendChild(li);
});

【讨论】：

“你不想要嵌套循环” - 请详细说明。性能方面，for 循环比forEach 循环快得多。所以我想知道为什么应该避免它？
@icecub 没有必要将每个 links 项目与每个 hrefLinks 项目 (O(N^2)) 一起使用，因此嵌套循环没有意义。嵌套循环（无论是for 还是forEach）都不会完成任何有用的事情。虽然for 循环比forEach 和其他数组方法快，但数组方法使代码更简洁：功能更多、自动抽象、无需手动迭代、没有提升问题（如果代码在 ES5 中），等
@icecub 如果每个项目都必须对另一个数组中的每个项目做某事，那么嵌套循环将很有用，例如在这里，如果有人想要['Home-/', 'Home-contact', 'Home-about', 'Contact-/', 'Contact-contact', ...]
感谢您的解释。我没有看到更大的画面，所以你们，现在有道理了:)
@icecub 这很可能是我糟糕的解释。我对这一切仍然很菜鸟，所以我不太清楚如何正确解释事情

【解决方案2】：

创建一个包含链接名称和 url 的对象数组，然后您可以迭代该对象以将锚元素添加到您的 dom 中，如下所示

//an object which hold navigation url and name
var navLinks = [{
  label: 'Home',
  href: '/'
}, {
  label: 'Contact',
  href: 'contact'
}, {
  label: 'About',
  href: 'about'
}]

navLinks.forEach(function(link) {

  var li = document.createElement('li');
  li.className = 'nav-link';

  var liLink = document.createElement('a');
  var linkText = document.createTextNode(link.label);
  liLink.appendChild(linkText);
  liLink.className = 'Test-Class';
  liLink.href = link.href;

  li.appendChild(liLink);
  document.body.appendChild(li)

});

【讨论】：

这是另一种好方法。下次我会尝试这样的事情。谢谢

【解决方案3】：

用这个替换for循环（我们只更新一次document）：

document.body.innerHTML += links.map( (link,i)=>`
    <li class="nav-link">
        <a class="Test-Class" href="${hrefLinks[i]}">${link}</a>
    </li> 
`).join('');

const links = ['Home', 'Contact', 'About'];
const hrefLinks = ['/', 'contact', 'about'];

document.body.innerHTML += links.map( (link,i) =>  `
    <li class="nav-link">
        <a class="Test-Class" href="${hrefLinks[i]}">${link}</a>
    </li> 
`).join('');

可编辑示例here。如果您需要更好的性能，请使用insertAdjacentHTML。我不更改输入数据，但更好的方法是当您将 href 和链接放入单个对象中时，例如 azad 答案，然后使用 map。

【讨论】：

【解决方案4】：

除了两个数组之外，你为什么不使用一个对象数组呢？

const anchors = [
  {
    name: 'Home',
    link: '/'
  },
  {
    name: 'Contact',
    link: 'contact'
  },
  {
    name: 'About',
    link: 'about'
  }
];

let ul = document.getElementById('list');

anchors.forEach(function(item) {
  let li = document.createElement('li');
  let a = document.createElement('a');
  a.className = 'nav-link';
  a.href = item.link;
  a.innerHTML = item.name;
  li.appendChild(a);
  ul.appendChild(li);
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Anchors</title>
</head>
<body>
  <ul id="list"></ul>
</body>
</html>

我认为这是有效的。

【讨论】：

老实说，我什至没有考虑过使用这种设置。