使用 for in 循环访问嵌套对象

Question

在 javascript 中，我试图打印对象数组中列出的几个对象的值。这个问题与使用 for in 循环钻取 objects/arrays 有关。更具体地说，我想尽可能避免使用 for 循环（我刚刚学习 for/in 并试图很好地理解它）

对象看起来像这样：

var users = {
  'Students': [ 
    { first_name:  'Michael', last_name : 'Jordan'  },
    { first_name : 'John',    last_name : 'Rosales' },
    { first_name : 'Mark',    last_name : 'Guillen' },
    { first_name : 'KB',      last_name : 'Tonel'   }
  ],
  'Instructors': [
    { first_name : 'Michael', last_name : 'Jackson' },
    { first_name : 'Martin',  last_name : 'Puryear' }
  ]
};

我如何编写一个 returns 所有名称都埋在这个对象中的函数？ 我想控制台日志：

Students
1 - MICHAEL JORDAN
2 - JOHN ROSALES
3 - MARK GUILLEN
4 - KB TONEL
Instructors
1 - MICHAEL JACKSON
2 - MARTIN PURYEAR

我试过写几个 for/in 循环，但我总是得到意想不到的结果。 提前感谢您查看此内容。

Answer 1

使用array#map从数组中提取姓名：

function getNames(arr) {
  return arr.map(function(o, i) { // is the object, i is the index in the array
    return (i + 1) + ' - ' + o.first_name + ' ' + o.last_name;
  });
}

var users = {
 'Students': [ 
     {first_name:  'Michael', last_name : 'Jordan'},
     {first_name : 'John', last_name : 'Rosales'},
     {first_name : 'Mark', last_name : 'Guillen'},
     {first_name : 'KB', last_name : 'Tonel'}
  ],
 'Instructors': [
     {first_name : 'Michael', last_name : 'Jackson'},
     {first_name : 'Martin', last_name : 'Puryear'}
  ]
 };

var students = getNames(users.Students);

var instructors = getNames(users.Instructors);

console.log('Students\n', students);
console.log('Instructors', instructors);

Answer 2

您可以将这样的问题分解成更小的部分。首先，我们如何获取地图的各个元素？

for (var key in users) {
   console.log(key);
}

日志：

students
teachers

所以现在我们可以在该循环内一次获取 users 的成员：

var userArray = users[key];

即每次提取一个数组。现在你可以遍历数组，通过在我们已经有的循环中添加 ::

for(var i in userArray) {
    console.log(userArray[i]);
}

打印出列表中的单个项目，例如{first_name: 'Michael', last_name : 'Jordan'}

现在您可以用不同的方式打印它了。

 var item = userArray[i];
 console.log(i + ' ' + item[first_name] + ' ' + item[last_name]);

将所有这些部分放在一起，您就非常接近您的目标（您只需要大写 -- Google 它！）

所以我们在 Javascript 中拥有了我们需要实现的一切，这个伪代码总结了什么：

for each type of user in "users"
   for each user record in the list
       print the index, firstname and lastname
   end
end

您可以通过将内部循环提取到它自己的函数中来使它更整洁。您可以使用 array.map() 等函数式编程结构以更高级的方式将一个数组转换为另一个数组。但是上面的内容很好 "beginners' way" 来解决这个问题。

Answer 3

您可以通过以下方式简单地遍历您的密钥：

for (var userGroup in users) { ... }

您可以通过以下方式获取用户组列表：

users[userGroup].forEach((item, index) => item);

var users = {
  'Students': [ 
    { first_name:  'Michael', last_name : 'Jordan'  },
    { first_name : 'John',    last_name : 'Rosales' },
    { first_name : 'Mark',    last_name : 'Guillen' },
    { first_name : 'KB',      last_name : 'Tonel'   }
  ],
  'Instructors': [
    { first_name : 'Michael', last_name : 'Jackson' },
    { first_name : 'Martin',  last_name : 'Puryear' }
  ]
};

createLists(users, document.body, function(user) {
  return (user.first_name + ' ' + user.last_name).toUpperCase();
});

function createLists(dataMap, target, formatFn) {
  for (var groupName in dataMap) {
    target.appendChild(createTextEl('H3', groupName));
    var listEl = document.createElement('OL');
    addListItems(dataMap[groupName], listEl, formatFn);
    target.appendChild(listEl);
  }
}
function addListItems(dataList, target, formatFn) {
  dataList.forEach((item, index) => target.appendChild(createTextEl('LI', formatFn(item))));
}
function createTextEl(tagName, text) {
  var el = document.createElement(tagName);
  el.appendChild(document.createTextNode(text));
  return el;
}

* { font-size: 0.95em; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet"/>

使用 for in 循环访问嵌套对象

accessing nested objects with a for in loop

javascript

multidimensional-array

for-in-loop