在 Javascript 中访问(嵌套)对象和数组

Accessing (nested) objects and arrays in Javascript

提问人:Chris 提问时间:11/24/2020 最后编辑:Chris 更新时间:11/24/2020 访问量:3454

问:

我不确定我是否对如何组织我的阵列或如何访问它有误解。

主张很简单:拥有一系列汽车品牌和型号,并访问它们进行展示。

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)
  });

这返回我的对象和索引很好:

奥迪 0 宝马 1 本田 2

我无法弄清楚的是如何返回:

品牌: Audi 型号:A1、A2、A3、A4 可用单位: 378

...对于 3 辆车中的每一辆车。

我知道我必须遍历数组并为每个循环返回对象键/值对。但是我在正确的语法上遇到了问题。以下是我试图弄清楚如何制定的内容:

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

谢谢你帮忙:)

JavaScript 数组循环

评论

1赞 Yevhen Horbunkov 11/24/2020
你碰巧知道 Object.values() 和 Object.keys() 吗?
0赞 Yevhen Horbunkov 11/24/2020
由于给定输入的预期输出是松散描述的,因此您可能会对如何解决问题进行各种猜测,如果您提供预期结果(是否是分组数组/对象/其他),您可能会得到更接近点的答案。
0赞 Jonathan Bowman 11/24/2020
我要么不做一个数组,而是一个对象,要么结构你的对象,其中make是一个值,而不是一个键。如:。carBrandscarBrands = [ { make: ‘Audi’, models: [‘A4’, ‘A5’] }, { make: ‘BMW’, models: [‘M3’, ‘M4’] } ]
0赞 Davis Jones 11/24/2020
当我做这种事情时,方法(像这样:)是我的好朋友。Object.getOwnPropertyNamesObject.getOwnPropertyNames(carBrands)
0赞 Chris 11/24/2020
谢谢@YevgenGorbunkov我已经修改了我的帖子,希望能更清楚。

答:

1赞 Rubydesic 11/24/2020 #1
carBrands.flatMap(Object.entries)
    .map(([key, { models, unitsAvailable }]) => `${key} ${models.join(", ")} ${unitsAvailable}`)
    .forEach(v => console.log(v))
1赞 Jonathan Bowman 11/24/2020 #2

您遇到的问题是因为您使用的顶级密钥是唯一的。而不是命名你的密钥,等等。我会使用一个通用键,并将其值设置为您的品牌。这样,当你做一个循环时,你可以每次都要求相同的键:AudiBMWmake

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));

});

既然你谈到了想要在你的对象中维护关系,我鼓励你考虑如何将这些信息存储在数据库中,并以此为基础进行组织。

有很多.每个都有一个 、 和 许多 。carBrandscarBrandmakeunitsAvailablemodels

你不会为每个表制作一个新表,对吧?您将添加一个新行。因此,按照上述方式构建它与将其保存在数据库中的方式更接近,这有利于数据完整性并使其更加灵活。carBrand

在这种结构中,通过制造来获取东西仍然很容易,例如:

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

评论

0赞 Chris 11/24/2020
谢谢乔纳森。这是我最初拥有的,它有效,但我认为结构可能不正确,因为我需要让汽车成为模型/单元等的父级。在语义上,为未来提供证明。这就是为什么我说我不确定我的问题是否在于我如何构建阵列或我如何访问它。我想结构是第一个问题。感谢您的帮助:)
1赞 mottek 11/24/2020 #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

评论

0赞 Chris 11/24/2020
谢谢!这回答了我关于如何访问我的数组的问题。现在我需要确定我是要保留结构并使用您的解决方案,还是按照下面 Jonathan 的建议使结构更简单。感谢您的大力帮助!
0赞 mottek 11/24/2020
如果数据的结构掌握在你手中,这取决于你认为你将来需要它的方式。如果列出所有内容都可以,我建议按照乔纳森的建议去做。如果您需要访问来自特定品牌的数据,例如由于用户输入,您最好使用 dict () 而不是数组,因为这样您就可以使用carBrands={ Audi:{}, BMW:{}, Honda: {}, ... }carBrands[manufacturer]
0赞 paulsm4 11/24/2020
@Chris - 是的,我会从“BMW”等(键)更改为“make”(字段)。但除此之外,我不一定会改变任何事情。任何数据结构都会有“局限性”;Javascript 提供了丰富的替代方案,可以随心所欲地操作数据。Mottek 给出了一个很好的例子来如何使用 Object.keys。Rubydesic 给出了使用 Array.prototype.map 的一个很好的例子
0赞 Chris 11/24/2020 #4

这里的所有答案都是“正确”的,非常感谢大家!因此,没有一个可以比另一个更好。

我认为 Jonathan 对我过于复杂的数据结构提出了一个很好的观点。我将回到更简单的版本,其中“奥迪”等将是一个值,而不是一个键。

但我也将按照 Mottek 的建议构建当前结构和访问数据的样本。

当我更深入地研究这个项目时,我将决定哪个将是最终版本。

感谢大家的大力帮助!