javascript - 如何避免多重 map 功能

Question

我有两个对象。第一个有整个学校学生的完整详细信息记录。示例如

var first = {
 students: 
    [
     { id:'1', name:"suresh", age:"20", degree:"BSc", status:"obsent"},
     { id:'2', name:"ramesh", age:"21", degree:"BCom", status:"present"},
     { id:'3', name:"rajesh", age:"19", degree:"BA", status:"leave"},
     { id:'4', name:"satish", age:"28", degree:"BL", status:"obsent"}
   ]
}

第二个包含特定类(class)学生有关当天学生状态的信息。示例如

var second ={
 students: 
    [
     { id:'1',status:"present"},
     { id:'12',status:"obsent"},
     { id:'3',status:"obsent"},
     { id:'14',status:"leave"}
    ]
}

现在我需要比较学生ID，并需要根据结果显示状态。我通过以下方式实现了。

 items = first.students.map(function(item){
      status =item.status;
      second.students.map(function(key){
         if(key.id == item.id) { status = key.status }
      });
      return "<tr><td>"+item.name+"</td><td>"+item.age+"</td><td>"+item.degree+"</td><td>"+status+"</td></tr>";
  });

  $('table#main tbody').html(items);

上面的代码工作正常。但如果你看看我的代码，我已经多次使用了 map 功能。我觉得我在表演方面做错了一些事情。是否可以减少使用 map 两次或任何其他更好的方法来达到相同的结果。请推荐我。

代码片段

var first = {
  students: 
  [
   { id:'1', name:"suresh", age:"20", degree:"BSc", status:"obsent"},
   { id:'2', name:"ramesh", age:"21", degree:"BCom", status:"present"},
   { id:'3', name:"rajesh", age:"19", degree:"BA", status:"leave"},
   { id:'4', name:"satish", age:"28", degree:"BL", status:"obsent"}
  ]
}
var second ={
  students: 
  [
   { id:'1',status:"present"},
   { id:'12',status:"obsent"},
   { id:'3',status:"obsent"},
   { id:'14',status:"leave"}
  ]
}

items = first.students.map(function(item){
   status =item.status;
   second.students.map(function(key){
      if(key.id == item.id) { status = key.status }
   });
   return "<tr><td>"+item.name+"</td><td>"+item.age+"</td><td>"+item.degree+"</td><td>"+status+"</td></tr>";
});

$('table#main tbody').html(items);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main" cellspacing="2" border="1">
<thead>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Degree</th>
    <th>Stauts</th>
  </tr>
</thead>
<tbody>
</tbody>
</table>
</tbody>

</table>

Answer 1

由于对象的设置方式，查找时间看起来会是 O(n) 时间，因为您需要循环遍历每个学生 ID 的第一个学生数组。

为了解决这个问题，您可以创建一个映射，将 id 指定为新中间对象的键，格式如下:

x = {1: {...}, 2: {...}}

从那里，您现在可以进行恒定时间 O(1) 查找:

x[id]

唯一的额外工作是构建中间哈希，但这比上面的计算量要少。

请参阅下面的示例。请注意，它确实使用了 2 个 map ，但它与您的示例不同，因为它不是指数 map 中的 map :

var students = [
  { id:'1', name:"suresh", age:"20", degree:"BSc", status:"obsent"},
  { id:'2', name:"ramesh", age:"21", degree:"BCom", status:"present"},
  { id:'3', name:"rajesh", age:"19", degree:"BA", status:"leave"},
  { id:'4', name:"satish", age:"28", degree:"BL", status:"obsent"}
];

var studentIds = {};
students.forEach(function(student) {
  studentIds[student.id] = {name: student.name, age: student.age, degree: student.degree, status: student.status}
});

var second = [
  { id:'1',status:"present"},
  { id:'12',status:"obsent"},
  { id:'3',status:"obsent"},
  { id:'14',status:"leave"}
];

var studentStatuses = second.map(function(student) {
  // do whatever you have to do here
  return (studentIds[student.id] || {}).status;
});