js 根據指定的多個索引，刪除相應的數組元素。splice + sort

更新於2018-04-19

var productItems = ["a", "b", "c", "d"];

var indexs = [1, 2, 3];

indexs.sort(function(a, b) { return b - a});

indexs.forEach(function(index) { productItems.splice(index, 1) })

　　將索引集合按照倒序排列，然后splice從數組尾巴開始刪除，這樣就不會數組的變化就不會影響刪除的實現

 

這里可以直接使用 https://github.com/liyang0612/del-array-value

-----------------------------分割線---------------------------------

 

昨天遇到一個這樣的場景： 有一個不分頁的商品列表，里面可能有上千條數據（而且可能是靜態數據）甚至更多，這里有個刪除功能，需要我們刪除其中的一些商品。

這時我的第一反應就是，數據過多不能循環整個數組，只有獲取到它們的索引，然后循環得到的索引，使用數組的splice()方法對它進行刪除。並且我這樣做了，但是發現了一個致命的bug。

bug的原因是這樣的： 我先得到了一組索引（就是我所需要刪除的商品的索引）,然后循環了這組索引，在每次循環的時候我執行了splie()方法，但是由於splice方法執行后會改變數組，所以我的數組長度減少了一；但是我所獲取到的索引沒有變，從而導致我的第二次splice的時候就出現了bug。

這些我想了另外一個方法：執行一次splice索引應該也減去 “1” 才對，所以我寫了這樣一個算法；假設所有的索引都為 “n”,並且它們是以正序排列的，那么splice一次之后數組減去 “1”，相應的“n”也減去 “1”；splice第二次之后，“n-2”；第三次之后，“n-3”；

發現這個規律之后我想到的就是，先把所所需要刪除元素的索引計算出來。下面是一個例子：

var productItems = ["a", "b", "c", "d"];

var indexs = [1, 2, 3];

//先計算能被正常刪除的索引：

var newIndexs =   indexs.map(function(val, idx){    return val - idx;    })

/**因為splice是從第二次的時候出現bug的，
   *所以我們第一個索引的位置是正確的，
   *從第二次開始 “n-1”，也就是剛好對應索引數組的索引。**/

newIndexs.forEach(function(index){

    productItems.splice(index, 1)

})

productItems  //最后得到  ["a"]

　　

這一切都是建立在索引數組是正序排列的情況下，所以計算索引之前，先使用sort方法進行排序；

這樣就實現了不循環整個數組，從而刪除指定的某些元素。避免了由於數據過大造成的性能問題，畢竟每次刪除都去循環幾千條數據，這是很恐怖的！！！！