如何用Lodash将对象映射转为数组并保证按键排序？

这个问题戳中了JavaScript对象的一个常见坑——别轻易依赖控制台显示的对象键顺序！我来给你拆解清楚怎么稳妥处理：

先搞懂：对象的键顺序真的可靠吗？ #

ES6+之后，JavaScript对象的键确实有了一定的顺序规则：

• 整数类型的键（比如"1"、"2"）会被优先按数值大小排序
• 非整数的字符串键按插入顺序排列
• Symbol键最后

但！服务端返回的JSON对象是不保证键顺序的——JSON规范里明确说明对象的成员是无序的。哪怕你在控制台看到键是有序的，那只是浏览器/Node.js的控制台为了可读性做的优化，绝对不能依赖这个初始顺序来做转换。

所以，想要得到确定的排序结果，必须主动对键进行排序，而不是依赖对象本身的顺序。

可靠的实现方法 #

方法1：原生JavaScript实现 #

不需要额外库，用原生API就能搞定，步骤很清晰：

1. 提取所有键 → 排序 → 映射成目标数组

// 假设服务端返回的对象是这个
const serverObj = { b: 'foo', a: 'bar', c: 'baz' };

// 1. 提取键并排序（默认按字符串Unicode顺序）
const sortedKeys = Object.keys(serverObj).sort();

// 2. 映射成包含键值的数组
const sortedArray = sortedKeys.map(key => ({
  key: key,
  value: serverObj[key]
}));

console.log(sortedArray);
// 输出: [{ key: 'a', value: 'bar' }, { key: 'b', value: 'foo' }, { key: 'c', value: 'baz' }]

如果是数字键或者需要自定义排序逻辑，给sort()传一个排序函数就行：

// 处理数字键的情况（比如键是"1", "10", "2"）
const numKeyObj = { "10": 'ten', "1": 'one', "2": 'two' };
const sortedNumKeys = Object.keys(numKeyObj).sort((a, b) => Number(a) - Number(b));
// 或者用localeCompare的numeric选项，更通用
// const sortedNumKeys = Object.keys(numKeyObj).sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));

方法2：用Lodash简化操作 #

既然你已经在用Lodash，那可以用它的链式调用让代码更简洁：

const _ = require('lodash');

const serverObj = { b: 'foo', a: 'bar', c: 'baz' };

// 转成[key, value]数组后按键排序，再转成对象数组
const sortedArray = _.chain(serverObj)
  .toPairs() // 转成[['b','foo'], ['a','bar'], ['c','baz']]
  .sortBy(0) // 按数组第一个元素（键）排序
  .map(pair => ({ key: pair[0], value: pair[1] }))
  .value();

console.log(sortedArray);
// 同样得到有序的数组

如果需要自定义排序，把sortBy(0)换成sortBy的回调函数：

// 数字键排序
const sortedNumArray = _.chain(numKeyObj)
  .toPairs()
  .sortBy(pair => Number(pair[0]))
  .map(pair => ({ key: pair[0], value: pair[1] }))
  .value();

关键总结 #

• 永远不要依赖服务端返回对象的初始键顺序，必须主动排序
• 不管用原生JS还是Lodash，核心逻辑都是：提取键 → 排序键 → 映射成数组
• 根据键的类型（字符串/数字）选择对应的排序规则，避免出现"10"排在"2"前面的意外情况

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