在 Javascript 中訪問（嵌套）對象和數組

Question

我不確定我是否對如何組織陣列或如何訪問它有誤解。

提議很簡單：擁有一系列汽車品牌和型號，並訪問它們進行展示。

const carBrands = [
  {
    Audi: {
      models: ["A1", "A2", "A3", "A4"],
      unitsAvailable: 378,
    }
  },
  {
    BMW: {
      models: ["M1", "M2", "M3", "M4"],
      unitsAvailable: 413,
    },
  },
  {
    Honda: {
      models: ["H1", "H2", "H3", "H4"],
      unitsAvailable: 226,
    },
  }
];

我可以這樣訪問每個模型：

  carBrands.forEach((object, i) => {
    console.log(object, i)
  });

這 a 返回我的對象​​和索引很好：

奧迪 0 寶馬 1 本田 2

我想不通的是如何返回：

品牌：奧迪 型號：A1、A2、A3、A4 可用單位：378

... 對於 3 輛車中的每一輛車。

我知道我必須遍歷數組並為每個循環返回對象鍵/值對。 但是我在使用正確的語法時遇到了問題。 這是我試圖弄清楚如何制定的內容：

  let modelsToDisplay = [];
  carBrands.forEach((object, i) => {
    modelsToDisplay.push(<li key={i}>Make/Model/Units of each object</li>);
  });

感謝您的幫助:)

Answer 1

carBrands.flatMap(Object.entries)
    .map(([key, { models, unitsAvailable }]) => `${key} ${models.join(", ")} ${unitsAvailable}`)
    .forEach(v => console.log(v))

Answer 2

您遇到的問題是因為您使用的頂級鍵是唯一的。 而不是將您的鑰匙命名為Audi 、 BMW等。我會使用一個通用的鑰匙，例如make並將其值設置為您的品牌。 這樣，當您執行循環時，您可以每次都請求相同的密鑰：

const carBrands = [
  {
    make: 'Audi',
    models: ["A1", "A2", "A3", "A4"],
    unitsAvailable: 378
  },
  {
    make: 'BMW',
    models: ["M1", "M2", "M3", "M4"],
    unitsAvailable: 413
  },
];

carBrands.forEach(brand => {
    console.log(brand.make);

    brand.models.forEach(model => console.log(model));

});

既然您談到要維護對象中的關系，我鼓勵您考慮如何將這些信息存儲在數據庫中，並以此為基礎構建您的組織。

有很多carBrands 。 每個carBrand都有一個make 、 unitsAvailable和許多models 。

你不會為每個carBrand制作一個新表，對吧？ 您將添加一個新行。 因此，按照上面的方式構建它更接近於將它保存在數據庫中的方式，這有利於數據完整性並使其更加靈活。

在這種結構中，通過 make 獲取東西仍然很容易，例如：

let audiModels = carBrands.filter(brand => brand.make == 'Audi').models;

Answer 3

因為您的數組由 dict 對象組成，所以您需要考慮到您需要遍歷鍵。 在不修改輸入的情況下，您可以使用以下代碼來處理數據結構的內部值：

// For all defined objects
carBrands.forEach((object) => {
  // Determine manufacturers inside the current object (only 1 manufacturer per object in your case)
  var manufacturers = Object.keys(object);
  // For each manufacturer
  manufacturers.forEach((manufacturer) => {
    // Print manufacturer name
    console.log("Manufacturer: " + manufacturer);
    console.log("Models:");
    // For all models
    var models = object[manufacturer].models;
    models.forEach((model) => {
      // print model name
      console.log("  " + model);
    });
    // print available units
    console.log("Available units:");
    console.log("  " + object[manufacturer].unitsAvailable + "\n");
  });
});

輸出：

Manufacturer: Audi
Models:
  A1
  A2
  A3
  A4
Available units:
  378

Manufacturer: BMW
Models:
  M1
  M2
  M3
  M4
Available units:
  413

Manufacturer: Honda
Models:
  H1
  H2
  H3
  H4
Available units:
  226

Answer 4

這里的所有答案都是“正確的”，非常感謝大家！ 所以沒有一個比另一個更好。

我認為 Jonathan 對我過於復雜的數據結構提出了一個很好的觀點。 我將回到更簡單的版本，其中“奧迪”等將是一個值，而不是一個鍵。

但我也會按照 Mottek 的建議構建當前結構的示例並訪問數據。

當我深入研究該項目時，我將決定哪個是最終版本。

感謝大家的大力幫助！