Question

在javascript中，我试图打印对象中数组中列出的几个对象的值。问题与使用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' }
  ]
};

我怎样才能编写一个返回此对象中所有名称的函数？我喜欢控制日志：

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

我曾尝试为/循环编写一对，但我不断得到意想不到的结果。 提前感谢您查看此内容。

Answer 1

您可以将此类问题分解为更小的部分。首先，我们如何了解地图的各个元素？

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]);

把所有这些碎片放在一起，你就非常接近你的目标（你只需要大写 - 谷歌吧！）

因此，我们拥有了在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()等函数式编程结构将一个数组转换为另一个数组，从而以更高级的方式完成。但上面的部分很好，初学者和＃39;方式＆＃34;解决问题。

Answer 2

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

＆＃13;

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);

＆＃13;

Answer 3

您的意外结果必须是因为for ... in也会迭代原型链中的属性。

使用Object.keys仅获取您定义的属性

＆＃13;

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 properties = Object.keys(users);

for (var i = 0; i < properties.length; i++) {
  console.log(properties[i]);
  var users_array = users[properties[i]];
  for(var j = 0; j < users_array.length; j++)
    console.log((j+1) + " - " + users_array[j].first_name + " " + users_array[j].last_name);
}

＆＃13;

Answer 4

您可以通过以下方式循环访问您的密钥：

Game

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

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; }

使用for循环访问嵌套对象

4 个答案: