Javascript 使用.filter从数组中删除项并返回新数组

我正试图通过向“删除”按钮添加事件侦听器来返回一个新数组。连接到该事件侦听器的是一个运行array.filter函数的函数。我不知道为什么它不起作用。我可以用console.log记录新数组，这很好，但是当我尝试返回新数组时，什么也没有发生

我正在从阵列中拼接项目，效果很好，但我想尝试使用过滤器。看起来逻辑是存在的，没有抛出错误。但它只是不返回新数组。我正试图通过其索引从RemoveCredit函数中删除该项

const removeIngredient = text => {
  const ingredientIndex = recipeOnPage.ingredients.findIndex(
    ingredient => ingredient.text === text
  )
  const ingredientList = recipeOnPage.ingredients
  const ingredient = ingredientList.filter(
    item => ingredientList.indexOf(item) !== ingredientIndex
  )
  return ingredient
}

const toggleIngredient = text => {
  const ingredient = recipeOnPage.ingredients.find(
    ingredient => ingredient.text === text
  )
  if (ingredient.included) {
    ingredient.included = false
  } else {
    ingredient.included = true
  }
}

const ingredientSummary = recipe => {
  let message
  const allUnchecked = recipeOnPage.ingredients.every(
    ingredient => ingredient.included === false
  )
  const allChecked = recipeOnPage.ingredients.every(
    ingredient => ingredient.included === true
  )

  if (allUnchecked) {
    message = `none`
  } else if (allChecked) {
    message = `all`
  } else {
    message = `some`
  }
  return `You have ${message} of the ingredients for this recipe`
}

const generateIngredientDOM = ingredient => {
  const ingredientEl = document.createElement('label')
  const containerEl = document.createElement('div')
  const checkbox = document.createElement('input')
  const ingredientText = document.createElement('span')
  const removeButton = document.createElement('button')
  recipeStatus.textContent = ingredientSummary(recipeOnPage)

  // Setup ingredient container
  ingredientEl.classList.add('list-item')
  containerEl.classList.add('list-item__container')
  ingredientEl.appendChild(containerEl)

  // Setup ingredient checkbox
  checkbox.setAttribute('type', 'checkbox')
  checkbox.checked = ingredient.included
  containerEl.appendChild(checkbox)
  // Create checkbox button in ingredient div
  checkbox.addEventListener('click', () => {
    toggleIngredient(ingredient.text)
    saveRecipes()
    renderIngredients(recipeId)
  })

  // Setup ingredient text
  ingredientText.textContent = ingredient.text
  containerEl.appendChild(ingredientText)

  // Setup the remove button
  removeButton.innerHTML = '<i class="far fa-trash-alt"></i>'
  removeButton.classList.add('button', 'button--text')
  ingredientEl.appendChild(removeButton)
  // Create remove button in ingredient div
  removeButton.addEventListener('click', () => {
    removeIngredient(ingredient.text)
    saveRecipes()
    renderIngredients(recipeId)
  })

  return ingredientEl
}

const renderIngredients = recipeId => {
  // Grab the ingredient display from the DOM
  const ingredientList = document.querySelector('#ingredients-display')
  ingredientList.innerHTML = ''
  const recipe = getRecipes().find(item => {
    return item.id === recipeId
  })

  // Iterate through the list of ingredients on the page and render all items from recipeDOM
  recipe.ingredients.map(ingredient => {
    const ingredientDisplay = generateIngredientDOM(ingredient)
    ingredientList.appendChild(ingredientDisplay)
  })
  saveRecipes()
}

---

正如我上面提到的，什么也没有发生。当我在console.log中记录变量成分时，我会得到一个新的数组，其中删除的项消失了，但是当我返回它时，什么也没有发生

如果我正确理解了结构，您的RemoveCredit可能会缩减为：

const removeIngredient = text => {
  recipeOnPage.ingredients = recipeOnPage.ingredients.filter(i => i.text !== text);
}

这将删除其文本属性与文本参数相同的成分。您正在进行大量不必要的findIndex，以获取过滤后的成分并将其返回。但是，您无法将其设置回recipeOnPage对象

---

由于您没有使用RemoveCredit的返回值，因此不需要返回任何需要梳理大量代码的内容。您能否将其简化为一个数组，以便更容易找到问题代码？您不会将返回的数组存储在任何位置。您希望在何处使用新阵列？另外，不要省略分号，它迟早会导致您遇到难以调试的错误。