JavaScript如何按顺序展示数组中全部对象而非仅最后单个元素

问题根因 #

• 重复覆盖同一DOM节点：你代码中的brandLogo、productDesc、modelNum、price都是同一组DOM节点的引用，每一轮循环的赋值操作都会直接覆盖上一轮写入的内容，循环结束后自然只会保留最后一个数组对象的信息。
• 逻辑混乱调用错误：你既单独执行了一次stoves.forEach遍历，又在init函数中重复遍历数组，且给出的代码片段中applSection函数没有明确定义，错误的执行顺序导致渲染逻辑异常。

修复方案 #

你需要为每个数组对象单独创建一套对应的DOM节点，再统一追加到页面容器中，示例代码如下：
首先在HTML中添加存放所有灶具信息的容器：

<div id="stove-container"></div>

对应的JS逻辑：

let stoves = [
    {
        id: 1,
        brand: "Frigidaire",
        modelNumber: "FCRC3012AW",
        description: "30\" Electric Coil Top Range ",
        color: "White",
        price: "$450.00",
        qty: "",
    },
    {
        id: 2,
        brand: "Frigidaire",
        modelNumber: "FFEF3016VB",
        description: "30\" Electric Coil Top Range  - Self Clean",
        color: "Black",
        price: "$465.00",
        qty: "",
    },
    {
        id: 3,
        brand: "Frigidaire",
        modelNumber: "FFEF3016VW",
        description: "30\" Electric Coil Top Range  - Self Clean",
        color: "White",
        price: "$465.00",
        qty: "",
    }
];
// 获取页面容器
const stoveContainer = document.getElementById('stove-container');

// 定义单个灶具的渲染函数
function renderStove(item) {
    // 创建新的DOM节点
    const stoveCard = document.createElement('div');
    stoveCard.className = 'stove-card';
    stoveCard.innerHTML = `
        <img src="imgs/brand-logos/frig.png" alt="品牌logo">
        <p class="product-desc">${item.description}</p>
        <div class="model-num">
            <h5>型号:</h5>${item.modelNumber}
        </div>
        <p class="price">${item.price}</p>
    `;
    // 追加到容器中
    stoveContainer.appendChild(stoveCard);
}

// 遍历渲染所有灶具
function init() {
    stoves.forEach(renderStove);
}

init();

你可以根据自己的需求调整stoveCard内的结构和样式，即可正常按顺序渲染所有数组对象。

内容的提问来源于stack exchange，提问作者Matt Geiter