无法将新数据添加到基于交换机案例的阵列中

unable to add new data to a switch case based array

本文关键字:交换机 案例 阵列 添加 新数据 数据      更新时间:2023-09-26

Im在基于switch case语句向特定数组槽添加多个值时遇到一些问题。我可以从HTML下拉菜单中检索数据,可以区分所选元素,但不能在同一个槽中添加累积数据。每个新值都会覆盖以前的数据,而不是添加它

这是JS代码:

function addData(category,cost)
        {
            var costsArr = [0,0,0,0];
            var cat = category.options[category.selectedIndex].text;
            var cos = parseInt(cost);
            console.log("category: "+cat+"; cost: "+ cos);
            switch(cat)
            {
                case "food":
                {
                    costsArr[0]+=cos;
                    console.log("cost in [0]: " +costsArr[0]);
                    console.log("food was selected");
                    break;
                }
                case "house holds":
                {
                    costsArr[1]+=cos;
                    console.log("cost in [1]: " +costsArr[1]);
                    break;
                }
                case "clothes":
                {
                    costsArr[2]+=cos;
                    console.log("cost in [2]: " +costsArr[2]);
                    break;
                }
                default:
                {
                    //something..
                }
            }
        }

HTML代码:

<form name="inputForm">
     enter cost here<input type="text" id="costText">
     <select name="catDropMenu" id="catMenu">
         <option value="title" id="title">-- Choose category --</option>
         <option value="food" id="food">food</option>
         <option value="clothes" id="clothes">clothes</option>
         <option value="house" id="house">house holds</option>
         <option value="new" id="newCatID">New category</option>
     </select>
     <input type="button" name="addButton" value="Add" onclick="addData(document.getElementById('catMenu'),document.getElementById('costText').value)">
</form>

更改此

function addData(category,cost)
{
    var costsArr = [0,0,0,0];
    // body

到这个

var costsArr = [0,0,0,0];
function addData(category,cost)
{
    // body

使costsArr在全局范围内,这样每次调用addData时它都不会重置。当您调用addData时,当前的写入方式会将每个值重置为零,因为costsArr是在调用函数时定义的。如果在函数中定义,则一旦函数结束,成本数组将从内存中删除。

让我解释

对象(或javascript中的大多数变量,包括您的成本数组)存储在内存中,它们对应的变量只保存对应对象所在的内存位置。

一旦变量不再知道,称为垃圾收集器的东西就会从内存中删除对象

因此,考虑函数的寿命。一旦它完成,如果没有其他函数在它的范围内运行,可以访问它定义的变量,那么所有的内存现在都是不可访问的。所以垃圾收集器会删除它。因此,costsArr会被删除。

因此,为了避免这种情况,您需要在函数之外创建一个全局变量,为该函数创建持久数据。