javascript - 如何访问嵌套数组的值？

Question

我在我想从中检索属性的对象数组中有一个数组。我已经完成了 here ，但它看起来很笨重。有没有更好的方法来遍历每个房间内的每个 StaffList 数组？

window.onload = getInitials;
var data = {
    "room" : [
        {
            "id" : 1,
            "StaffList": [
                {                  
                  "inroom": true,                  
                  "initials": "MG"
                },
                {
                  "inroom": false,
                  "initials": "CT"
                },
                {
                  "inroom": true,
                  "initials": "MS"
                }
            ]
        },
        {
            "id" : 2,
            "StaffList": [
                {                  
                  "inroom": true,                  
                  "initials": "MG"
                },
                {
                  "inroom": false,
                  "initials": "CT"
                },
                {
                  "inroom": true,
                  "initials": "MS"
                },
                {
                  "inroom": true,
                  "initials": "MA"
                }
            ]
        }   

    ]
}

function getInitials() {
    var len = data.room.length;
    for(i = 0; i < len; i++) {
        var staffArray = data.room[i].StaffList;
        var room = data.room[i].id;
        if( staffArray != null ) {
            var allStaff = staffArray.filter(function(person) {
                if ( person.initials ) {
                    var inits = person.initials;
                    setInitials(room, inits);
                }
            });
        }
    }
}

function setInitials(room, initials) {
    //get element by ID
    //var staffContainer = $('#div' + room);
    var staffContainer = document.getElementById('div' + room);
    if(staffContainer != null) {
        //create new div to append
        var newDiv = document.createElement('div');
        newDiv.innerHTML = initials; 
        //append newly created <div>
        staffContainer.append(newDiv);
    }
}

Answer 1

你可以使用一些forEach:

data.room.forEach(function(room) {
  room.StaffList.forEach(function(person) {
    setInitials(room.id, person.initials);
  });
});

在这里，我们首先遍历每个 room，然后遍历 StaffList 的每个 person。由于第二个 forEach 在第一个 inside 中，我们可以访问它的范围(通过闭包，参见 How do JavaScript closures work? )。然后我们可以为 setInitials 使用我们的新参数，room 和 person。

注意没有使用 var 语句。当您不需要创建状态(变量)时，请不要创建它。更少的状态通常也意味着更少的错误。但是，在您的 setInitials 函数中，使用容器状态和新的 div 是可行的方法。

PS:关于您的代码的其他一些事情让我很感兴趣。您的变量 room 不是房间对象，而是一个 id。这是误导!确保为正确的事物使用正确的名称。在这里，如果您想要一个状态来存储房间的 ID，请将其命名为 roomId。

---

您在评论中说，如果 inroom 值为真，您还想在创建的 div 上添加一个类(顺便说一下，您应该 CamelCase它)。在这种情况下，您可以将它作为 setInitials 的第三个参数传递，然后在函数体中根据它的值添加类。