循环通过2个数组

Question

我试图循环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;
 });

这是这样做的正确方法还是有更简单/更清洁的方法？

Answer 1

你不想嵌套循环-你只需将链接i个项中links的i的个项hrefLinks.有了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);
});