javascript - JavaScript 中 "intersect"两个 JSON 对象数组的公共(public)属性的最佳方法？

Question

假设我们有两个 JSON 对象数组，arr1 和 arr2，它们共享一个公共(public)属性 id:

var arr1 = [{'id':10,'value1':'a1'},
            {'id':11,'value1':'b1'},
            {'id':12,'value1':'c1'},
            {'id':13,'value1':'d1'},
            {'id':14,'value1':'e1'}];

var arr2 = [{'id':100000,'value2':'a2'},
            {'id':11,'value2':'b2'},
            {'id':100002,'value2':'c2'},
            {'id':100003,'value2':'d2'},
            {'id':14,'value2':'e2'}];

我需要从 ID 匹配的两个数组中提取“值”项，即预期输出为:

[0] value1: b1, value2: b2
[1] value1: e1, value2: e2

我有一个嵌套循环解决方案的工作示例(见下文)，但速度很慢(想象一下这些数组很大，每次迭代都涉及一些 UI 操作)，所以我真的希望有一个更优雅、更快速的解决方案为此。

var arr1 = [{'id':10,'value1':'a1'},
            {'id':11,'value1':'b1'},
            {'id':12,'value1':'c1'},
            {'id':13,'value1':'d1'},
            {'id':14,'value1':'e1'}];

var arr2 = [{'id':100000,'value2':'a2'},
            {'id':11,'value2':'b2'},
            {'id':100002,'value2':'c2'},
            {'id':100003,'value2':'d2'},
            {'id':14,'value2':'e2'}];

for (var i = 0, len1 = arr1.length; i < len1; i++) {
	for (var j = 0, len2 = arr2.length; j < len2; j++) {
		if (arr1[i].id === arr2[j].id) {
			theFunction(arr1[i].value1, arr2[j].value2);
			break;
		}
	}
}

function theFunction(value1, value2) {
  var div = document.getElementById('out');
  div.innerHTML += '<br />value1: ' + value1 + ', value2: ' + value2;
}

<div id='out'>
</div>

Answer 1

构建 id 到 value1 的映射，然后遍历 arr2 以匹配它们:

var arr1 = [{'id':10,'value1':'a1'},
            {'id':11,'value1':'b1'},
            {'id':12,'value1':'c1'},
            {'id':13,'value1':'d1'},
            {'id':14,'value1':'e1'}];

var arr2 = [{'id':100000,'value2':'a2'},
            {'id':11,'value2':'b2'},
            {'id':100002,'value2':'c2'},
            {'id':100003,'value2':'d2'},
            {'id':14,'value2':'e2'}];

var value1s = {};

arr1.forEach(function(item) {
  value1s[item.id] = item.value1;
});

arr2.forEach(function(item) {
  if (item.id in value1s) {
    theFunction(value1s[item.id], item.value2);
  }
});

function theFunction(value1, value2) {
  var div = document.getElementById('out');
  div.innerHTML += '<br />value1: ' + value1 + ', value2: ' + value2;
}

<div id='out'>
</div>