数组无重复项时如何避免.createElement生成的收藏食谱视图重复？

• 你每次调用displayFavouriteRecipes渲染收藏列表时，没有先清空容器内已有的DOM节点，直接往页面追加元素，导致旧的收藏项重复渲染
• 渲染逻辑判断错误：现有代码中当新增的食谱未重复时，会遍历整个收藏数组把所有项都重新追加一遍，而不是仅追加新增的那一个
• 没有使用HTML中预留的.favourite-recipes-ul作为收藏列表容器，直接往body插入h4，结构和预设不匹配
• 额外优化点：addToFavourites函数中newFavRecipe没有声明变量，会意外创建全局变量

替换原代码中的displayFavouriteRecipes函数，同时补充收藏容器的获取逻辑，其他代码无需改动：

// 提前获取HTML中预留的收藏列表容器
const favContainer = document.querySelector('.favourite-recipes-ul');

// 修复后的收藏展示函数
const displayFavouriteRecipes = function(recipeReceived) {
  let newRecipe = recipeReceived;
  favouriteRecipes = JSON.parse(localStorage.getItem("favRecipes") || "[]");

  let foundRecipe = false;

  if (newRecipe) {
    for (let rec of favouriteRecipes) {
      if (rec.id.toString() === newRecipe.id.toString()) {
        foundRecipe = true;
        break; // 匹配到就提前退出循环，优化性能
      }
    }
    if (!foundRecipe) {
      favouriteRecipes.push(newRecipe);
    }
  }

  // 每次渲染前先清空容器内所有旧内容，从根源避免重复
  favContainer.innerHTML = '';

  // 遍历整个收藏数组统一渲染所有项，不需要额外判断
  for (let favRec of favouriteRecipes) {
    const li = document.createElement('li');
    li.className = "list-group-item";
    const h4 = document.createElement('h4');
    h4.textContent = favRec.title;
    li.append(h4);
    favContainer.append(li);
  }
  localStorage.setItem("favRecipes", JSON.stringify(favouriteRecipes));
}

// 补充修复addToFavourites里的变量声明问题
const addToFavourites = function(id) {
  document.getElementById(id).addEventListener('click', function() {
    let clickedId = parseInt(id);
    for (let recipe of recipes) {
      if (recipe.id === clickedId) {
        // 新增let声明变量，避免全局污染
        let newFavRecipe = recipe;
        displayFavouriteRecipes(newFavRecipe)
      }
    }
  })
}

修复后首次点击收藏、多次点击同一食谱、刷新页面都不会出现重复展示的问题，收藏内容也会渲染到你预设的「Favourite Recipes」模块下，结构更规范。

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