数组splice深度解析

在做treebox往选中的数据中丢数据的时候，发现splice有一个新的缺陷。

1、常规用法介绍

现在先按照常理介绍一下数组提供的splice用法。

arrayObject.splice(index,howmany,item1,.....,itemX)

解析：

index，操作的标签，指定删除或者添加节点的位置

howmany，操作的个数，若为0，则不需要删除

item1,……,itemx，需要添加的值

案例：

var a=[1,2,3];
a.splice(1,0,[4,5]);//[1,2,3,4,5]
a.splice(2,1)//[1,2,4,5]删除index为2的1个数据
a.splice(3,1,7)//[1,2,4,7]删除index为3的1个数据，并在后面添加一个数据

2、特殊介绍及案例

在数组操作中splice删除数据的时候，有这样一种情况，利用splice在循环遍历删除时，会出现删除不完全，漏删指定数据的情况。

案例：

//在状态机初始化时，定义checkedNode
this.state = {
      checkedNode: [
       { 'checked': true,
         'id':1,
         'title':'小数'
        }],

//onCheck是往treebox中添加选中节点或者删除选中节点的函数
onCheck = (checkedKey, e) => {
//先不判断节点的checked是否选中，直接丢到选中节点当中，即下面的push操作
    this.state.checkedNode.push(
       {'checked': e.checked,
        'id': e.node.props.dataRef.knowid,
        'title':e.node.props.dataRef.title
        })
/*再然后执行循环筛选出目前选中节点的的checked，即e.checked，若为false，则通过splice删除checkedNode中的所有e.id的节点*/
    for (let i = this.state.checkedNode.length; i >=0 ; i--) {
      /*之所以要倒着遍历，是因为如果采用从前往后遍历的话，一个数组[1,2,3]通过splice删除index为0的数据之后，再次回到for循环，之前index为1的数据变为了便成为了index为0的数据，这样便少遍历了数据。*/
      /*若倒着遍历，便可避开这个问题，对应数据即使删除了，也不会产生前移的问题。*/
      if (e.node.props.dataRef.knowid == this.state.checkedNode[i].knowid) {
        if(e.checked==false){
            //若采用这种方式删除，数据不会前移
            this.state.checkedNode.splice(i,1);
        }
      }
    }
  }

3、结束语

splice删除，能导致数据前移，加上循环遍历，会出现数据错乱、漏删的现象，若在循环时，采用从后往前遍历，便可避免此类问题的发生。