如何避免多个地图功能

时间:2018-02-05 06:53:15

标签: javascript jquery object

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

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"}
    ]
}

现在我需要比较学生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);

上面的代码工作正常。但是如果你查看我的代码,我已经多次使用了地图功能。我觉得我在表现上做错了。是否可以减少使用地图两次或任何其他更好的方法来实现相同的结果。请建议我。

代码段

&#13;
&#13;
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);
&#13;
<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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:4)

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

要解决此问题,您可以执行单个映射,其中您将id指定为新中间对象的键,格式为:

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

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

x[id]

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

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

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

答案 1 :(得分:2)

如果您构建的对象id且值status来自second.students然后您更新status first.students,那么复杂性会更好在这个对象上:

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"}
  ]
}

var statusById= second.students.reduce(function(m, e) {
    m[e.id] = e.status; 
    return m;
}, {});    

items = first.students.map(function(item){
   item.status = statusById[item.id] || item.status;
   return "<tr><td>"+item.name+"</td><td>"+item.age+"</td><td>"+item.degree+"</td><td>"+item.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>