記錄--前端實習生的這個 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

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。