解决 JavaScript 中数组 splice 方法删除元素被跳过或只删除部分元素

最新推荐文章于 2022-04-22 17:03:04 发布

秋子丫

最新推荐文章于 2022-04-22 17:03:04 发布

阅读量2.8k

点赞数 5

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_41548644/article/details/120711060

版权

JavaScript 专栏收录该内容

16 篇文章 4 订阅

订阅专栏

本文探讨了在JavaScript中对数组遍历时，如何避免splice方法导致的索引错乱。通过对比实时同步索引、倒序遍历、filter替代等方案，展示了如何正确地移除数组中符合条件的元素，确保删除效果的准确性和效率。

摘要由CSDN通过智能技术生成

一、问题说明

对数组遍历，使用 splice 方法移除符合条件的元素。由于 splice 方法改变原数组的长度，但循环中 i 仍然读取原始数组长度，造成跳过或只删除数组中符合条件的部分元素。

演示 Demo

const studentList = [
  { name: 'Tom', grade: 55 },
  { name: 'Jane', grade: 59 },
  { name: 'Murphy', grade: 80 }
]

for(let i = 0; i < studentList.length; i++) {
  if (studentList[i].grade < 60) {
    studentList.splice(i, 1)
  }
}

打印结果

二、方案一

实时同步索引法。对数组遍历，当对符合条件的元素执行 splice 方法，进行 i-- 操作，使读取的索引跟 splice 后的数组同步。

演示 Demo

const studentList = [
  { name: 'Tom', grade: 55 },
  { name: 'Jane', grade: 59 },
  { name: 'Murphy', grade: 80 }
]

for(let i = 0; i < studentList.length; i++) {
  if (studentList[i].grade < 60) {
    studentList.splice(i, 1)
    i--
  }
}

打印结果

三、方案二

倒序遍历法。因 splice 方法会直接操作原数组，导致数组宽度变小，后面的元素往前推。因此，从后往前读取，无论是否满足删除条件，每次循环都是读取到正确的数组项值。

演示 Demo

const studentList = [
  { name: 'Tom', grade: 55 },
  { name: 'Jane', grade: 59 },
  { name: 'Murphy', grade: 80 }
]

for(let i = studentList.length - 1; i >= 0; i--) {
  if (studentList[i].grade < 60) {
    studentList.splice(i, 1)
  }
}

打印结果

四、方案三

filter 代替法。与 splice 方法不同，filter 方法并不会更改原数组，而是满足条件的元素组成一个新数组返回。

演示 Demo

const studentList = [
  { name: 'Tom', grade: 55 },
  { name: 'Jane', grade: 59 },
  { name: 'Murphy', grade: 80 }
]

const goodStudentList = studentList.filter(student => {
  return student.grade > 60
})