為什么在javascript中向Array原型添加方法會中斷for循環上的迭代？

Question

我正在使用大型舊代碼庫，只是意識到有人這樣做：

Array.prototype.insertAt = function (i,el){ return this.splice(i,0,el); }
Array.prototype.deleteAt = function (i){return this.splice(i, 1); }

這就是我不能做到這一點的原因：

var derp = new Array();
derp.push('duh');
derp.push('what?');

for (var i in derp) {
    console.log(derp[i]);
}

好吧，不是我不能做到這一點，但是如果我做到了，我會得到意想不到的結果。 那不是得到兩行輸出（“ duh”和“ what？”），而是四行。 最后兩個是上面列出的兩個功能。

我不想刪除原始的原型函數（因為上帝知道什么取決於它們），但是我想知道是否有一種方法可以防止for循環遍歷添加的函數。

Answer 1

使用.forEach遍歷數組或常規for循環。 for in是用於對象迭代的，並且將包括原型上的所有屬性（這就是為什么Object.keys（obj）.forEach是對象迭代首選的原因，因為它在內部進行hasOwnProperty檢查）

Answer 2

方法1：使用常規（最佳支持）

for(var i=0;i<derp.length;i++){
    console.log(derp[i])
}

方法2：使用hasOwnProperty

for(var i in arr){
 if(arr.hasOwnProperty(i)){
     console.log(i)
  }
}

方法3：使用Object.defineProperty：

Object.defineProperty(Array.prototype, 'insertAt', {
    writeable: true,
    enumerable: false,
    value: Array.prototype.insertAt
})
Object.defineProperty(Array.prototype, 'deleteAt', {
    writeable: true,
    enumerable: false,
    value: Array.prototype.deleteAt
})

for(var i in derp){
    console.log(derp[i])
}

您使用哪種瀏覽器取決於您的瀏覽器支持，最后一種可以防止更改所編寫代碼的全部內容

Answer 3

for (var i in derp) {
    if(derp.hasOwnProperty(i)) 
        console.log(derp[i]);
}

但是然后，普通的for循環對於Array要比使用for-in （實際上是針對Object）要好得多

for (var i = 0; i < derp.length; i++) { 
    console.log(derp[i]);
}