僅在條件語句中讀取為未定義的變量

Question

我有一個 jQuery function 從購物車 object 中刪除項目，該購物車在本地存儲中被字符串化。

function removeItemFromCart(pid){
    console.log("removing: ", pid)
    let cart = JSON.parse(localStorage.getItem('cart'));
    
    $.each(cart, function(index, value){
        console.log(value.productId);
        var p_id = value.productId;
        console.log(p_id);
        if (p_id == pid){
            cart.splice(index, 1);
            return;
        }
    });

    localStorage.setItem('cart', JSON.stringify(cart));

}

但是在我的控制台中，我收到以下錯誤（對於上下文，我的 js 文件是 cart.js）：

Uncaught TypeError: Cannot read properties of undefined (reading 'productId')
at cart.js:77:30
at Function.each (jquery.min.js:2:3003)
at removeItemFromCart (cart.js:76:11)
at HTMLButtonElement.<anonymous> (cart.js:46:21)
at HTMLButtonElement.dispatch (jquery.min.js:2:43064)
at v.handle (jquery.min.js:2:41048)
(anonymous) @ cart.js:77
each @ jquery.min.js:2
removeItemFromCart @ cart.js:76
(anonymous) @ cart.js:46
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2

並指向 if 語句中的 p_id 變量由於某種原因未定義。 最初 if 語句是(value.productId == pid)但我將其更改為調試這個問題。 我正在測試東西，發現 value.productId 確實存在於我本地存儲的購物車中的項目中，我能夠將它保存在一個變量中，甚至可以毫無問題地記錄它。

只有當我嘗試在條件語句中使用它時，它才會被讀取為未定義，但我不知道為什么。 下面是完全相同的文件中的另一個 function，它基本上使用完全相同的條件，並且可以正常工作而沒有打嗝。

function updateCart(productId, quantity){
    let cart = JSON.parse(localStorage.getItem('cart'));
    let foundProduct = false;
    $.each(cart, function(index, value){
        if (value.productId == productId){
            value.quantity += quantity;

            if (value.quantity < 0){
                cart.splice(index, 1);
            }
            foundProduct = true;
            return;
        }
    });

有誰知道為什么會出現這個問題以及我將如何調試它？

為了重現性，我的本地存儲有一個名為cart的鍵，其值為[{"productId":2,"quantity":3},{"productId":6,"quantity":1},{"productId":5,"quantity":1}]

Answer 1

我對這個問題的分析是錯誤的。

在我的條件語句中value.productId本身並不是問題。 經過一些調試后，我發現事實上我在迭代購物車時正在執行cart.splice() ，這將程序在循環期間使用的索引號弄亂了。 這就是為什么它抱怨值未定義的原因。

以下 stackoverflow 帖子幫助我確定了我的問題並提出了各種解決方案，包括反向迭代數組： 循環遍歷數組同時刪除項目