vue的foreach 下splice问题（两个解决办法）

话不多说，上代码：

let list01=[200,201,202,300]
list01.forEach((item)=>{
    
    
                    console.log("现在的item"+item);
                    if(parseInt(item/100)==2)
                    {
    
    
                     list01.splice(list01.indexOf(item),1)//index是动态的，删除失败
                    }                    
                });

 console.log("现在的list01:  "+list01);
----
结果：
现在的item200
现在的item202
现在的list01:  201,300

可以看出，原本我是想删除200开头的，但是还有个201未删除。这是因为我的indexOf是动态获取数组的Index值的，在我删除前面的值时，这个list01数组已经被改变了，index坐标已经发生了改变,所以会造成有些数据删除不干净。

解决办法一：
设置一个外部数组：

let list01=[200,201,202,300]
let temp=list01
list01.forEach((item)=>{
    
    
                    console.log("现在的item"+item);
                    if(parseInt(item/100)==2)
                    {
    
    
                     temp.splice(temp.indexOf(item),1)//index是动态的，删除失败
                    }                    
                });
 console.log("现在的temp:  "+temp);
 console.log("现在的list01:  "+list01);
---
结果：
现在的item200
现在的item202
现在的temp:  201,300
现在的list01:  201,300

可以看到，虽然加上了一个外部数组temp，但是对其的删除仍然会影响list01，这是因为js的=赋值是浅拷贝，只会赋值地址。
如何进行深拷贝赋值？ —this.list1 = JSON.parse(JSON.stringify(this.list2));
注意：JSON.parse(JSON.stringify(obj))不能复制函数类型，obj也是要可以枚举才行，在IE7以下浏览器会报错。
先给他解析为json字符串，再还原成原来的对象，变为堆内存。
修改后如下：

let list01=[200,201,202,300]
let temp=JSON.parse(JSON.stringify(list01))
list01.forEach((item)=>{
    
    
                    console.log("现在的item"+item);
                    if(parseInt(item/100)==2)
                    {
    
    
                     temp.splice(temp.indexOf(item),1)//index是动态的，删除失败
                    }                    
                });
 console.log("现在的temp:  "+temp);
 console.log("现在的list01:  "+list01);

---
结果：
现在的item200
现在的item201
现在的item202
现在的item300
现在的temp:  300
现在的list01:  200,201,202,300

可以看出，所得的temp数组即为所求，完美解决问题。

解决办法二：
利用filter------filter()方法筛选符合条件的元素，去除不符合条件的元素

let list01=[200,201,202,300]

list01=list01.filter((item)=>{
    
    
                    console.log("现在的item"+item);
                    return parseInt(item/100)!=2                
                });
 console.log("现在的list01:  "+list01);
--
结果：
现在的item200
现在的item201
现在的item202
现在的item300
现在的list01:  300

完美解决问题。
需要注意的是：map，filter和slice都是返回一个新数组，所以要用一个数组取接受一下返回值。

当然也可以用
①先数组逆序，后删除。
②for循环+splice等方法。

以上。

vue的foreach 下splice问题（两个解决办法）

猜你喜欢