循环遍历仅返回 1 object 的对象数组

Question

我有一个对象数组，当遍历它们时，我只能返回 1 个 object..

A室

1区

5区

19区

然后抛出错误

未捕获的类型错误：无法读取未定义的属性“区域名称”

不知道为什么我只返回 1 object 而不是 rest 然后得到那个错误

 (function() { function RoomsList() { let rooms = [{ RoomID: 1, RoomName: "Room A", Areas: [{ AreaID: 11, AreaName: "Area 1" }, { AreaID: 15, AreaName: "Area 5" }, { AreaID: 19, AreaName: "Area 19" }] }, { RoomID: 2, RoomName: "Room B", Areas: [{ AreaID: 12, AreaName: "Area 2" }, { AreaID: 16, AreaName: "Area 6" }] }, { RoomID: 3, RoomName: "Room C", Areas: [{ AreaID: 13, AreaName: "Area 3" }, { AreaID: 17, AreaName: "Area 7" }] }, { RoomID: 4, RoomName: "Room D", Areas: [{ AreaID: 14, AreaName: "Area 4" }, { AreaID: 18, AreaName: "Area 8" }] } ]; return rooms; } var roomAndAreasObject = RoomsList(); for (let i = 0; i < roomAndAreasObject.length; i++) { console.log(roomAndAreasObject[i].RoomName); for (let j = 0; j < roomAndAreasObject.length; j++) { console.log(roomAndAreasObject[i].Areas[j].AreaName); } } })();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

您的嵌套for循环应该检查当前对象的Areas属性的长度，而不是整个数组的长度。

for (let j = 0; j < roomAndAreasObject[i].Areas.length; j++) {

 (function() { function RoomsList() { let rooms = [{ RoomID: 1, RoomName: "Room A", Areas: [{ AreaID: 11, AreaName: "Area 1" }, { AreaID: 15, AreaName: "Area 5" }, { AreaID: 19, AreaName: "Area 19" }] }, { RoomID: 2, RoomName: "Room B", Areas: [{ AreaID: 12, AreaName: "Area 2" }, { AreaID: 16, AreaName: "Area 6" }] }, { RoomID: 3, RoomName: "Room C", Areas: [{ AreaID: 13, AreaName: "Area 3" }, { AreaID: 17, AreaName: "Area 7" }] }, { RoomID: 4, RoomName: "Room D", Areas: [{ AreaID: 14, AreaName: "Area 4" }, { AreaID: 18, AreaName: "Area 8" }] } ]; return rooms; } var roomAndAreasObject = RoomsList(); for (let i = 0; i < roomAndAreasObject.length; i++) { console.log(roomAndAreasObject[i].RoomName); for (let j = 0; j < roomAndAreasObject[i].Areas.length; j++) { console.log(roomAndAreasObject[i].Areas[j].AreaName); } } })();

Answer 2

您需要在内部循环中更新j的最大值：

 (function() { function RoomsList() { let rooms = [{ RoomID: 1, RoomName: "Room A", Areas: [{ AreaID: 11, AreaName: "Area 1" }, { AreaID: 15, AreaName: "Area 5" }, { AreaID: 19, AreaName: "Area 19" }] }, { RoomID: 2, RoomName: "Room B", Areas: [{ AreaID: 12, AreaName: "Area 2" }, { AreaID: 16, AreaName: "Area 6" }] }, { RoomID: 3, RoomName: "Room C", Areas: [{ AreaID: 13, AreaName: "Area 3" }, { AreaID: 17, AreaName: "Area 7" }] }, { RoomID: 4, RoomName: "Room D", Areas: [{ AreaID: 14, AreaName: "Area 4" }, { AreaID: 18, AreaName: "Area 8" }] } ]; return rooms; } var roomAndAreasObject = RoomsList(); for (let i = 0; i < roomAndAreasObject.length; i++) { console.log(roomAndAreasObject[i].RoomName); for (let j = 0; j < roomAndAreasObject[i].Areas.length; j++) { console.log(roomAndAreasObject[i].Areas[j].AreaName); } } })();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

或者为了避免此类错误，您可以使用for...of 语句：

 (function() { function RoomsList() { let rooms = [{ RoomID: 1, RoomName: "Room A", Areas: [{ AreaID: 11, AreaName: "Area 1" }, { AreaID: 15, AreaName: "Area 5" }, { AreaID: 19, AreaName: "Area 19" }] }, { RoomID: 2, RoomName: "Room B", Areas: [{ AreaID: 12, AreaName: "Area 2" }, { AreaID: 16, AreaName: "Area 6" }] }, { RoomID: 3, RoomName: "Room C", Areas: [{ AreaID: 13, AreaName: "Area 3" }, { AreaID: 17, AreaName: "Area 7" }] }, { RoomID: 4, RoomName: "Room D", Areas: [{ AreaID: 14, AreaName: "Area 4" }, { AreaID: 18, AreaName: "Area 8" }] } ]; return rooms; } var roomAndAreasObject = RoomsList(); for (const areasObject of roomAndAreasObject) { console.log(areasObject.RoomName); for (const area of areasObject.Areas) { console.log(area.AreaName); } } })();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>