记录--前端实习生的这个 bug 被用做了一道基础面试题
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助
前言
测试发现了一个问题，简单描述问题就是通过函数删除一个数组中多个元素，传入的参数是一个数组索引。
然后发现实际效果有时删除的不是想要的内容。
具体 Bug 代码实现:
const arr = [1,2,3,4,5,6,7];
const removeData = (rowIndex:Array<number>)=>{
if(Array.isArray(rowIndex)){
rowIndex.forEach((index)=>{
arr.splice(index,1)
})
}
}
removeData([1,4]);
console.log(arr); // 输出结果 [1,3,4,5,7]
// 期望输出结果 [1,3,4,6,7]
上面代码出现问题的原因是 splice 会改变原始数组的，然后导致索引偏移，不知道有没有同学出过类似问题。
因为这个 bug 我发现有些同学基础该是比较差，导致一些不必要的问题，于是把它变成了一道基础面试题，注意考基础，同时删除数组中的多个元素利用索引数组有多少种方式，把可以想到的方法都写一下哦(其实不是为了难为人，知识想考察一下面试者javaScript的基础编写能力) 接下来介绍这几种方法，欢迎补充
方法一：先倒序后删除
这种方式将参数索引数组按照从大到小排序，避免了删除元素导致的索引偏移
const arr = [1,2,3,4,5,6];
const removeMultipleElement = (rowIndex)=>{
// 先倒序
if(Array.isArray(rowIndex)){
rowIndex = rowIndex.sort((a,b)=>b-a);
rowIndex.forEach((rowIndex)=>{
arr.splice(rowIndex,1);
})
}
}
removeMultipleElement([1,4]);
console.log(arr);
方法二：使用filter生成新数组
使用
filter生成新数组，并且结合includes。(注意filter过滤的内容是浅拷贝过程)
let arr = [1,2,3,4,5,6];
const removeMultipleElement = (rowIndex)=>{
if(Array.isArray(rowIndex)){
arr = arr.filter((_,index)=>!rowIndex.includes(index))
}
}
removeMultipleElement([1,4]);
console.log(arr);
方法三：使用reduce生成新数组
使用
reduce和includes函数，也会生成新数组
let arr = [1,2,3,4,5,6];
const removeMultipleElement = (rowIndex)=>{
if(Array.isArray(rowIndex)){
arr = arr.reduce((prev,current,currentIndex)=>{
if(!rowIndex.includes(currentIndex)){
prev.push(current)
}
return prev
},[])
}
}
removeMultipleElement([1,4]);
console.log(arr);
方法四：生成新数组，判断用Set.has 替换 includes
仍然会生成新数组，只是
includes判断使用set.has替换，set.has判断会比includes的性能好一些，但是也要考虑数组数据量的大小，如果只是几个值，可以不考虑
let arr = [1,2,3,4,5,6];
let newArr = [];
const removeMultipleElement = (rowIndex)=>{
const rowIndexSet = new Set(rowIndex);
arr.forEach((item,index)=>{
if(!rowIndexSet.has(index)){
newArr.push(item)
}
})
}
removeMultipleElement([1,4]);
console.log(newArr);
方法五：标记删除法加 filter
创建一个与原始数组相同长度的布尔数组
markedForDeletion，用于标记需要删除的元素。然后，我们遍历索引数组，将对应的标记设置为true。最后，我们使用filter方法创建一个新数组，只保留未被标记为删除的元素。
let arr = [1,2,3,4,5,6];
const removeMultipleElement = (rowIndex)=>{
const markedForDeletion = new Array(arr.length).fill(false);
for(const index of rowIndex){
markedForDeletion[index] = true;
}
arr = arr.filter((_,index)=>!markedForDeletion[index])
}
removeMultipleElement([1,4]);
console.log(arr)
本文转载于:
https://juejin.cn/post/7272290608655859731
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
