Vue快速教程：如何优雅地移除数组中的特定元素？

CRMEB

于 2024-03-18 14:50:24 发布

阅读量7k

点赞数 14

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端商城源码免费源码

本文链接：https://blog.csdn.net/CRMEB/article/details/136809253

1、事件参与角色介绍

角色： 
1、记录数组multipleSelection，负责记录目前已勾选的记录
2、表格变量currentDeviceList，显示显示当前表格的内容

2、事件关联

由于表格是带筛选功能的，且记录带有记忆性，所以记录数组multipleSelection里，可能携带了表格变量
currentDeviceList里没有的元素，这就导致在进行全部勾选/取消时，不能对记录数组multipleSelection一刀切。

3、事件发展

在全部取消时，应该是把记录数组multipleSelection里，属于当前表格内容的部分进行剔除。

所以我进行了循环，去匹配每一个存在于记录数组multipleSelection，然后进行剔除。

   var removeArr = []
   this.currentDeviceList.forEach(row => {
      const removeIndex = this.multipleSelection.findIndex(item => item === row.deviceId)
      if (removeIndex !== -1) {
        removeArr.push(removeIndex)
      }
    })
     removeArr.forEach(removeItem => {
      this.multipleSelection.splice(removeItem, 1)
    })

这段代码乍一看似乎没啥问题，removeArr记录了要剔除的位置，比如[1, 3], 剔除1、3位置，但在剔除1位置后，splice会修改本身数组长度，原先的3位置的元素应该是退到2位置了，如果还剔除3位置的元素，按逻辑来说是不对的。

后续是加了降序排序，才解决了这个问题。