如何在JavaScript中使用单个for循环获取两个数组的值？

你的核心问题在于当前render函数仅接收单个数组参数，无法同时访问myNotes数组的数据，且代码中存在innerHtml的拼写错误（正确写法为innerHTML）。以下是修正后的实现方案：

完整代码示例 #

let myLeeds = []
let myNotes = []

const ulEl = document.getElementById('ul-el')
const pEl = document.getElementById('p-el')

function render(leads, notes) {
    let listItems = ""
    let pItems = ""
    // 取两个数组的最短长度，避免索引越界
    const maxLength = Math.min(leads.length, notes.length)
    for (let i = 0; i < maxLength; ++i) {
        listItems += `
          <li>
            <a target='_blank' href='${leads[i]}'>${leads[i]}</a>
          </li>
        `
        pItems += `
          <p>${notes[i]}</p>
        `
    }
    // 修正DOM属性拼写错误
    ulEl.innerHTML = listItems
    pEl.innerHTML = pItems
}

关键修改说明 #

• 传入双数组参数：让render函数同时接收leads和notes，循环中可分别访问两个数组的对应元素
• 处理长度不一致场景：用Math.min()获取两个数组的最短长度，避免因数组长度不同导致的索引越界错误
• 修正属性拼写：将innerHtml改为标准的innerHTML，否则无法正确更新页面内容
• 对应数组取值：pItems中使用notes[i]而非leads[i]，确保渲染的是笔记数组的内容

调用函数时需同时传入两个数组：

// 假设数组已填充数据
render(myLeeds, myNotes)

内容的提问来源于stack exchange，提问作者user19720109