D3 - 如何根据行索引合并 2 个数组

Question

我正在使用 D3 进行可视化，需要根据行索引合并 2 个数组：

var links = 
[
{"source":"a0","target":"a0","s_portfolio":"a","t_portfolio":"a","SOURCE_TYPE":"APP","DES_TYPE":"APP"},
{"source":"a1","target":"a2","s_portfolio":"a","t_portfolio":"c","SOURCE_TYPE":"APP","DES_TYPE":"APP"},
{"source":"a1","target":"a2","s_portfolio":"a","t_portfolio":"c","SOURCE_TYPE":"APP","DES_TYPE":"APP"}  
];

var files =
[
{"File_Desc":"","DataName":""},
{"File_Desc":"Date","DataName":"Dates.01012016"},
{"File_Desc":"Address","DataName":"Address.01012016"}    
    ];

获得：

var result =
[
{"source":"a0","target":"a0","s_portfolio":"a","t_portfolio":"a","SOURCE_TYPE":"APP","DES_TYPE":"APP","File_Desc":"","DataName":""},
{"source":"a1","target":"a2","s_portfolio":"a","t_portfolio":"c","SOURCE_TYPE":"APP","DES_TYPE":"APP","File_Desc":"Date","DataName":"Dates.01012016"},
{"source":"a1","target":"a2","s_portfolio":"a","t_portfolio":"c","SOURCE_TYPE":"APP","DES_TYPE":"APP","File_Desc":"Address","DataName":"Address.01012016"}
]

Answer 1

如果您可以使用后期模型 JavaScript（又名 ES2015）， 最短路径是这样的：

var result = links.map((d,i) => Object.assign({}, d, files[i]));

这很短。它也不会修改links 或files（如果您希望将它们与result 分开使用）。

附言

cmets 建议您关注替代解决方案的运行时间。一般来说，他们都很好，尤其是。作为 d3 应用程序中常见的一种一次性数据设置。但是，如果您有大型数据集或经常运行记录合并，那么您可能需要优化。

如果您愿意更新现有记录集而不是创建新记录集：

links.forEach((d,i) => Object.assign(d, files[i]));

在此之后，links 具有更新的记录。它的运行速度比其他解决方案快 7-10 倍，大概是因为它不会创建大量新对象。如果您完成了原始的、未合并的 links 或 files 对象，则没有特别的理由避免这种“破坏性”或“就地”更新。通常很少需要优化一次性设置操作。但是，如果您想或需要这样做，这是一种强大的方法。

Answer 2

试试这个：

var links = [
  {"source":"a0","target":"a0","s_portfolio":"a","t_portfolio":"a","SOURCE_TYPE":"APP","DES_TYPE":"APP"},
  {"source":"a1","target":"a2","s_portfolio":"a","t_portfolio":"c","SOURCE_TYPE":"APP","DES_TYPE":"APP"},
  {"source":"a1","target":"a2","s_portfolio":"a","t_portfolio":"c","SOURCE_TYPE":"APP","DES_TYPE":"APP"}  
];

var files = [
  {"File_Desc":"","DataName":""},
  {"File_Desc":"Date","DataName":"Dates.01012016"},
  {"File_Desc":"Address","DataName":"Address.01012016"}    
];

var result = [];

for(let i = 0; i < links.length; i++){
  result[i] = Object.assign(links[i], files[i]);
}

console.log(result);

Answer 3

我可能会使用array map 遍历一个数组，然后在我的回调函数中使用this answer 中定义的函数返回一个组合对象。

var result = links.map(combineLinkToFile);

function combineLinkToFile (link, index) {

    var file = files[index];

    return collect(link, file)
}

function collect() {
  var ret = {};
  var len = arguments.length;
  for (var i=0; i<len; i++) {
    for (p in arguments[i]) {
      if (arguments[i].hasOwnProperty(p)) {
        ret[p] = arguments[i][p];
      }
    }
  }
  return ret;
}

Answer 4

使用 jQuery map() 和 extend() 方法：

function mergeObjectsInArrays(arr1, arr2){
    return $.map(arr1, function(el, i){
        return $.extend(el, arr2[i]);
    });
};

// then pass your arrays:
var result = mergeObjectsInArrays(links, files);