如何遍历数组中的对象并打印其属性？代码实现咨询

嘿，我来帮你搞定这个遍历数组渲染订单的问题！你的思路没问题，但有几个小细节调整下，就能让功能更完善、代码更规范啦～

先说说原代码的几个小问题 #

1. 用for...in遍历数组并不合适：for...in是为遍历对象属性设计的，它会遍历数组原型链上的所有可枚举属性，可能带来意外结果；
2. 直接拼接innerHTML会让所有订单文本堆在一起，可读性极差；
3. 没有确保DOM加载完成就执行代码：如果JavaScript放在页面头部，可能会出现找不到#ordersListed元素的情况；
4. HTML片段里的meta http-equiv="X-UA-Compatible"属性没写完，应该补全为ie=edge。

给你一个完整的修正方案 #

下面是完整的可运行代码，我加入了语义化的HTML结构、更安全的遍历方式，还确保了DOM加载时机：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Your Orders</title>
    <style>
        /* 可选：给列表加一点样式，让页面更美观 */
        #ordersListed {
            list-style-type: circle;
            padding-left: 2rem;
        }
        #ordersListed li {
            margin: 0.5rem 0;
            color: #333;
        }
    </style>
</head>
<body>
    <h2>Your Order History</h2>
    <!-- 用ul标签承载订单列表，符合网页语义 -->
    <ul id="ordersListed"></ul>

    <script>
        // 你的订单数组
        const orders = [
            {ID: "sampleID1", order: "string describing the first order"},
            {ID: "sampleID2", order: "string describing the second order"}
        ];

        // 等待DOM完全加载后再执行代码，避免找不到元素的错误
        document.addEventListener('DOMContentLoaded', function() {
            const orderList = document.querySelector("#ordersListed");
            
            // 用forEach遍历数组，这是数组遍历的最佳实践之一
            orders.forEach(order => {
                // 创建li元素，逐个添加到列表中
                const listItem = document.createElement('li');
                // 同时显示订单ID和描述，信息更完整
                listItem.textContent = `订单ID: ${order.ID} - ${order.order}`;
                orderList.appendChild(listItem);
            });
        });
    </script>
</body>
</html>

关键改进点解析 #

• DOM加载时机：通过DOMContentLoaded事件确保页面所有元素都加载完成后再执行JS，彻底避免querySelector返回null的问题；
• 数组遍历方式：用forEach代替for...in，专门针对数组元素遍历，不会遍历到原型链上的额外属性，更安全可靠；
• 语义化与可读性：用<ul>和<li>构建订单列表，不仅符合网页语义，还能让内容结构化，方便后续加样式；
• 内容安全性：用createElement + textContent的方式添加内容，比直接拼接innerHTML更安全，能避免潜在的XSS攻击（如果订单内容来自用户输入的话）。

如果你坚持要用原有的遍历方式 #

如果你习惯用for循环或者for...in，也可以这么写（但还是更推荐forEach）：

方案1：普通for循环

for(let i = 0; i < orders.length; i++) {
    const order = orders[i];
    orderList.innerHTML += `<li>订单ID: ${order.ID} - ${order.order}</li>`;
}

方案2：修正后的for...in

for(let x in orders) {
    // 只遍历数组自身的元素，排除原型链属性
    if(orders.hasOwnProperty(x)) {
        const order = orders[x];
        orderList.innerHTML += `<li>订单ID: ${order.ID} - ${order.order}</li>`;
    }
}

内容的提问来源于stack exchange，提问作者Jonathan B.