javascript - Javascript push() 函数未将对象添加到数组

Question

我有一个 for 循环，循环遍历使用 jquery 选择器收集的一些 html 元素，并从中提取一些文本或值。每个循环都会创建一个新对象。对象很简单，它只是文本和值。Console.log 确认每个循环都成功创建了对象。

在 for 循环之外，我有一个变量（kvObjs），它被初始化为一个数组。在 for 循环结束时，我将新对象推送到数组中。但是 console.log 确认该数组保持为空。

这是一段更大的代码的一部分。这似乎是不起作用的部分。不工作的具体函数是 getKVs()，好吧，除了试图将对象推送到数组上的部分之外，它可以工作。

我向您保证，我查看了所有或几乎所有“类似问题”，但没有任何反应。不过，我可能错过了其中的一些东西。我觉得我忽略了一些明显的东西。

我尝试手动创建一个数组（var x = [“bob”，“steve”，“frank”]），然后设置另一个等于该数组的变量（var y = x），这似乎有效。我什至创建了一个对象数组，如 var x = [{"Key":"Bob","Value":10}, {"Key":"Steve","Value":5}]，我认为那行得通。但我的 for 循环没有。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>
    .Jobs {
        width: 300px;
        margin: 0 auto;
    }

    .Jobs li {
        display: grid;
        grid-template-columns: 1fr 50px;
        padding: 2px 5px 2px 7px;
        align-items: center;

    }

    .Jobs .value {
        text-align: right;
    }

    .Jobs p.value {
        padding-right: 7px;
    }

    .even {
        background-color: rgba(0,0,0,0.2);
    }
</style>

<div class="Jobs">
    <ul>
        <li class="kvp">
            <p class="key">Bob</p>
            <input class="value" type="number" value="3"/>
        </li>

        <li class="kvp even">
            <p class="key">Frank</p>
            <input class="value" type="number" value="2"/>
        </li>

        <li class="kvp">
            <p class="key">Tom</p>
            <input class="value" type="number" value="8"/>
        </li>

        <li class="kvp total even">
            <p class="key">Total</p>
            <p class="value">13</p>
        </li>
    </ul>
</div>

<script>

    class KV {
        constructor(key, value) {
            this.Key = key;
            this.Value = value;
        }
    }

    function getKVs(type) {
        type = "." + type + " .kvp";
        var elmts = $(type);
        var kvObjs = [];

        for (var i = 0; i < elmts.length; i++) {
            var elmt = $(elmts[i]);
            if(elmt.hasClass("total")) {
                // do nothing
            } else {
                var k = elmt.find(".key").text();
                var v = elmt.find("input").val();
                var kv = new KV(k, v);

                console.log(kv); // the kv object is successfully created

                kvObjs.push[kv];

                console.log(kvObjs.length); // but it is not being added to the array (length stays 0)
            }
        }


        return kvObjs;
    }

    var x = getKVs("Jobs");
    console.log(x); // so I'm transferring an empty array to x


</script>

我不断得到一个空数组。

标签： javascriptarraysjavascript-objects

Answer 1

push() 中的问题，替换kvObjs.push[kv]为kvObjs.push(kv); 读取push()=> 的语法array.push(element1, ..., elementN);

    class KV {
        constructor(key, value) {
            this.Key = key;
            this.Value = value;
        }
    }

    function getKVs(type) {
        type = "." + type + " .kvp";
        var elmts = $(type);
        var kvObjs = [];

        for (var i = 0; i < elmts.length; i++) {
            var elmt = $(elmts[i]);
            if(elmt.hasClass("total")) {
                // do nothing
            } else {
                var k = elmt.find(".key").text();
                var v = elmt.find("input").val();
                var kv = new KV(k, v);

                console.log(kv); // the kv object is successfully created

                kvObjs.push(kv);

                console.log(kvObjs.length); // but it is not being added to the array (length stays 0)
            }
        }


        return kvObjs;
    }

    var x = getKVs("Jobs");
    console.log(x); // so I'm transferring an empty arr

 .Jobs {
        width: 300px;
        margin: 0 auto;
    }

    .Jobs li {
        display: grid;
        grid-template-columns: 1fr 50px;
        padding: 2px 5px 2px 7px;
        align-items: center;

    }

    .Jobs .value {
        text-align: right;
    }

    .Jobs p.value {
        padding-right: 7px;
    }

    .even {
        background-color: rgba(0,0,0,0.2);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Jobs">
    <ul>
        <li class="kvp">
            <p class="key">Bob</p>
            <input class="value" type="number" value="3"/>
        </li>

        <li class="kvp even">
            <p class="key">Frank</p>
            <input class="value" type="number" value="2"/>
        </li>

        <li class="kvp">
            <p class="key">Tom</p>
            <input class="value" type="number" value="8"/>
        </li>

        <li class="kvp total even">
            <p class="key">Total</p>
            <p class="value">13</p>
        </li>
    </ul>
</div>