使用Javascript - 比较有效的方式来“地图”两个阵列一起

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个）。

我需要完成的事情是在前端，我目前只显示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几乎不会花费任何时间。