JS 尋找陣列值，更新陣列內容[技術詢問]

javascript foreach

jinjasper 2021-12-07 15:50:24 ‧ 1115 瀏覽

分享至

各位先進大大，目前在練習JS，有一個小問題想要詢問
功能需求為：
1.輸入對應ID與數量欄位，增加陣列中相對應ID的數量
2.若陣列中無相對應的ID則增加一個上去
遇到問題：
1.第一次增加項目都沒問題，但增加不同ID的項目進去時，不會再對應ID增加數量，而是一直增加品項

想請各位大大再提點小弟一下，是否有哪邊沒注意到導致這個Bug產生
以及我打Code的方式是否有可以再做得更好的呢?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物件比對值</title>
</head>
<body>
    <label for="id">ID</label>
    <input type="text" id="id">
    <br>
    <label for="amount">數量</label>
    <input type="number" id="amount">
    <button id="button">push</button>

    <script>
        const prod = [
            {
                id:'2',
                amount:3
            },
            {
                id:'1',
                amount:2
            },
            {
                id:'3',
                amount:10
            }
        ]
        const button = document.getElementById('button');
        const amount = document.getElementById('amount');
        const id = document.getElementById('id');
        const itemList = [];
        function clickHandler(){
            if(id.value){
                if(itemList.length == 0){
                    // 如果清單內沒有品項
                    const product = prod.find(item=>{
                        return item.id == id.value;
                    }) 
                    itemList.push(product);
                }else{
                    // 若清單內有品項
                    itemList.forEach(product=>{
                        if(product.id == id.value){
                            // 若清單內品項重複
                            if(amount.value){
                                product.amount += parseInt(amount.value);
                            }else{
                                alert('請輸入數量');
                            }
                        }else if(product.id != id.value){
                            // 若清單內品項不重複
                            if(amount.value){
                                const item = prod.find(items =>{
                                    return items.id == id.value;
                                });
                                itemList.push(item);
                            }else{
                                alert('請輸入數量');
                            }
                        }
                    })
                }
            }
            console.log(itemList);
        }

        button.addEventListener('click',clickHandler);
    </script>

</body>
</html>

fillano iT邦超人 1 級 ‧ 2021-12-07 16:55:30 檢舉

不用管清單的長度，只要先在清單找品項：如果有，就加數量，如果沒有，就加品項跟數量。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

fillano

iT邦超人 1 級 ‧ 2021-12-07 17:04:38

像這樣：
https://jsfiddle.net/fillano/uhap5g3k/11/

回應 1
分享
檢舉

fillano iT邦超人 1 級 ‧ 2021-12-07 17:08:56 檢舉

考慮完整一點：
https://jsfiddle.net/fillano/uhap5g3k/15/

登入發表回應

Felix

iT邦研究生 2 級 ‧ 2021-12-07 17:51:12

建議您一開始就檢查是否有輸入，畢竟總不能函式執行後才發現原來走錯路了。

不知道 prod 的 amount 是否也要增加，因此假定點擊按鈕，只有 itemList 會增加。

function clickHandler() {
    if (!id.value || !amount.value) return alert('有欄位沒有被輸入！');
    /* itemList 中所有的 id */
    const ids = itemList.map(obj => obj.id);
    /* id.value 在 itemList 的第幾個位置 */
    const index = ids.indexOf(id.value);
    /* 欲修改 amount 之陣列的位置 */
    const pos = index > -1 ? index : itemList.length - 1;
    if (index === -1) {
        itemList.push(
            /* 拷貝 prod 中和 id.value 對應的物件 */
            {...prod.find(item => item.id === id.value)}
        );
    }
    itemList[pos].amount += parseInt(amount.value, 10);
    console.log(ids, index, itemList);
}