如何按相同索引遍历两个数组并渲染对应DOM内容？

你写的renderIngredients函数运行异常，基本是以下几个共性问题导致的，直接对照调整即可：

• 未提前清空父容器原有内容，函数多次触发时会出现重复的列表项
• 未做边界容错，当ingredients和measures两个数组长度不一致时，会渲染出undefined的空内容
• 循环生成DOM节点时，文本拼接错误、或节点未正确追加到父元素下
• 未做参数校验，传入的父元素不存在时直接抛出JS错误阻断后续逻辑

可直接运行的正确实现代码 #

// 玛格丽特基础数据结构
const margaritas = {
  ingredients: ["龙舌兰", "橙味力娇酒", "青柠汁", "盐边", "冰块"],
  measures: ["45ml", "15ml", "20ml", "适量", "满杯"]
}

/**
 * 渲染配料列表
 * @param {Array} ingredients 配料内容数组
 * @param {Array} measures 配料用量数组
 * @param {HTMLElement} parentEl 列表挂载的父DOM节点
 */
function renderIngredients(ingredients, measures, parentEl) {
  // 校验父元素合法性，不存在直接终止执行
  if (!parentEl || !(parentEl instanceof HTMLElement)) return

  // 清空父元素旧内容，避免重复渲染
  parentEl.innerHTML = ""
  // 取两个数组的最大长度作为循环上限，避免遗漏配料项
  const loopCount = Math.max(ingredients.length, measures.length)

  for (let i = 0; i < loopCount; i++) {
    // 缺项时设置默认兜底值
    const currentMeasure = measures[i] ?? "适量"
    const currentIngredient = ingredients[i] ?? "未命名配料"
    // 创建列表项
    const listItem = document.createElement("li")
    listItem.textContent = `${currentMeasure} ${currentIngredient}`
    // 追加到父容器
    parentEl.appendChild(listItem)
  }
}

// 函数调用示例
const ingredientContainer = document.querySelector("#ingredient-list")
renderIngredients(margaritas.ingredients, margaritas.measures, ingredientContainer)

长期维护的结构优化建议 #

如果后续需要频繁调整配料数据，建议直接把两个强关联的数组合并为对象数组结构，从根源上避免索引错位的问题，调整后的数据结构如下：

const margaritas = {
  ingredientList: [
    { name: "龙舌兰", measure: "45ml" },
    { name: "橙味力娇酒", measure: "15ml" },
    { name: "青柠汁", measure: "20ml" },
    { name: "盐边", measure: "适量" },
    { name: "冰块", measure: "满杯" }
  ]
}

调整后渲染逻辑不需要再维护两个数组的索引对应关系，直接遍历ingredientList单个数组即可，代码出错概率会大幅降低，也方便后续新增、删除、修改配料项。

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