在javascript中合并两个字典数组

I have two arrays of dictionaries which look something like this:

我有两个字典数组，看起来像这样：

var lat = [{key:"2017-09-20T11:51:32.000Z", value:50.7825333},{key:"2017-09-20T11:51:33.000Z", value:50.7826},...];
var lon = [{key:"2017-09-20T11:51:32.000Z", value:-1.3075833},{key:"2017-09-20T11:51:33.000Z", value:-1.3076},...];

You might have guessed that one is an array of latitudes and one of longitudes!

你可能已经猜到一个是纬度和经度之一！

I would like an elegant way of merging time, lat, lon into one array. Both arrays contain the same keys (I should check that this is always the case!).

我想要一种将时间，lat，lon合并为一个数组的优雅方式。两个数组都包含相同的键（我应该检查这种情况总是如此！）。

var latLon = [{time:"2017-09-20T11:51:32.000Z", lat:50.7825333, lon:-1.3075833},...]

I have thrown something together that works but isn't pretty (ie iterate both arrays and append to a new one) but it feels like there must be a more stylish way using Object.assign with some nice lamdas. I am also using the D3.js library if that contains any useful methods.

我把一些东西放在一起工作但不漂亮（即迭代两个数组并附加到一个新的）但感觉必须有一个更时尚的方式使用Object.assign与一些不错的lamdas。我也在使用D3.js库，如果它包含任何有用的方法。

3 个解决方案

#1

This is based on the key time. Assuming there are no keys/times the same then you can do this:

这是基于关键时间。假设没有密钥/次数相同，那么你可以这样做：

var lat = [{key:"2017-09-20T11:51:32.000Z", value:50.7825333},{key:"2017-09-20T11:51:33.000Z", value:50.7826}];
var lon = [{key:"2017-09-20T11:51:32.000Z", value:-1.3075833},{key:"2017-09-20T11:51:33.000Z", value:-1.3076}];

var obj = {}, arr = lat.concat(lon);

arr.forEach(function(x){
    obj[x.key] ? obj[x.key]["lon"] = x.value : obj[x.key] = {lat: x.value, time: x.key};
});

var latlon = Object.keys(obj).map(function(x){
    return obj[x];
});

You are concatenating the 2 arrays to make one array. Then you are creating a dictionary using the time as a key (this is where it assumes that you do not have two lats and two longs with the same times). Since you know you are first getting the lats, your next key match should be the lons.

您正在连接2个数组以生成一个数组。然后，您使用时间作为键创建一个字典（这是假设您没有两个lats和两个longs具有相同的时间）。既然你知道自己第一次得到了拉特，那么你的下一场关键比赛就应该是lons。

#2

I would avoid using find() if there's any chance you will be dealing will a lot of items. find() needs to search through the second array for every item in lat which is not efficient.

我会避免使用find（），如果你有可能会处理很多项目。 find（）需要在第二个数组中搜索lat中的每个项目，这是无效的。

You can do this with a single map and reduce if you build a dictionary on the first loop and make the new array on the second.

您可以使用单个映射执行此操作，如果在第一个循环上构建字典并在第二个循环上创建新数组，则可以减少。

This also allows the lat and lon arrays to be in different orders.

这也允许lat和lon数组处于不同的顺序。

var lat = [{key:"2017-09-20T11:51:32.000Z", value:50.7825333},{key:"2017-09-20T11:51:33.000Z", value:50.7826}];
var lon = [{key:"2017-09-20T11:51:32.000Z", value:-1.3075833},{key:"2017-09-20T11:51:33.000Z", value:-1.3076}];

var obj = lat.reduce((a, c) => (a[c.key] = {time: c.key, lat:c.value}, a), {});
var arr = lon.map(lon => Object.assign(obj[lon.key], {lon: lon.value}));

console.log(arr);

#3

You can use Array#map method to generate the new array( assuming both arrays are in the same order ).

您可以使用Array＃map方法生成新数组（假设两个数组的顺序相同）。

var lat = [{key:"2017-09-20T11:51:32.000Z", value:50.7825333},{key:"2017-09-20T11:51:33.000Z", value:50.7826}];
var lon = [{key:"2017-09-20T11:51:32.000Z", value:-1.3075833},{key:"2017-09-20T11:51:33.000Z", value:-1.3076}];


var res = lat
  // iterate over the first array
  .map(function(o, i) {
    // generate the array element
    // where get values from element and
    // get value from second array using
    // the index
    return {
      time: o.key,
      lat: o.value,
      lon: lon[i].value
    }
  })

console.log(res);

// with ES6 arrow function
var res1 = lat.map((o, i) => ({time: o.key, lat: o.value, lon: lon[i].value}))


console.log(res1);

FYI : In case related array elements are not in same order then you need to get the element from the second array by comparing time value(you can use Array#find method) or you can generate a hashmap to map the object.

仅供参考：如果相关的数组元素的顺序不同，则需要通过比较时间值（可以使用Array＃find方法）从第二个数组中获取元素，或者生成一个hashmap来映射该对象。

With Array#find method :

使用Array＃find方法：

var lat = [{key:"2017-09-20T11:51:32.000Z", value:50.7825333},{key:"2017-09-20T11:51:33.000Z", value:50.7826}];
var lon = [{key:"2017-09-20T11:51:32.000Z", value:-1.3075833},{key:"2017-09-20T11:51:33.000Z", value:-1.3076}];



var res = lat
  .map(function(o) {
    return {
      time: o.key,
      lat: o.value,
      // get object by using find method
      lon: lon.find(function(o1) {
        return o1.key === o.key;
      }).value
    }
  })

console.log(res);

// with ES6 arrow function
var res1 = lat.map(o => ({
  time: o.key,
  lat: o.value,
  lon: lon.find(o1 => o1.key === o.key).value
}))

console.log(res1);

More efficient approach using a hashmap for referencing:

使用hashmap进行引用的更有效方法：

var lat = [{key:"2017-09-20T11:51:32.000Z", value:50.7825333},{key:"2017-09-20T11:51:33.000Z", value:50.7826}];
var lon = [{key:"2017-09-20T11:51:32.000Z", value:-1.3075833},{key:"2017-09-20T11:51:33.000Z", value:-1.3076}];

// generate reference hashmap for getting 
// value using the datetime string
var ref = lon.reduce(function(obj, o) {
  // set reference
  obj[o.key] = o.value;
  // return the reference object
  return obj;
  // set initial value as an empty object
}, {});

var res = lat
  .map(function(o) {
    return {
      time: o.key,
      lat: o.value,
      // get value from generated reference object
      lon: ref[o.key]
    }
  })

console.log(res);

#1