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位置的元素，按逻辑来说是不对的。
后续是加了降序排序，才解决了这个问题。
removeArr.sort((a, b) => b - a)
// 进行降序排序，从后面开始移除，这样位置变化也不会影响到multipleSelection
在写本文的时候，我发现以下更简洁的写法，每次剔除前，直接获取要剔除的位置即可，虽然可能剔除位置一直不变，但是元素的变化了的，所以也不会出现剔除错误的情况。
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()方法的回调函数中将满足条件的元素排除掉。
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()方法会修改原有数组，在指定的位置删除指定数量的元素。
let arr = [1, 2, 3, 4, 5];
let indexToRemove = 2; // 要删除元素的索引
arr.splice(indexToRemove, 1);
console.log(arr); // 输出 [1, 2, 4, 5]
3、按索引方法三 slice
可以使用slice()方法将要删除的元素之前和之后的元素分别存储在新的数组中，从而得到去除指定元素后的数组。
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
// 原始数组
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
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（也是本文第一节的思路）
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等替换函数。
学习附件：点此下载
