Question

我有一个迭代对象的函数。

在HTML上，它应显示其自己的表行中对象的每个键和值。

Object.keys(nutrients).forEach(function(key) {
    const nutrientsList = nutrients[key];

    nutritionTable.innerHTML = `<tr>
                                    <td>${[ nutrientsList.label ]}</td>
                                    <td>${[ nutrientsList.quantity ]} ${[ nutrientsList.unit ]}</td>
                                </tr>`
});

当console.log按预期显示，但在HTML上覆盖所有以前的元素，并仅显示最后一个元素。

DEMO

如何改进代码并获得正确的结果？

Answer 1

import net.proxy.core.Connection; import net.proxy.core.Proxy; import net.proxy.core.exception.ProxyClosedException; import net.proxy.core.exception.ProxyConnexionException;：覆盖<{1}} x = y的价值}。

x（或y）：将 x += y值附加到x = x+y的当前值。
< / LI>

然后：

y

而不是

x

Answer 2

您在每次迭代时都会替换整个HTML内容。我假设你想每次追加。为此，请使用.insertAdjacentHTML()代替。

Object.keys(nutrients).forEach(function(key) {
    const nutrientsList = nutrients[key];

    nutritionTable.insertAdjacentHTML(
        "beforeend",
        `<tr>
             <td>${[ nutrientsList.label ]}</td>
             <td>${[ nutrientsList.quantity ]} ${[ nutrientsList.unit ]}</td>
        </tr>`);
});

这是从现有HTML添加新内容的首选方式，因为任何形式的.innerHTML分配（包括+=）都会在添加任何新内容之前销毁现有DOM。这会产生不良副作用。

顺便说一句，由于您使用的是ECMAScript 2015功能，因此您可能需要考虑for-of循环。

for (const nutrientsList of Object.values(nutrients)) {
    nutritionTable.insertAdjacentHTML(
        "beforeend",
        `<tr>
             <td>${[ nutrientsList.label ]}</td>
             <td>${[ nutrientsList.quantity ]} ${[ nutrientsList.unit ]}</td>
        </tr>`);
}

Answer 3

在每次迭代中，您都会更改nutrition必备的innerHTML的值（因此您实际上会在循环中的每次迭代中覆盖该值，最终值是循环中最后一次迭代的值）。

相反 - 您可以使用+=附加该值：

Object.keys(nutrients).forEach(function(key) {
    const nutrientsList = nutrients[key];

    nutritionTable.innerHTML += `<tr>
                                    <td>${[ nutrientsList.label ]}</td>
                                    <td>${[ nutrientsList.quantity ]} ${[ nutrientsList.unit ]}</td>
                                </tr>`
});

Vanilla JavaScript - Object.keys（object）.forEach仅显示最后一项

3 个答案: