如何在JavaScript中按嵌套capacity属性排序含数组的对象的键

需求 #

将给定对象的键按照对应数组内元素的capacity值从小到大排序，同一键对应的所有数组元素capacity值一致，可选取第一个元素的值作为排序依据。

原始对象 #

const obj = {
  A: [{
    capacity: 100
  }, {
    capacity: 100
  }, {
    capacity: 100
  }],
  B: [{
    capacity: 500
  }, {
    capacity: 500
  }, {
    capacity: 500
  }],
  C: [{
    capacity: 300
  }, {
    capacity: 300
  }, {
    capacity: 300
  }]
}

预期结果 #

const obj = {
  A: [{
    capacity: 100
  }, {
    capacity: 100
  }, {
    capacity: 100
  }],
  C: [{
    capacity: 300
  }, {
    capacity: 300
  }, {
    capacity: 300
  }],
  B: [{
    capacity: 500
  }, {
    capacity: 500
  }, {
    capacity: 500
  }]
}

尝试的错误代码 #

const sortByPosition = obj => {
   const order = [], res = {};
   Object.keys(obj).forEach(key => {
      return order[obj[key][1]['capacity'] - 1] = key;
   });
   order.forEach(key => {
      res[key] = obj[key];
   });
   return res;
}

console.log(sortByPosition(obj));

问题分析 #

这段代码的核心问题是用capacity-1作为数组索引存储键，仅在capacity为连续小数值时有效，遇到较大的capacity（如示例中的500）会生成大量空元素的数组，完全无法保证排序逻辑；同时错误地取了数组第二个元素（obj[key][1]），应该以第一个元素的capacity作为排序依据。

解决方案 #

通过键值对数组排序后重构对象，是更可靠的实现方式：

const sortByCapacity = obj => {
  // 转换为键值对数组并按capacity从小到大排序
  const sortedEntries = Object.entries(obj).sort(([, arrA], [, arrB]) => {
    return arrA[0].capacity - arrB[0].capacity;
  });
  // 将排序后的键值对转回对象
  return Object.fromEntries(sortedEntries);
}

console.log(sortByCapacity(obj));

代码说明 #

1. Object.entries(obj)：把目标对象转换为[键, 对应数组]格式的数组，为排序操作提供基础。
2. sort()方法：对比每组键值对中数组第一个元素的capacity值，实现从小到大的排序逻辑。
3. Object.fromEntries(sortedEntries)：将排序完成的键值对数组重新转换为对象，得到结构一致、键已排序的结果。

内容的提问来源于stack exchange，提问作者SixtyEight