如何通过相同键的属性重新排列嵌套数组答案

【问题标题】：How to rearrange nested array by the same key's property如何通过相同键的属性重新排列嵌套数组
【发布时间】：2016-02-21 21:19:57
【问题描述】：

在 D3.JS 或 javascript/jquery 中有没有办法做到这一点：

我有一个数组数组..

[
 [{date:x,data:1},{date:y,data:5},{date:z,data:2}],
 [{date:x,data:9},{date:y,data:10}],
 [{date:y,data:8},{date:z,data:5}]
]

我想重新排列它们，使这个顶级数组中的数组都具有相同的日期：

[
 [{date:x,data:1},{date:x,data:9}],
 [{date:y,data:5},{date:y,data:10},{date:y,data:8}],
 [{date:z,data:2},{date:z,data:5}]
]

【问题讨论】：

标签： javascript arrays d3.js

【解决方案1】：

使用 d3 很容易：

xs = [
    [{date: 'x', data: 1}, {date: 'y', data: 5}, {date: 'z', data: 2}],
    [{date: 'x', data: 9}, {date: 'y', data: 10}],
    [{date: 'y', data: 8}, {date: 'z', data: 5}]
]

z = d3.nest()
    .key(x => x.date)
    .sortKeys(d3.ascending)
    .entries(d3.merge(xs))
    .map(x => x.values)


z.map(e => document.write('<pre>'+JSON.stringify(e)+'</pre>'));

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

使用纯javascript

var x = 'x', y = 'y', z = 'z';
var arr = [
  [{ date: x, data: 1 }, { date: y, data: 5 }, { date: z, data: 2 }],
  [{ date: x, data: 9 }, { date: y, data: 10 }],
  [{ date: y, data: 8 }, { date: z, data: 5 }]
];
var res = arr.reduce(function (result, inArr, index) {
  inArr.forEach(function (obj) {
    result[obj.date] = result[obj.date] || [];
    result[obj.date].push(obj);
  });
  return result;
}, {});

var output = [];
for (var key in res) {
  output.push(res[key]);
}
console.log(output);

会输出

[
 [
  {
   "date": "x",
   "data": 1
  },
  {
   "date": "x",
   "data": 9
  }
 ],
 [
  {
   "date": "y",
   "data": 5
  },
  {
   "date": "y",
   "data": 10
  },
  {
   "date": "y",
   "data": 8
  }
 ],
 [
  {
   "date": "z",
   "data": 2
  },
  {
   "date": "z",
   "data": 5
  }
 ]
]

【讨论】：

【解决方案3】：

你可以在没有任何库的情况下做到这一点：

1) 使用键 date 创建地图

2) 按键分组

3) 创建结果集

4) 完成

arr=[
 [{date:'x',data:1},{date:'y',data:5},{date:'z',data:2}],
 [{date:'x',data:9},{date:'y',data:10}],
 [{date:'y',data:8},{date:'z',data:5}]
]

function group(a){
    return arr.reduce(function(o,n){
    n.forEach(function(a){
        var key=a.date;
      if(!o[key]) o[key]=[];
      var tmp=o[key];
      tmp.push(a);
      o[key]=tmp;
    });
    return o;
  },{});
}

var resultMap = group(arr);
var result = Object.keys(resultMap).map(
    function(x){
    return resultMap[x];
  }
);
console.log(result)

这里是Fiddle。

Array.prototype.reduce()已解释here

Array.prototype.map()解释here

【讨论】：