Javascript TypeError：未定義の 'indexOf'プロパティを読み取ることができません

Question

このコードでは、cart_products配列から要素を削除します。

var cart_products = ["17^1", "19^1", "18^1"]; 
var product = 17; 

$.each(cart_products,function(key, item) { 
    if(item.indexOf(product+"^") !== -1){ 
     cart_products.splice(key, 1); 
    } 
}); 

しかし、私はGoogle Chromeのコンソールでこのエラーを取得：

Uncaught TypeError: Cannot read property 'indexOf' of undefined

は、コードに何か問題はありますか？

ありがとうございました。

Answer 1

問題は、それが最後に到達する時間によって、インデックス2にあるように使用されたエントリが存在しなくなった、jQueryの$.eachはそれをループしているときにがに配列を変更していることです。 （私は$.eachがそのように動作しますが、私は、少なくとも5年間で$.eachを使用し、そう...していない私は少し驚いて認める）

目標は、配列からマッチを削除する場合より良い選択はfilterです：

var cart_products = ["17^1", "19^1", "18^1"]; 
 
var product = 17; 
 

 
cart_products = cart_products.filter(function(item) { 
 
    return item.indexOf(product+"^") === -1; 
 
}); 
 
console.log(cart_products);

...またはかなり新しいものは退屈forループを使用して作成するよりも、インプレース配列を変更することが重要です交互場合as Andreas points outアレイを介し後方をループし、あなたが物事を削除するとは関係ありませんので：

var cart_products = ["17^1", "19^1", "18^1"]; 
 
var product = 17; 
 

 
var target = product + "^"; 
 
for (var index = cart_products.length - 1; index >= 0; --index) { 
 
    if (cart_products[index].indexOf(target) !== -1) { 
 
    cart_products.splice(index, 1); 
 
    } 
 
} 
 
console.log(cart_products);

Answer 2

まず第一に、あなたはjQueryのにこのため、各を使用する必要はありません。第2に、あなたが操作している配列を変更するのは良い考えではありません。配列から要素を削除する場合は、filterを使用します。フィルタには次のシグネチャがあります。

someArray.filter(function(item, index, array) { 
    // return a value that is truthy to keep an item or falsey to remove it 
}) 

フィルタは、必要な値だけを持つ新しい配列を返します。つまり、元のアレイを混乱させるわけではありません。とにかく良いアイデアです。あなたの場合、次のようになります：

var filteredProducst = cart_products.filter(function(item) { 
    return item.indexOf(product + "^") 
})