Javascript 通过2个阵列循环

我正在尝试通过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];
        }
    }
}

---

这是正确的方法还是更简单/更干净的方法？

您不需要嵌套循环-只需将

链接中的
i
第th项链接到
hrefinks
的
i
第th项即可。使用
forEach
，您只需使用回调函数的第二个参数即可完成此操作，该参数将引用正在迭代的当前索引：


const list=document.body.appendChild（document.createElement（'ul'）；
常量链接=['Home'，'Contact'，'About']；
常量hrefLinks=['/'，'contact'，'about']；
links.forEach（（linkName，i）=>{
const li=document.createElement（'li'）；
常量a=document.createElement（'a'）；
a、 href=hrefLinks[i]；
a、 textContent=linkName；
李.儿童（a）；
li.className='nav link'；
表1.儿童（李）；
});创建一个包含链接名和url的对象数组，然后可以迭代该对象，将锚元素添加到dom中，如下所示


//保存导航url和名称的对象
var navLinks=[{
标签：“家”，
href:'/'
}, {
标签：“联系人”，
href:“联系人”
}, {
标签：“关于”，
href:“关于”
}]
navLinks.forEach（函数（链接）{
var li=document.createElement（'li'）；
li.className='nav link'；
var liLink=document.createElement（'a'）；
var linkText=document.createTextNode（link.label）；
appendChild（linkText）；
liLink.className='测试类'；
liLink.href=link.href；
李.儿童（利林克）；
document.body.appendChild（li）
});除了两个数组外，为什么不使用对象数组


const锚=[
{
姓名：'家'，
链接：'/'
},
{
姓名：'联系人'，
链接：“联系人”
},
{
姓名：'关于'，
链接：“关于”
}
];
设ul=document.getElementById（'list'）；
锚。forEach（功能（项目）{
设li=document.createElement（'li'）；
设a=document.createElement（'a'）；
a、 className=‘导航链接’；
a、 href=item.link；
a、 innerHTML=item.name；
李.儿童（a）；
ul.儿童（li）；
});

锚定

用此替换for循环（我们只更新
文档一次）：

document.body.innerHTML+=links.map（（link，i）=>`


`).加入（“”）；


const links=['Home'，'Contact'，'About']；
常量hrefLinks=['/'，'contact'，'about']；
document.body.innerHTML+=links.map（（link，i）=>`


`).加入（“”）for
循环比
forEach
循环快得多。所以我想知道为什么应该避免使用它？@icecub没有必要将每个
链接
项与每个
hrefLinks
项（
O（N^2）
）一起使用，所以嵌套循环没有意义。嵌套循环（无论是
for
还是
forEach
）都不会完成任何有用的事情。虽然
for
循环比
forEach
和其他数组方法更快，但数组方法使代码更干净：功能更强大，自动抽象，无需手动迭代，无需提升问题（如果代码在ES5中）， etc@icecub如果每个项都必须对另一个数组中的每个项执行某些操作，则嵌套循环将非常有用，例如，如果需要
['Home-/'，'Home contact'，'Home about'，'contact-/'，'contact contact'，…]
，谢谢您的解释。我没有看到更大的画面，所以叶，现在它有道理：）@icecub这很可能是我拙劣的解释。我对这一切仍然一无所知，所以我不知道如何正确地解释这是另一个好方法。下次我会试试这样的东西。谢谢你，我真的没有想过使用这个设置。
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;
 });

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