Javascript -遍历对象数组

pkbketx9  于 2023-01-19  发布在  Java
关注(0)|答案(4)|浏览(160)
const module = {
      video: [
         { id: 1, title: 'video', component: <Video />},
      ],
      condensed: [
         { id: 2, title: 'condensed', component: <Condensed /> },
      ],
      full: [
         { id: 3, title: 'full', component: <Full /> },
      ],
   };

有没有一种方法可以循环遍历一个命名数组的对象数组?希望我使用了正确的语言来描述这个。我希望打印出每个数组的id和title。
如果数据看起来像这样,我相信我可以使用for循环(但我意识到我可以使用forEach或map):

const module = {
      video: [
         { id: 1, title: 'video', component: <Video />},
         { id: 2, title: 'condensed', component: <Condensed /> },
      ],

for (var key in module.video) {
    var obj = module.video[key];
    // ...
}
fiei3ece

fiei3ece1#

如果你想遍历模块对象,你可以简单地使用for...in

for (var el in module) {
        // Whatever you want to do
    }

这里你需要使用module[el]来获得所有的对象。如果你想要一种方法来迭代所有的子对象,你可以简单地使用一个for...in,里面有一个foreach

for (var el in module) {
        module[el].forEach((element) => {
            // Whatever you want to do
        });
    }
ep6jt1vc

ep6jt1vc2#

可以按如下方式将for-inArray#each一起使用:

const module = { video: [ { id: 1, title: 'video', component: '<Video />'}, ], condensed: [ { id: 2, title: 'condensed', component: '<Condensed />' }, ], full: [ { id: 3, title: 'full', component: '<Full />' }, ], };

for( const key in module ) {
    module[key].forEach(
        ({id,title}) => console.log( id, title )
    );
}

或者...

您可以将for-ofObject.valuesArray#forEach一起使用,如下所示:

const module = { video: [ { id: 1, title: 'video', component: '<Video />'}, ], condensed: [ { id: 2, title: 'condensed', component: '<Condensed />' }, ], full: [ { id: 3, title: 'full', component: '<Full />' }, ], };

for( const value of Object.values(module) ) {
    value.forEach(
        ({id,title}) => console.log( id, title )
    );
}
2lpgd968

2lpgd9683#

forEach对于您的用例来说是最简单的

const module = {
  video: [
    { id: 1, title: "video" },
    { id: 2, title: "condensed" },
  ],
};

// option 1
module.video.forEach(({ id, title }) => {
  console.log(id, title);
});

// option 2
for (var key in module.video) {
  const { id, title } = module.video[key];
  console.log(id, title);
}

// option 3
for (const item of module.video) {
  const { id, title } = item;
  console.log(id, title);
}

如果需要遍历主对象和内部数组

const module = {
  video: [{ id: 1, title: "video", component: "" }],
  condensed: [{ id: 2, title: "condensed", component: "<Condensed />" }],
  full: [{ id: 3, title: "full", component: "<Full />" }],
};

Object.entries(module).forEach(([key, items]) => {
  console.log("-->", key);
  items.forEach(({ id, title }) => {
    console.log(id, title);
  });
});
rkue9o1l

rkue9o1l4#

您可以简单地通过Object.keys()方法获取对象键,然后通过Array.forEach()迭代这些键值以获取idtitle属性值。
现场演示**:**

const module = {
  video: [
    { id: 1, title: 'video', component: '<Video />'},
  ],
  condensed: [
    { id: 2, title: 'condensed', component: '<Condensed />' },
  ],
  full: [
    { id: 3, title: 'full', component: '<Full />' },
  ]
};

Object.keys(module).forEach(key => {
    module[key].forEach(obj => {
    console.log('ID : ', obj.id);
    console.log('Title : ', obj.title);
  })
});

相关问题