javascript - Lodash 或将两个对象数组与匹配键组合的最佳方法

Question

使用 google-map-react 热图。我需要从两个 api 响应创建一个新的对象数组，而不需要用于比较数组的键:值

let arr1 = [
  {"db_area":"1", "lat":"42.010531", "lng":"-87.670748"},
  {"db_area":"2", "lat":"42.001567", "lng":"-87.695137"},
  {"db_area":"3", "lat":"41.966063", "lng":"-87.656105"}
]

let arr2 = [
  {"comm_area":"1", "weight":"200"},
  {"comm_area":"2", "weight":"125"},
  {"comm_area":"3", "weight":"33"}
]

result = [
  {"lat":"42.010531", "lng":"-87.670748", "weight":"200"},
  {"lat":"42.001567", "lng":"-87.695137", "weight":"125"},
  {"lat":"41.966063", "lng":"-87.656105", "weight":"33"}
]

我尝试循环 booth 数组，它的格式正确，但它创建了一个总长度为两个数组总长度的数组

const mergedandfilterd = [];

const result = mergedandfiltered;

for (var i = 0; i < arr1.length; i++)
{
    for (var j = 0; j < arr2.length; j++)
    {
        if (obj1[i]['db_area'] == arr2[j]['comm_area'])
        {
            mergedandfiltered.push({
                "lat": arr1[i]['lat'],
                "lng": arr1[i]['lng'],
                "weight": arr2[j]['weight']
            });

            console.log(mergedandfiltered);
        }
    }
}

Answer 1

如果您首先创建一个 Map (weightMap) 来自arr2，那么你可以使用Array.map()在 arr1 上生成您想要的结果:

let arr1 = [
  {"db_area":"1", "lat":"42.010531", "lng":"-87.670748"},
  {"db_area":"2", "lat":"42.001567", "lng":"-87.695137"},
  {"db_area":"3", "lat":"41.966063", "lng":"-87.656105"}
];

let arr2 = [
  {"comm_area":"1", "weight":"200"},
  {"comm_area":"2", "weight":"125"},
  {"comm_area":"3", "weight":"33"}
];

let weightMap = new Map(arr2.map(({comm_area, weight}) => [comm_area, weight]));

let res = arr1.map(
  ({db_area, lat, lng}) => ({lat, lng, weight: weightMap.get(db_area)})
);

console.log(res);

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}