点击当前元素将信息存在数组，再次点击从数组移除

Posted 2021-12-06 rainux.

Code Is Never Die ！

真实场景： 昨天在做一个选中与取消选中元素的功能，需要用到频繁push(加入)和remove(移除)元素的操作。

实现思路：

1. 首先需要先判断数组中是否包含即将操作的元素；
2. 若不存在，则将当前元素push至数组中；若存在则将当前所选元素在数组中找到并splice移除；

引入新方法： 根据数组元素的 “值” 来删除数组中当前 “值” 元素。
对数组增加内置属性方法：

Array.prototype.contains = function(obj) { 
  var i = this.length; 
  while (i--) { 
    if (this[i] === obj) { 
      return i;  // 返回的这个 i 就是元素的索引下标，
    } 
  } 
  return false; 
} // 数组内置属性方法，定义之后，后面就能直接使用conains方法arr.contains(x)就能得到x在arr数组中的下标
var arrList = ['ace','mvp','ceo','dancer']; 
arrList.splice(arrList.contains('ceo'),1)  //通过这样在数组中就能删除ceo这个元素

完整实现：

// 定义数组内置属性方法，以备后面使用
Array.prototype.contains = function(obj) { 
        var i = this.length; 
        while (i--) { 
          if (this[i] === obj) { 
            return i;  // 返回的这个 i 就是元素的索引下标，
          } 
        } 
        return false; 
      }
let isExist = choseNodes.indexOf(e.item.model.id)// 首先判断数组中是否存在当前元素，根据isExist受否为-1
this.flowChartData.forEach((i) => { // 从当前数组flowChartData中找到当前点击的元素
    if (e.item.model.id == i.id &&isExist === -1) {
        choseNodes.push(e.item.model.id)
        // i.color = "red"
    }else if(e.item.model.id == i.id &&isExist != -1){
        // i.color = "#d7e8f0"
        choseNodes.splice(choseNodes.contains(e.item.model.id),1)
    }
})

欢迎大家交流学习，感觉这样做麻烦了很多，希望大神能指导一二