JavaScript - for 循环使用 splice() 方法删除数组中的元素会被跳过或只删除部分的两种解决方案

刺骨的言语ヽ痛彻心扉 2022-10-25 04:48 334阅读 0赞

## 前言 ##

> 在循环执行的时候，只要满足了执行 `splice()` 方法的条件，原始数组立马就会被改变，其对应的数组长度也立马会被改变，但此时循环中下标 `“i”` 仍然是原始数组的长度。

如果我们有 **固定且特定的条件** 时，会毫不犹豫使用 `for` 循环 + `splice()` 进行操作。

但是，`splice()` 方法用于添加或删除数组中的元素，它会改变原始数组，也就是说 **数组长度会发生变化**。

// 举个例子(以下代码就会造成条件成立后数据被跳过问题)
    
    let arr = [
        {  id:1,name:'Tom',sex:0 },
        {  id:2,name:'Jerry',sex:1 },
        {  id:3,name:'Danny',sex:1 },
        {  id:4,name:'Jenny',sex:0 },
        {  id:6,name:'Lee',sex:0 },
        {  id:5,name:'Bob',sex:1 },
        {  id:7,name:'John',sex:0 },
        {  id:8,name:'Marry',sex:1 }
    ]
    
    // 删除所有sex等于1的数组项
    for(let i = 0; i < arr.length; i++){ 
        if(arr[i].sex === 1){ 
    		arr.splice(i,1);
        }
    }

【打印结果】（ `id == 3` 数组项就被跳过了）：  
![在这里插入图片描述][20210130225927326.png]

## 一、解决方案 ##

> 由于 `splice()` 方法改变了原数组长度，每次判断 `length` 时都是原数组的长度，你只需要在 `splice()` 方法移除后，再进行 `i--` ，即可变为正常。

拿以上例子，做一个改造，让其变为正常。

【打印结果】  
![在这里插入图片描述][20210130230258342.png]

## 二、解决方案 ##

> 倒序循环法，因为 `Array.splice()` 会直接操作数组的结构，导致数组 `length` 变小，后面的元素会往前推，所以 **从后往前取**，是个简单粗暴的好办法。

拿以上例子，做一个改造，让其变为正常。

【打印结果】  
![在这里插入图片描述][20210130230258342.png]

[20210130225927326.png]: /images/20221024/60f91a856f684b828a1bbd5c5c88e083.png
[20210130230258342.png]: /images/20221024/9746d4ef490b4f1fbcc86d5f4dc2475f.png