如何循环遍历 Javascript 对象，将它们显示在表格中

Question

我第三天上课，我们应该做一个汽车瞄准器来使用物体。我有四个对象。我想为每个人制作一张桌子，左边是他们的钥匙，右边是他们的价值。四张桌子并排。我更愿意循环按键来制作和循环按键，因为我一直在玩并且失败得很惨。任何帮助将不胜感激。我有四个并排的 div，我想用表格填充它们。这是我的对象：

这是我的对象和价值观：

let Accord = new Car("Accord", 22500, "Crystal White", "alloy", "bose", "leather", "tinted");
let CRV= new Car("CR-V", 28400, "Midnight Black", "alloy", "stock", "cloth", "no tint");
let Pilot = new Car("Pilot", 36796, "Modern Gray Metallic", "alloy", "bose", "leather", "tinted");
let Fit = new Car("Fit", 17499, "Raspberry Blue", "steel", "stock", "cloth", "no tint");

//Here is the entire object:

class Car extends Vehicle {
    wheels: string;
    stereo: string;
    seatsMaterial: string;
    tint: string;
    constructor(model, price, color, wheels, stereo, seatsMaterial, tint) {
        super(model, price, color);
        this.wheels = wheels;
        this.stereo = stereo;
        this.seatsMaterial = seatsMaterial;
        this.tint = tint;
    }
}

Answer 1

基本上，您希望遍历数组中的项目并为每个项目绘制一个新行。

可以这样轻松完成：

function makeTable ( object ) {
    // Check type
    if ( typeof object !== 'object' ) return false;

    // Start our HTML
    var html = "<table><tbody>";
    // Loop through members of the object
    for ( var key in object ) {
        // https://jslinterrors.com/the-body-of-a-for-in-should-be-wrapped-in-an-if-statement
        if ( !object.hasOwnProperty(key) ) continue;
        // Add our row:
        html += "<tr><th>" + key + "</th><td>" + object[key] + "</td></tr>";
    }
    // Finish the table:
    html += "</tbody></table>";
    // Return the table
    return html;
}

然后你可以像这样运行它：

document.body.innerHTML = makeTable(myCarObject);
document.getElementById('some-id').innerHTML = makeTable(myCarObject);

关于上述代码的一些说明

1. 检查类型 - 您要确保传递的参数实际上是一个对象，以免它可能出现意外行为。
2. .hasOwnProperty 调用 - 正如 here 所解释的，当您循环访问对象时，有时对象可能具有意想不到的属性。这是由于它们的原型以及它们从它继承的任何属性。确保代码按预期运行的一个好方法是在对象不具有此属性时 continue 循环