这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
前言
测试发现了一个问题,简单描述问题就是通过函数删除一个数组中多个元素,传入的参数是一个数组索引。
然后发现实际效果有时删除的不是想要的内容。
具体 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
方法创建一个新数组,只保留未被标记为删除的元素。文章来源:https://www.toymoban.com/news/detail-748263.html
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
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
文章来源地址https://www.toymoban.com/news/detail-748263.html
到了这里,关于记录--前端实习生的这个 bug 被用做了一道基础面试题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!