Question

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

A室

区域1

5区

19区

然后引发错误

未捕获的TypeError：无法读取未定义的属性'AreaName'

不确定为什么我只返回1个对象，而不返回其余对象，然后得到该错误

(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 statement：

(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>

遍历对象数组仅返回1个对象

2 个答案: