vue剔除数组指定位置元素的方法

一、记录背景

最近遇到一个表格的勾选问题,因为犯了比较隐晦的逻辑bug,所以特此记录一下,引以为戒。

1、事件参与角色介绍

复制代码
角色: 
1、记录数组multipleSelection,负责记录目前已勾选的记录
2、表格变量currentDeviceList,显示显示当前表格的内容

2、事件关联

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

3、事件发展

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

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

ini 复制代码
   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位置的元素,按逻辑来说是不对的。

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

css 复制代码
removeArr.sort((a, b) => b - a) 
// 进行降序排序,从后面开始移除,这样位置变化也不会影响到multipleSelection

在写本文的时候,我发现以下更简洁的写法,每次剔除前,直接获取要剔除的位置即可,虽然可能剔除位置一直不变,但是元素的变化了的,所以也不会出现剔除错误的情况。

kotlin 复制代码
this.currentDeviceList.forEach(row => {
      const removeIndex = this.multipleSelection.findIndex(item => item === row.deviceId)
      if (removeIndex !== -1) {
        this.multipleSelection.splice(removeIndex, 1)
      }
    })

但是来都来了,那就再看看别的方法吧。

二、单个去除

1、按标识方法一 filter

可以使用filter()方法来去除数组中的某个元素。filter()方法会返回一个新的数组,其中只包含满足指定条件的元素。可以通过在filter()方法的回调函数中将满足条件的元素排除掉。

ini 复制代码
let arr = [1, 2, 3, 4, 5];
let elementToRemove = 3;
let newArr = arr.filter(item => item !== elementToRemove);
console.log(newArr); // 输出 [1, 2, 4, 5]

2、按索引方法二 splice

可以使用splice()方法来去除数组中的某个元素。splice()方法会修改原有数组,在指定的位置删除指定数量的元素。

ini 复制代码
let arr = [1, 2, 3, 4, 5];
let indexToRemove = 2; // 要删除元素的索引
arr.splice(indexToRemove, 1);
console.log(arr); // 输出 [1, 2, 4, 5]

3、按索引方法三 slice

可以使用slice()方法将要删除的元素之前和之后的元素分别存储在新的数组中,从而得到去除指定元素后的数组。

ini 复制代码
let arr = [1, 2, 3, 4, 5];
let indexToRemove = 2; // 要删除元素的索引
let newArr = arr.slice(0, indexToRemove).concat(arr.slice(indexToRemove + 1));
console.log(newArr); // 输出 [1, 2, 4, 5]
 

三、批量去除

1、如果指定位置是有特定标识, filter

javascript 复制代码
// 原始数组
var arr = [1, 2, 3, 4, 5];
// 要移除的元素列表
var removeList = [2, 4];
// 使用 filter() 函数过滤数组并返回新的数组
var newArr = arr.filter(function (item) {
    return !removeList.includes(item); // 判断当前元素是否在要移除的列表中
});
console.log(newArr); // 输出结果为 [1, 3, 5]

2、如果指定位置有特定标识,reduce

ini 复制代码
const arr = [1, 2, 3, 'a', 'b', 'c']; // 原始数组
const removeItems = ['a', 'b']; // 要移除的元素列表
// 使用reduce()函数进行批量删除操作
const resultArr = arr.reduce((accumulator, currentValue) => {
    if (!removeItems.includes(currentValue)) {
        accumulator.push(currentValue);
    }
    return accumulator;
}, []);
console.log(resultArr); // 输出结果为[1, 2, 3, 'c']

3、索引+降序+splice(也是本文第一节的思路)

css 复制代码
function removeElements(arr, positions) {
// 将要移除的位置按降序排列
const sortedPositions = [...positions].sort((a, b) => b - a);
    for (let i = 0; i < sortedPositions.length; i++) {
        arr.splice(sortedPositions[i], 1);
    }
}
// 示例用法
const array = ['A', 'B', 'C', 'D', 'E'];
removeElements(array, [2, 4]);
console.log(array); // 输出 ["A", "B", "D"]

四、小结

方法甚多,但无外乎都是标识、索引这两块,然后配合forEach、filter、reduce、for、map等循环函数,然后再加上splice等替换函数。

ps: 我是地霊殿__三無,希望能帮到你。

相关推荐
天天向上102412 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y28 分钟前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁34 分钟前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry35 分钟前
Fetch 笔记
前端·javascript
拾光拾趣录36 分钟前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟36 分钟前
vue3,你看setup设计详解,也是个人才
前端
Lefan41 分钟前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构
写不出来就跑路1 小时前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui
OpenTiny社区1 小时前
盘点字体性能优化方案
前端·javascript