数组splice细节问题

今天使用 splice又遇到一个没注意到的小坑。先看下它的定义与用法

定义和用法

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

注释：该方法会改变原始数组。

语法

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

参数	描述
index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX	可选。向数组添加的新项目。

返回值

类型	描述
Array	包含被删除项目的新数组，如果有的话。

说明

splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

 

 

以前都是匹配到某个数组里面的一项，然后用 arr.splice(i,1)删除掉那项数组元素，然后返回新的数组。例如：

 this.tableData.forEach(item => {
                  item.value.forEach((val,index) => {
                    if(val.id==id){
                      item.value.splice(index,1)
                    }
                  })
                });

这样写并没有什么问题，删除掉数组中那个ID相等的。但是在今天的例子中有所不同。如下：

 var arr=[1]
  for(var i=0;i<arr.length;i++){
    console.log(11111)
    arr.splice(i,1)
  }
  console.log(arr)

这个也还正常，数组中只有一项，删掉以后变为空的数组。

 

var arr=[1,2]
  for(var i=0;i<arr.length;i++){
    console.log(11111)
    arr.splice(i,1)
  }
  console.log(arr)

但是这个就有坑了，数组中只有两项的时候，这样并没有和我所想的一样去执行两次，输出两次console.log(11111)，并且数组为空。 仔细想了下，应该是在第一次循环的时候，arr.splice(i,1)截取完成后，arr的长度就已经变成了1，而不再是2了。所以第二次循环并没有去执行。且原先的第二个数组也保留了下来。

也就是说使用arr.splice(i,1)循环数组时，循环次数会比正常的-1次。

所以在使用arr.splice(i,1) 并且再循环中使用时，一定住注意length的变化。

其实单纯使用splice并不会有问题，但是在循环中使用的话，就必须考虑到length的变化。

最后加了一段if(item.value.length==1){
                  item.value.pop();
                }

判断来完成的循环。 

当然完全类似这种需求我就不建议使用splice去做了，不如把符合条件的对象都push到一个新数组里，去操作那个新数组。逻辑会清晰很多。

 this.tableData.forEach(item => {
                let checkArr=[];
                //写一个新数组，去记录没有选中的，然后赋值给item.value
                item.value.forEach((val,index) => {
                  if(!val.checked){
                    checkArr.push(val);
                  }
                });
                item.value=checkArr;
              });