如果值为真,则删除带有拼接的数组项

我正在尝试使用array.splice方法从数组中删除选中的为真的项。它似乎在大多数情况下都有效,但出于某种原因,有时会检查两个或三个项,并且在运行拼接数组项的函数时,只有一个项从检查列表中移除。

我试过通过数组进行映射,并在移除拼接项的情况下返回新的数组,这是可行的,但并非总是如此。我用两个参数(index和item)映射数组。我正在创建一个if语句,如果选中或完成该项,则通过(index,1)删除它。之后,我将返回新阵列。问题发生在 removeCheckedBeer 功能

  // if there is no item string, create an empty array
  const items = JSON.parse(localStorage.getItem('items')) || []

  function addItem(e) {
    // prevent the form from submitting
    e.preventDefault()
    const text = (this.querySelector('[name=item]')).value
    const item = {
      text,
      done: false
    }
    items.push(item)
    // rerenders list without having to reload the page
    populateList(items, itemsList)
    localStorage.setItem('items', JSON.stringify(items))
    this.reset()
  }

  // function removes all items in the array
  const removeAllItems = e => {
    e.preventDefault()
    items.splice(0)
    localStorage.setItem('items', JSON.stringify(items))
    populateList([], itemsList)
  }

  // remove all checked items
  const removeCheckedBeer = e => {
    e.preventDefault()
    items.map((item, index) => {
      if (item.done === true) {
        console.log(index, item)
        items.splice(index, 1)
      }
      return items
    })
    localStorage.setItem('items', JSON.stringify(items))
    populateList(items, itemsList)
  }

  // toggle a single item
  const toggleDone = e => {
    if (!e.target.matches('input')) return // skip this unless it's an input
    const el = e.target
    const index = el.dataset.index
    // toggle from done to !done
    items[index].done = !items[index].done
    localStorage.setItem('items', JSON.stringify(items))
  }

  // toggle inventory of all items to true or false
  const toggleAllItems = e => {
    items.forEach((item, index, array) => {
      e.target.name === 'checkAll' ? (items[index].done = true) : (items[index].done = false)
  console.log(e.target.name)
})
localStorage.setItem('items', JSON.stringify(items))
populateList(items, itemsList)
  }

  const populateList = (beers = [], beerList) => {
    // map through the array, and create a new array to render the beer list
    beerList.innerHTML = beers.map((beer, i) => {
      return `
        <li>
          <input type="checkbox" data-index=${i} id="item${i}" 
${beer.done ? 'checked' : ''} />
          <label for="item${i}">${beer.text}</label>
        </li>
      `
    }).join('')
  }

因此,我希望从第一个选中项的索引开始,从数组中删除选中项的数目。结果是该项被删除,但有时一次只删除一项。有时会删除多个项目。有人能解释一下我的功能是怎么回事吗?