Javascript - 将 "map"两个数组放在一起的更有效方法

Question

我有两个对象数组(我根据一些用户输入从服务器接收):

array1 = [{id:1, name:Bob}, {id:2, name:John}, {id:3, name:Mary}];
array2 = [{id:2, field:true},{id:2, field:true}, {id:3, field:false}];

两个数组中的 id 相互对应(它们是用户 id)。在现实生活中，这些数组会更大(数组 1 中最多 8000 个元素，数组 2 中最多 16000 个元素)。

我需要完成的事情是在前端，我目前只显示显示给用户 ID 和字段的 array2 信息。问题是前端用户不认识任何人的用户 ID，而是通过他们的名字认识他们。我需要一个包含如下对象的数组:{id:'',name:'',field:''}。

我的第一个想法是创建一个新数组并“合并两个数组”:

var new_array = [];

for (var i = 0; i < array2.length; i++) {
  var name = 'Unknown';
  for (var j = 0; j < array1.length; j++) {

    if (array1[j].id === array2[i].id) {
      name = array1[j].name;
    }

    this.new_array.push({
      id: array2[i].id,
      name: name,
      field: array1[j].field
    });
  }
}

所以我遍历第二个数组并检查 id 是否与第一个数组的 id 匹配。如果是，我从第一个数组中获取名称，这就是用户名，所以这就是我获取用户名的方式。

这行得通，但它在前端有点慢，需要几秒钟才能完成，如果有很多项目，用户体验会感觉不好，需要等待很多时间。我正在寻找一种更有效的方法来完成我需要做的事情。

Answer 1

遍历一个数组并创建一个对象以将 id 值映射到条目:

var array2idx = array2.reduce(function(map, value) {
  map[value.id] = value;
  return map;
}, {});

现在您可以通过简单的查找找到 array2 值:

var new_array = [];
for (var i = 0; i < array1.length; i++) {
  var v2 = array2idx[array1[i].id];
  if (v2) {
    new_array.push({
      id: v2.id,
      name: array1[i].name,
      field: array1[i].field
    });
  }
}

那应该快得多。在索引对象中查找 id 几乎不需要任何时间。