使用 .filter 从数组中删除项目并 return 新数组

Question

我正在尝试 return 一个新数组，方法是向我的删除按钮添加一个事件侦听器。连接到该事件侦听器的是一个运行 array.filter() 函数的函数。我不确定为什么它不起作用。我可以 console.log 新数组，这很好，但是当我尝试 return 新数组时，没有任何反应。

我将项目从数组中拼接出来，效果很好，但我想尝试使用过滤器。似乎逻辑就在那里，并且没有抛出任何错误。但它并不是 return 一个新数组。这是我试图通过其索引从中删除项目的 removeIngredient 函数。

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 变量 ingredient 时，我得到了新数组，其中删除的项目消失了，但是当我 return 它时，没有任何反应。

Answer 1

如果我对结构的理解正确，您的 removeIngredient 可能会被缩减为：

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

这将删除 ingredient，它具有与 text 参数相同的 text 属性。您正在做很多不必要的 findIndex 来获得 filtered 成分和 return 它。但是您无法将其设置回 recipeOnPage 对象。

因为您没有使用 removeIngredient 的 return 值，所以您不需要 return 任何东西

使用 .filter 从数组中删除项目并 return 新数组

Using .filter to remove an item from an array and return the new array

javascript

filter

indexof