array.splice 從剩余元素中刪除值

Question

我遇到了 array.splice 的這種奇怪的副作用，並將代碼精簡到重新創建所需的最低限度。 是的，其中的大部分內容都可以使用 array.filter 在一行中完成，但我感興趣的是我是否犯了錯誤，或者是否發生了其他事情。

 var array = []; for (var i = 0; i < 10; i++) { array.push({ value: i }); } array.forEach(function(item, index, intArray) { if (item.value % 2 == 1) { item.odd = true; } else { item.odd = false; } if (item.odd) { console.log("Removing " + item.value); intArray.splice(index, 1); } }); console.log(array);

運行此 javascript 會按預期刪除奇數元素，但它也刪除了項目 2、4、6 和 8 的 item.odd 值。刪除 intArray.splice 行將帶回奇數數組元素，但它也帶來了支持所有元素的 item.odd 值。

我已經在 FF 和 Chrome 中對此進行了測試。 即使只有項目被傳遞到回調中，該行為仍然存在，索引通過 array.indexOf 計算，並從循環外部引用數組。

Answer 1

我認為當你在每個奇數處拼接數組時， forEach最終會跳過下一個項目，這是一個偶數。 所以這些項目根本不會被修改。

 var array = []; for (var i = 0; i < 10; i++) { array.push({ value: i }); } array.forEach(function(item, index, intArray) { console.log(item); // only prints out 0, 1, 3, 5, 7, 9 if (item.value % 2 == 1) { item.odd = true; } else { item.odd = false; } if (item.odd) { console.log("Removing " + item.value); intArray.splice(index, 1); } }); console.log(array);

換句話說， forEach只訪問每個索引一次。 所以說它到達索引 1 處的項 1。它刪除項 1。項 2 現在位於索引 1。但是索引 1 已經被訪問過，所以它移動到索引 2 處的項，即現在的項3.

Answer 2

由於splice是破壞性的並且forEach不是“實時”[它不會自動更新]，因此splice( index, 1 )之后的迭代將跳過“ old index+1 ”（下一次迭代索引），因為它已經“刪除” ' 向下到新索引（舊數組元素曾經所在的位置）。 使用 splice 刪除數組元素（無論刪除多少個元素）總會造成這種從舊索引到新索引的意外“滑動”，並且每次使用 splice 時都會跳過一個數組元素。

在循環中使用 splice 刪除數組元素時，我使用帶有負迭代的for循環。 當數組下滑時， for循環不會跳過它，因為它下降到下一個（負）迭代：

for ( let i = array.length - 1; i >= 0; i-- ){
  // do destructive stuff with splice
}

=> 從數組的末尾開始（不要忘記 -1，因為數組是從零開始的）； 在i >= 0繼續； 並在每次迭代時遞減 i。