如何使用 for 循環遍歷數組值？

Question

我正在嘗試使用 for 循環遍歷 JavaScript 中的數組值。 for 循環還將值輸出到頁面上。

我已經成功地做到了這一點，但似乎有一個錯誤，因為頁面上沒有任何內容，但是當我檢查時沒有控制台錯誤。

 var cars = { 0: { make: ["Mazda"], type: ["6 Saloon"], colour: ["Red"], topspeed: ["131mph"], oto60: ["10.0s"], price: ["&#163;18,282"], condition: ["Good"], year: ["2018"] }, 1: { make: ["Ford"], type: ["Mondeo Sedan"], colour: ["Beige"], topspeed: ["116mph"], oto60: ["11.0s"], price: ["&#163;22,900"], condition: ["Clean"], year: ["2016"] }, 2: { make: ["Kia"], type: ["Rio"], colour: ["White"], topspeed: ["106mph"], oto60: ["12.6s"], price: ["&#163;3,900"], condition: ["Average"], year: ["2004"] }, 3: { make: ["Audi"], type: ["A4"], colour: ["Black"], topspeed: ["149mph"], oto60: ["7.6s"], price: ["&#163;15,300"], condition: ["Excellent"], year: ["2015"] }, 4: { make: ["Mercedes Benz"], type: ["C Class"], colour: ["Red"], topspeed: ["148mph"], oto60: ["6.7s"], price: ["&#163;15,462"], condition: ["Good"], year: ["2016"] }, 5: { make: ["BMW"], type: ["1 Series"], colour: ["Grey"], topspeed: ["124mph"], oto60: ["10.3s"], price: ["&#163;12,293"], condition: ["Clean"], year: ["2015"] } }; var i; for (i = 0; i < cars.length; i++) { document.getElementById("demo").innerHTML = cars[i]["type"]; }

 <p id="demo"></p>

Answer 1

你遇到的問題是你沒有一個陣列你有一個 object。

有很多方法可以遍歷對象，這里我使用for in 。

由於我不確定您為什么將字符串隨機設置為 arrays，因此我添加了一個join以防萬一。

 var cars = { 0: { make: ["Mazda"], type: ["6 Saloon"], colour: ["Red"], topspeed: ["131mph"], oto60: ["10.0s"], price: ["&#163;18,282"], condition: ["Good"], year: ["2018"] }, 1: { make: ["Ford"], type: ["Mondeo Sedan"], colour: ["Beige"], topspeed: ["116mph"], oto60: ["11.0s"], price: ["&#163;22,900"], condition: ["Clean"], year: ["2016"] }, 2: { make: ["Kia"], type: ["Rio"], colour: ["White"], topspeed: ["106mph"], oto60: ["12.6s"], price: ["&#163;3,900"], condition: ["Average"], year: ["2004"] }, 3: { make: ["Audi"], type: ["A4"], colour: ["Black"], topspeed: ["149mph"], oto60: ["7.6s"], price: ["&#163;15,300"], condition: ["Excellent"], year: ["2015"] }, 4: { make: ["Mercedes Benz"], type: ["C Class"], colour: ["Red"], topspeed: ["148mph"], oto60: ["6.7s"], price: ["&#163;15,462"], condition: ["Good"], year: ["2016"] }, 5: { make: ["BMW"], type: ["1 Series"], colour: ["Grey"], topspeed: ["124mph"], oto60: ["10.3s"], price: ["&#163;12,293"], condition: ["Clean"], year: ["2015"] } }; for(car in cars){ document.getElementById("demo").innerHTML += cars[car].type.join("") + "<br>"; }

 <p id="demo"></p>

Answer 2

cars 是 object，所以 cars.length 將是未定義的，這就是為什么你的 for 循環永遠不會運行。

如果您想保留 object 和數字作為名稱，您可以使用 Object 密鑰

Object.keys(cars).map(object => {
 console.log(object.type)
})

如果您可以編輯值，只需將汽車定義為數組並保持循環

var cars = [{
    make: ["Mazda"],
    type: ["6 Saloon"],
    colour: ["Red"],
    topspeed: ["131mph"],
    oto60: ["10.0s"],
    price: ["£18,282"],
    condition: ["Good"],
    year: ["2018"]
  }]

Answer 3

你需要一個循環數組

var cars = [
  {
    make: ["Mazda"],
    type: ["6 Saloon"],
    colour: ["Red"],
    topspeed: ["131mph"],
    oto60: ["10.0s"],
    price: ["£18,282"],
    condition: ["Good"],
    year: ["2018"],
  }
];

Answer 4

正如@imvain2 所指出的，你有一個 object，而不是一個數組。 for in循環的替代方法是for of循環，如下所示。

for (var car of Object.values(cars)) {
  document.getElementById("demo").innerHTML += car.type + "</br>";
}

演示

 var cars = { 0: { make: ["Mazda"], type: ["6 Saloon"], colour: ["Red"], topspeed: ["131mph"], oto60: ["10.0s"], price: ["&#163;18,282"], condition: ["Good"], year: ["2018"] }, 1: { make: ["Ford"], type: ["Mondeo Sedan"], colour: ["Beige"], topspeed: ["116mph"], oto60: ["11.0s"], price: ["&#163;22,900"], condition: ["Clean"], year: ["2016"] }, 2: { make: ["Kia"], type: ["Rio"], colour: ["White"], topspeed: ["106mph"], oto60: ["12.6s"], price: ["&#163;3,900"], condition: ["Average"], year: ["2004"] }, 3: { make: ["Audi"], type: ["A4"], colour: ["Black"], topspeed: ["149mph"], oto60: ["7.6s"], price: ["&#163;15,300"], condition: ["Excellent"], year: ["2015"] }, 4: { make: ["Mercedes Benz"], type: ["C Class"], colour: ["Red"], topspeed: ["148mph"], oto60: ["6.7s"], price: ["&#163;15,462"], condition: ["Good"], year: ["2016"] }, 5: { make: ["BMW"], type: ["1 Series"], colour: ["Grey"], topspeed: ["124mph"], oto60: ["10.3s"], price: ["&#163;12,293"], condition: ["Clean"], year: ["2015"] } }; for (var car of Object.values(cars)) { document.getElementById("demo").innerHTML += car.type + "</br>"; }

 <p id="demo"></p>