如何动态添加对象到数组里，同时也动态删除？

Question

有多个标签，如图，多选会放在labelEleParams这个数组里存着。每点一次就往里加一次。
这个好说就push(),问题是例如点击标签一，如何从labelEleParams删除数组中已存在的对象。添加也存在问题，因为每添加一次就是在labelEleParams再找一遍，看有没有重复的，有重复就删除。请大神指点一下。

json

   labelData: [
    { id: 101, labelNum: "000", labelName: "标签一", },
    { id: 102, labelNum: "000", labelName: "标签二", },
    { id: 103, labelNum: "000", labelName: "标签三", },
    { id: 104, labelNum: "000", labelName: "标签四", },
    { id: 105, labelNum: "000", labelName: "标签五", },
  ],

页面

     <div v-for="(item, index) in labelData" :key="index">
         <div class="flex col labelContent" ref="labelEle" @click="handleActive(item, index)">
             <div class="labelNum">{{ item.labelNum }}</div>
            <div class="labelName">{{ item.labelName }}</div>
         </div>
     </div>

方法：

handleActive(ele, i) {
  if (this.labelEleParams.length != 0) {
    this.labelEleParams.forEach((item, index, array) => {
      if (item.id == ele.id) {
        // 删除不掉
      } else {
        //这里选多了标签会成倍数push到labelEleParams中
        this.labelEleParams.push(ele)
      }
    })
  } else {
    this.labelEleParams.push(ele)
  }
  console.log("🚀 ~ file: comBatMap.vue ~ line 270 ~ handleActive ~ this.labelEleParams", this.labelEleParams)
},

Answer 1

用 findIndex 找对应的下标，如果找到了，就根据下标移除掉，然后始终 push 。

const existsIndex = this.labelEleParams.findIndex(it => it.id == ele.id)
if(existsIndex !== -1){
  this.labelEleParams.splice(existsIndex, 1);
}

this.labelEleParams.push(ele)

Answer 2

let index = this.labelEleParams.findIndex(item => item.id == ele.id)
if(index > -1){
    this.labelEleParams.push(ele)
}else{
    this.labelEleParams.splice(index, 1)
}

Answer 3

handleActive(ele, i) {
  if (this.labelEleParams.length != 0) {
    const index = this.labelEleParams.findIndex(item => item.id === ele.id)
    if (index >= 0) { // 如果已存在，则删除
        this.labelEleParams.splice(index, 1)
    }
    this.labelEleParams.push(ele)
      console.log("🚀 ~ file: comBatMap.vue ~ line 270 ~ handleActive ~ this.labelEleParams", this.labelEleParams)
},