时间戳

首页 > 解决方案 > 如何动态删除和添加值到数组

javascript - 如何动态删除和添加值到数组

问题描述

我有三个按钮。我只需要通过单击按钮将相应的值添加到数组中，但如果该值已存在于我的数组中，我需要将其从我的数组中删除。我的代码只有在我们使用它两次（添加和删除）同一个按钮时才有效。但是如果我们用不同的方式使用它——它就坏了。试试下面的例子。这种行为的原因是什么？
只有纯 JavaScript。 

let buttons = document.querySelectorAll('.string')
let array = []
let value = ''

buttons.forEach(el => el.addEventListener('click', () => {
  value = el.innerHTML
  for (i = 0; array.length + 1; i++) {
    if (array[i] === value) {
      delete array[i]
      array = array.filter(x => x) // clear empty values
      console.log('deleted', array)
    } else {
      array.push(value)
      console.log('added', array)
    }
    break
  }
}))
<div class="block">
  <div class="string">some</div>
  <div class="string">else</div>
  <div class="string">other</div>
</div>

标签： javascript

解决方案

它没有按预期工作，因为如果该值与数组中的第一个元素不匹配，则会将其推送并且循环中断。（无论如何，您的循环总是在第一个索引之后中断......）

相反，如果它存在于数组中，您可以只使用它Array.prototype.indexOf来获取元素的索引，然后如果它存在则删除该索引，如果不存在则推送它。

您也可以使用Array.prototype.splice(index, deleteCount)删除您不想要的索引，而不是执行deleteand Array.prototype.filter。

let buttons = document.querySelectorAll('.string')
let array = []
let value = ''

buttons.forEach(el => el.addEventListener('click', () => {
  value = el.innerHTML
  let i = array.indexOf(value);
  if(i > -1)
  {
    array.splice(i, 1);
    console.log('deleted', array)
  }
  else
  {
    array.push(value)
    console.log('added', array)
  }
  
}))
<div class="block">
  <div class="string">some</div>
  <div class="string">else</div>
  <div class="string">other</div>
</div>

如果您决定改用 for 循环，我还修复了您的原始代码段以使其使用您拥有的循环工作：

let buttons = document.querySelectorAll('.string')
let array = []
let value = ''

buttons.forEach(el => el.addEventListener('click', () => {
  value = el.innerHTML
  if(array.length < 1)
  {
    array.push(value)
    console.log("added", array)
    return
  }
  
  for (i = 0; i < array.length; i++) {
    if (array[i] === value) {
      array.splice(i, 1)
      console.log('deleted', array)
      break
    } else if (i == array.length - 1) {
      array.push(value)
      console.log('added', array)
      break
    }
  }
}))
<div class="block">
  <div class="string">some</div>
  <div class="string">else</div>
  <div class="string">other</div>
</div>

推荐阅读