JavaScript 中的排序和比较函数与复杂数据答案

【问题标题】：sort and compare function in JavaScript with complex dataJavaScript 中的排序和比较函数与复杂数据
【发布时间】：2016-07-08 23:27:06
【问题描述】：

感谢这个帖子How does sort function work in JavaScript, along with compare function，我非常了解比较功能的工作原理

但我想知道如何将它用于以下复杂数据：

假设我有以下数据。

var data = [{
  id: _A2, 
  parent: {
    parent_id: _A1 
  },
  createdOn: 1.1
},{
  id:_A4, 
  parent: null ,
  createdOn: 1.1
},{
  id: _A1, 
  parent: null ,
  createdOn: 1
},{
  id: _A3, 
  parent: {
    parent_id: _A1 
  },
  createdOn: 1.2
},{
  id: _A5, 
  parent: {
    parent_id: _A4 
  },
  createdOn: 1.2
}]

我想先按创建日期对其进行排序，然后将孩子与他们的父母分组，这给了我们：

var data = [{
  id: _A1, 
  parent: null ,
  createdOn: 1
},{
  id: _A2, 
  parent: {
    parent_id: 1 
  },
  createdOn: 1.1
},{
  id: _A3, 
  parent: {
    parent_id: 1 
  },
  createdOn: 1.2
},{
  id: _A4, 
  parent: null ,
  createdOn: 1.1
},{
  id: _A5, 
  parent: {
    parent_id: _A4 
  },
  createdOn: 1.2
}]

甚至可以使用排序功能吗？

【问题讨论】：

这毫无意义。你说你想按创建日期排序，但是你想要 _A3 在 _A4 之前？
@Oriol 为什么它没有意义，也许你需要在对我的问题投反对票之前了解更多关于排序的信息！
查看我的解决方案jsfiddle.net/crazyvirus/np2pjctg
这没有意义，因为1.1 < 1.2，所以_A4应该在_A3之前。不确定你想要什么排序，但这不是“按创建日期排序”。
让我们试着给它更多的感觉。假设你有一个平面 json 的 cmets 与子 cmets 混合在一起，或者像上面的例子一样回复。我想显示父评论以及他们的孩子排序创建日期..子创建日期是否大于其他父级无关紧要，它应该在其父级之下 - 子级最终将按 asc 方向排序。

标签： javascript sorting compare

【解决方案1】：

同一篇文章的第二个答案很好地解释了比较对象数组中的特定属性：

https://stackoverflow.com/a/6568093/4809052

例如，如果要比较创建日期，可以这样做

var sortedArray = myArray.sort(function(a,b){
                                  return (a.createdOn - b.createdOn);
                              });

或者如果要按id比较，可以比较字符串_A1中的每个字符。

【讨论】：

感谢您的快速回复，但它没有回答我的问题。这是关于我想要实现的目标的 jsfiddle：jsfiddle.net/ofpu6f0v/4

【解决方案2】：

我相信这可以满足您的要求。简而言之，仅靠排序无法解决问题。

data.sort(function(rec1, rec2) {
    return rec1.createdOn - rec2.createdOn;
});

var grouped = [];
data.forEach(function(record) {
    if (!record.parent) {
        grouped.push(record);
        data.forEach(function(child) {
            if (child.parent) {
                if (child.parent.parent_id == record.id) grouped.push(child);
            }
        });
    }
});

data = grouped;

【讨论】：

【解决方案3】：

更新这是我带来的解决方案：

var data = [{
  id: '_A2',
  color: '#00ff00',
  parent: {
    parent_id: '_A1'
  },
  created: 1.1
}, {
  id: '_A4',
  color: '#bf1616',
  parent: null,
  created: 1.1
}, {
  id: '_A1',
  parent: null,
  color: '#469649',
  created: 1
}, {
  id: '_A3',
  color: '#00ff00',
  parent: {
    created: 1, 
    parent_id: '_A1'
  },
  created: 1.2
}, {
  id: '_A5',
  color: '#f62222',
  parent: {
    created: 1.1,
    parent_id: '_A4'
  },
  created: 1.2
},{
  id: '_A6',
  color: '#00ff00',
  parent: {
    created: 1, 
    parent_id: '_A1'
  },
  created: 11
},{
  id: '_A8',
  color: 'yellow',
  parent: {
    created: 0.5, 
    parent_id: '_A1'
  },
  created: 0.6
},{
  id: '_A7',
  color: '#c2c22b',
  parent: null,
  created: 0.5
}],
    ct = document.getElementById("unordered-data"),
    result = document.getElementById("result"),
    createRow = function (row) {
      var child = document.createElement('div');
      child.innerHTML = '<span class="row" style="background-color:' + row['color'] + '">' + row['id'] +  ' -- ' + row['created'] + '</span>';
      return child

    },


    compareFn = function (lhs, rhs) {
      return (lhs > rhs) ? 1 : (lhs < rhs ? -1 : 0);
    },

    compareSelfOrParentCreated = function (record1, record2) {
      var parent1 = record1.parent,
          parent2 = record2.parent;

      return compareFn(
        parent1 ? parent1.created : record1.created,
        parent2 ? parent2.created : record2.created
      );

    },
    compareSelfOrParentId = function (record1, record2) {
      var parentId1 = record1.parent,
          parentId2 = record2.parent;
      return compareFn(!!parentId1 ? parentId1.id : record1.id,
                       !!parentId2 ? parentId2.id : record2.id);
    },

    idPropertyOrEmptyString = function (obj) {
      return (!!obj && !!obj.id) ? obj.id : '';
    };

for (row in data) {
  ct.appendChild(createRow(data[row]));
}

for(r in data){
  data[r]._id =  idPropertyOrEmptyString(data[r].parent);
}

data.sort(function(r1, r2){
  var cmpCreated = compareSelfOrParentCreated(r1, r2); 
  if(cmpCreated === 0){
    var cmpParent = compareSelfOrParentId(r1, r2);
    if(cmpParent === 0){
      var parentAsc = compareFn(r1._id, r2._id);
      if(parentAsc === 0){
       return compareFn(r1.created, r2.created);
      } else{
        return parentAsc;
      }
    } else {
      return cmpParent
    }
  } else{
    return cmpCreated;
  }
});

for (row in data) {
  result.appendChild(createRow(data[row]));
}

.row {
  display:block;
  width:200px;
  padding:10px;
}

<h2>
 Unordered data
</h2>
<div id="unordered-data">
</div>

<h2>
Result
</h2>

<div id="result">

</div>

【讨论】：