javascript中的.filter（）未按预期工作

我试图用javascript中的.filter（）方法输出数据，但我无法确定是否有可能让它按我所希望的方式工作。首先是代码：

function filterMenu(e) {
  const category = e.target.dataset.id;

  if (category === "all") {
    getData()
      .then((res) => {
        displayMenuItems(res);
      })
      .catch((err) => console.log(err));
  } else {
    getData()
      .then(function (res) {
        res.filter(function (menuItem) {
          if (menuItem.category === category) {
            let output = [];
            output = `
                    <article class="menu-item">
                      <img src="${menuItem.img}" alt="${menuItem.title}" class="photo" />
                      <div class="item-info">
                        <header>
                          <h4>${menuItem.title}</h4>
                          <h4 class="price">${menuItem.price}</h4>
                        </header>
                        <p class="item-text">${menuItem.desc}</p>
                      </div>
                    </article>
                `;

            populateMenu.innerHTML = output;

            console.log(output);
          }
        });
      })
      .catch((err) => console.log(err));
  }
}

功能过滤器菜单（e）{
const category=e.target.dataset.id；
如果（类别=“全部”）{
getData（）
。然后（（res）=>{
显示菜单项（res）；
})
.catch（（err）=>console.log（err））；
}否则{
getData（）
.然后（功能（res）{
资源过滤器（功能（菜单项）{
if（menuItem.category==类别）{
让输出=[]；
输出=`
${menuItem.title}
${menuItem.price}
${menuItem.desc}
`;
populateMenu.innerHTML=输出；
控制台日志（输出）；
}
});
})
.catch（（err）=>console.log（err））；
}
}

我们有4个按钮，其中3个是类别，1个是all按钮，所以在我们按下all按钮后，一切都按预期工作，这就是if语句，但是当我们通过单击category按钮进入else语句时，它只显示被单击类别的输出变量中的最后一个元素，但当我运行console.log（输出）时，它显示：

                    <article class="menu-item">
                      <img src="./images/item-1.jpeg" alt="buttermilk pancakes" class="photo" />
                      <div class="item-info">
                        <header>
                          <h4>buttermilk pancakes</h4>
                          <h4 class="price">15.99</h4>
                        </header>
                        <p class="item-text">I'm baby woke mlkshk wolf bitters live-edge blue bottle, hammock freegan copper mug whatever cold-pressed </p>
                      </div>
                    </article>
                
                    <article class="menu-item">
                      <img src="./images/item-4.jpeg" alt="country delight" class="photo" />
                      <div class="item-info">
                        <header>
                          <h4>country delight</h4>
                          <h4 class="price">20.99</h4>
                        </header>
                        <p class="item-text">Shabby chic keffiyeh neutra snackwave pork belly shoreditch. Prism austin mlkshk truffaut, </p>
                      </div>
                    </article>
                
                    <article class="menu-item">
                      <img src="./images/item-7.jpeg" alt="bacon overflow" class="photo" />
                      <div class="item-info">
                        <header>
                          <h4>bacon overflow</h4>
                          <h4 class="price">8.99</h4>
                        </header>
                        <p class="item-text">carry jianbing normcore freegan. Viral single-origin coffee live-edge, pork belly cloud bread iceland put a bird </p>
                      </div>
                    </article>

酪乳煎饼
15.99
我是被婴儿叫醒的mlkshk狼咬活边蓝瓶吊床freegan铜马克杯冷压
乡村乐
20.99
破旧别致的keffiyeh neutra snackwave猪肉肚shoreditch。Prism austin mlkshk truffaut
咸肉溢出
8.99
随身携带健冰诺尔弗里根。病毒单源咖啡活边，猪肚云面包冰岛放鸟

---

现在我可以使用populateMenu.innerHTML+=输出，它可以工作，但不能像预期的那样工作，如果我们使用+=那么每次单击类别按钮时，数据都会被反复插入，我不希望这样，一切都像预期的那样工作，单击按钮时，页面中会插入正确的数据，但对于类别，它只是显示最后一个元素，我一直在试图找出问题所在，我仍然不知道是否有可能使其按我所希望的方式工作。

数组筛选器返回通过条件的所有项目的列表。 如果只需要第一个匹配项，请尝试

。查找
。
对你来说，应该是这样

var matchedItem = res.find(function (menuItem) {
 return menuItem.category === category;
})
if(matchedItem){
   output = `
                    <article class="menu-item">
                      <img src="${matchedItem.img}" alt="${matchedItem.title}" class="photo" />
                      <div class="item-info">
                        <header>
                          <h4>${matchedItem.title}</h4>
                          <h4 class="price">${matchedItem.price}</h4>
                        </header>
                        <p class="item-text">${matchedItem.desc}</p>
                      </div>
                    </article>
                `;
}


var matchedItem=res.find（函数（menuItem）{
返回menuItem.category==category；
})
if（matchedItem）{
输出=`
${matchedItem.title}
${matchedItem.price}
${matchedItem.desc}
`;
}
我从您的代码中直觉地知道displayMenuItems（）将填充populateMenu.innerHTML，我相信您希望所有过滤的项都填充菜单。因此，我对代码进行了如下重构：

function filterMenu(e) {
  const category = e.target.dataset.id;
  let finalResult = [];

  getData()
    .then((res) => {
      if (category === "all") {
        finalResult = res;
      } else {
        finalResult = res.filter((menuItem) => menuItem.category === category);
      }
      displayMenuItems(finalResult);
    })
    .catch((err) => console.log(err));
}


我们只是根据需要使用结果或筛选结果调用displayMenuItems（）

请注意，filter（）返回一个新数组，因此代码一定会在finalResult中捕获返回值。
首先，请看一看它是如何工作的。您应该在其回调中返回truthy值或falsy值，以确定该项是保留还是丢弃请单击编辑，然后单击
[]
代码段编辑器，并创建一个请不要使用
.filter
进行一般迭代。您可以使用
.forEach
或甚至是普通的循环。对于您尝试筛选的结果，您可以使用displayMenuItems（）而不是内联构建HTML吗？非常感谢，我的问题得到了很好的解释和解决！我尝试了一些不同的方法，但在我的版本中，我在.map（）上出现了一个错误，并且无法在没有在.map（）上出现错误的情况下找到如何使用displayMenuItems函数的方法，这对我有很大帮助，并且从你的回答中真正学到了很多！祝你今天愉快！