按值对 Map/Hash 排序，保留键

Question

我正在寻找这个问题的答案。

我想在 JavaScript 中有一个哈希，像这样：

const hash = {
   a: 'A',
   c: 'C',
   b: 'B'
}

我想按值对对象进行排序，这样它可能变成：

const hash = {
   a: 'A',
   b: 'B',
   c: 'C',
}

现在，我意识到 POJSO 不保证其键的顺序，所以我正在考虑使用 immutableJS 或一些可以保证散列中键的顺序的对象。

所以我正在寻找类似的东西：

var newHash = Immutable.Map(hash).sortBy(function(key,val){
       return val;
});

但我不相信这存在。 这要求太多了吗？我怎样才能找到这个功能？

Answer 1

现在，我意识到 POJSO 不保证其密钥的顺序

他们现在这样做了，从 ES2015 开始。您仍然无法通过for-in 或Object.keys 访问该订单，但您可以通过Object.getOwnPropertyNames 访问该订单。该顺序由规范操作[[OwnPropertyKeys]] 给出。忽略继承的属性，它基本上是： 作为整数索引的字符串的键，按数字顺序；后面是字符串的剩余键，按照创建属性的顺序；后跟 Symbols 的键，按创建顺序排列。

有了这些信息，如果您的键都是不符合整数索引条件的字符串，那么在符合 ES2015 的引擎上，我们可以这样做：

1. 以任意顺序从属性开始（例如，a、c、b）

2. 使用Object.keys 将这些键作为数组获取

3. 使用Array#map 创建一个对象数组，其中包含键和值的属性（我在下面使用了k 和v）

4. 按值对数组进行排序

5. 使用Array#reduce 创建一个新对象，并按排序顺序向其中添加属性。 （包括我自己在内的一些人可能会争辩说这是对reduce 的轻微滥用，因为累加器实际上从未改变过，但是嘿，它让我们成为 l33t [这仍然是一件事吗？] 并避免中间变量。嗯，因为这是一个目标？:-)）

最终结果是一个对象，其属性按创建顺序排列，这是它们的值的顺序，因为我们是按该顺序创建它们的。我们可以通过Object.getOwnPropertyNames 访问该订单。

// The unsorted data
let data = {
  a: 'A',
  c: 'C',
  b: 'B'
};

// Create it sorted
const hash = Object.keys(data)
  .map(key => ({k: key, v: data[key]}))
  .sort((a, b) => a.v.localeCompare(b.v))
  .reduce((o, e) => {
    o[e.k] = e.v;
    return o;
  }, {});

// Display the sorted result
Object.getOwnPropertyNames(hash).forEach(n => {
  console.log("hash['" + n + "'] = " + hash[n]);
});

---

除此之外，正如我在对该问题的评论中所说，我不确定您为什么要这样做。看来如果我们知道您的最终目标是什么，我们或许可以为您指明一个更有用的方向……

Answer 2

Lodash 单线：

sorted = _(hash).toPairs().sortBy(1).fromPairs().value();

现场示例：

var data = {a: 'A', c: 'C', b: 'B'};
var hash = _(data).toPairs().sortBy(1).fromPairs().value();
Object.getOwnPropertyNames(hash).forEach(n => {
  snippet.log("hash['" + n + "'] = " + hash[n]);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>