Javascript 按初始位置和对象属性排序

Question

我有一个对象数组:

[{
    id : 1,
    tag: "video"
 },
 {
    id : 2,
    tag: "music"
 },
 {
    id : 3,
    tag: "video"
 },
 {
    id : 4,
    tag: "music"
 },
 {
    id : 5,
    tag: "video"
 }]

我想根据两个因素对该数组进行排序:

1. 元素的初始位置
2. 标签

基本上我应该将标签分组在一起，但同时保持添加项目的顺序，输出应如下所示:

[{
    id : 1,
    tag: "video"
 },
 {
    id : 3,
    tag: "video"
 },
 {
    id : 5,
    tag: "video"
 },
 {
    id : 2,
    tag: "music"
 },
 {
    id : 4,
    tag: "music"
 }]

如您所见，现在它们按标签名称分组，但保留初始顺序。 id=1 的项目位于 id=2 的项目之前，因为它是先添加的，依此类推。

请注意，我不能使用 id 字段进行这种排序，因为真实的 id 不是整数，而是一个无法比较的唯一字符串。因此，我应该使用原始位置索引而不是 id。

我唯一看起来不太好的解决方案是编写一大段代码来在初始数组上创建一个 for ，并通过检查具有相同标记的最后一个项目来创建一个新数组，将项目放置在完美的位置添加到原始数组中并获取它的位置并将其添加到该位置的新数组中。

有什么最佳解决方案吗？谢谢

Answer 1

您可以reduce按正确的顺序将数组分成子数组，然后通过应用 Array#concat 将它们展平:

var data = [{"id":1,"tag":"video"},{"id":2,"tag":"music"},{"id":3,"tag":"video"},{"id":4,"tag":"music"},{"id":5,"tag":"video"}];

var helper = Object.create(null);
var result = [].concat.apply([], data.reduce(function(r, o) {
  var arr;
  
  if(helper[o.tag] === undefined) {
     helper[o.tag] = r.push([]) - 1;
  }
  
  arr = r[helper[o.tag]];
  
  arr.push(o);
  
  return r;
}, []));

console.log(result);

以及使用 Map 的 ES6 解决方案:

const data = [{"id":1,"tag":"video"},{"id":2,"tag":"music"},{"id":3,"tag":"video"},{"id":4,"tag":"music"},{"id":5,"tag":"video"}];

const result = [].concat(...data.reduce((r, o) => {
  const arr = r.get(o.tag) || [];
  arr.push(o);
  return r.set(o.tag, arr);
}, new Map()).values());

console.log(result);