如何基于按CreatedDate排序的对象数组生成指定顺序的单个对象？

原始数据 #

sampleDataSet = [{
    "-1":"default",
    "CreatedDate":"2024-03-13T13:43:58.000Z"
  }, {
    "-2":"defaultMain",
    "CreatedDate":"2024-03-14T18:44:02.000Z"
  }, {
    "4daasdasd15sdasdasd":"test1",
    "CreatedDate":"2024-03-14T15:44:04.000Z"
  }, {
    "41dasd51asda5d1sd":"test2",
    "CreatedDate":"2024-03-15T13:44:06.000Z"
  }, {
    "sdadsadsad561652165":"test3",
    "CreatedDate":"2024-02-16T13:44:08.000Z"
  }]

期望操作与结果 #

1. 按CreatedDate排序后的数组：

sampleDataSet = [
  {
    "sdadsadsad561652165": "test3",
    "CreatedDate": "2024-02-16T13:44:08.000Z"
  },
  {
    "-1": "default",
    "CreatedDate": "2024-03-13T13:43:58.000Z"
  },
  {
    "4daasdasd15sdasdasd": "test1",
    "CreatedDate": "2024-03-14T15:44:04.000Z"
  },
  {
    "-2": "defaultMain",
    "CreatedDate": "2024-03-14T18:44:02.000Z"
  },
  {
    "41dasd51asda5d1sd": "test2",
    "CreatedDate": "2024-03-15T13:44:06.000Z"
  }
]

2. 转换为保留排序顺序的单个对象：

{"sdadsadsad561652165":"test3","-1":"default","4daasdasd15sdasdasd":"test1","-2":"defaultMain","41dasd51asda5d1sd":"test2"}

尝试的代码 #

let res = {};
sampleDataSet.forEach(obj => {
 const key = Object.keys(obj)[0];
 const value = obj[key];
 res[key] = value;
})
console.log(res)

实际得到的结果 #

{"4daasdasd15sdasdasd":"test1","-1":"default","-2":"defaultMain","41dasd51asda5d1sd":"test2","sdadsadsad561652165":"test3"}

疑问 #

为什么实际结果的键顺序和排序后的数组顺序不一致？该如何解决？

原因 #

JavaScript对象的键并非完全按插入顺序排列，ES6及之后的排序规则是：

• 优先排列正整数类型的键（按数值升序）
• 其次是字符串类型的键（按插入顺序）
• 最后是Symbol类型的键（按插入顺序）

你的结果中，以4开头的键被识别为类数字字符串，会被归到第一类优先排序，导致最终顺序和数组遍历顺序不符。

解决方法 #

如果需要严格保留插入顺序，有两种方案：

方案1：使用Map存储

Map会严格按照键的插入顺序保存数据：

let res = new Map();
sampleDataSet.forEach(obj => {
  const key = Object.keys(obj)[0];
  res.set(key, obj[key]);
})
// 如需转为JSON格式，可通过Object.fromEntries转换
console.log(JSON.stringify(Object.fromEntries(res)));

方案2：直接用Object.fromEntries

该方法会保留传入键值对的顺序（需环境支持ES2019及以上）：

const res = Object.fromEntries(
  sampleDataSet.map(obj => {
    const key = Object.keys(obj)[0];
    return [key, obj[key]];
  })
);
console.log(JSON.stringify(res));

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