Vue实现移除数组中特定元素的方法小结

一、介绍 1、事件参与角色介绍 角色： 1、记录数组multipleSelection，负责记录目前已勾选的记录2、表格变量currentDeviceList，显示显示当前表格的内容 2、事件关联 由于表格是带筛选功能的，且记录带有记忆性，所以记录数组multipleSelection里，可能携带了表格变量currentDeviceList里没有的元素，这就导致在进行全部勾选/取消时，不能对记录数组multipleSelection一刀切。 3、事件发展 在全部取消时，应该是把记录数组multipleSelection里，属于当前表格内容的部分进行剔除。 所以我进行了循环，去匹配每一个存在于记录数组multipleSelection，然后进行剔除。 这段代码乍一看似乎没啥问题，removeArr记录了要剔除的位置，比如[1, 3], 剔除1、3位置，但在剔除1位置后，splice会修改本身数组长度，原先的3位置的元素应该是退到2位置了，如果还剔除3位置的元素，按逻辑来说是不对的。 后续是加了降序排序，才解决了这个问题。 在写本文的时候，我发现以下更简洁的写法，每次剔除前，直接获取要剔除的位置即可，虽然可能剔除位置一直不变，但是元素的变化了的，所以也不会出现剔除错误的情况。 但是来都来了，那就再看看别的方法吧。 二、单个去除 1、按标识方法一 filter 可以使用filter()方法来去除数组中的某个元素。filter()方法会返回一个新的数组，其中只包含满足指定条件的元素。可以通过在filter()方法的回调函数中将满足条件的元素排除掉。 2、按索引方法二 splice 可以使用splice()方法来去除数组中的某个元素。splice()方法会修改原有数组，在指定的位置删除指定数量的元素。 3、按索引方法三 slice 可以使用slice()方法将要删除的元素之前和之后的元素分别存储在新的数组中，从而得到去除指定元素后的数组。 三、批量去除 1、如果指定位置是有特定标识， filter 2、如果指定位置有特定标识，reduce 3、索引+降序+splice（也是本文第一节的思路） 四、小结 方法甚多，但无外乎都是标识、索引这两块，然后配合forEach、filter、reduce、for、map等循环函数，然后再加上splice等替换函数。 到此这篇关于Vue实现移除数组中特定元素的方法小结的文章就介绍到这了,更多相关Vue移除特定元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！