javascript - 使用反向排序的键迭代对象

Question

我知道我的问题标题可能令人困惑(我知道对象属性没有顺序)因为我已经提出了一个解决方案，所以要避免创建 XY problem ，让我先解释一下我的目标:

我需要呈现 N 个单词表，这些单词按单词长度分组并且(这很棘手)按长度降序排列。像这样的东西:

Words with length 4
===================
abcd | other fields
abce | other fields 
abcf | other fields

Words with length 3
===================
abc  | other fields
abd  | other fields
abe  | other fields

Words with length 2
===================
...

我从没有任何分组的 API 中获取我的单词列表，所以我现在正在做的是:

let grouped = {};
// Assume words is an Array of words of multiple lengths
words.forEach(w => {
    if (typeof grouped[w.length] === 'undefined')
        grouped[w.length] = [];
    grouped[w.length].push({'word': w}); 
    // Pushing an object cause of other calculated and not rellevant fields
});

当然，当我渲染这个 grouped 单词时(我使用的是 Vue.js)...

<WordsTable 
    v-for="(group, length) in grouped"
    :words="group"
    :word-length="length"
/>

我使用 word-length 属性来呈现表的标题，上面写着长度为 N 的单词。

一切正常，但我得到的表是按升序顺序排列的(而且，我知道这可能是巧合，因为对象中没有顺序)。所以真正的问题是，有人能想出一种方法让 Vue 使用降序排序的键迭代我的 grouped 对象吗？

注意:可能没有某些特定长度的单词，所以 Object.keys(grouped) 可能是 [3,4,7,9,10]

更新:

一位评论者建议对grouped 使用数组而不是对象。我已经尝试过了，确实可能稍微好一点，但并没有完全解决问题。

如果 grouped 是一个数组，我可以反转它:

<WordsTable 
    v-for="(group, length) in grouped.reverse()"
    ...
/>

但在这种情况下，索引丢失了，不能再用于呈现表的标题。

Answer 1

您可以创建一个计算属性，按降序对对象键进行排序:

sortedGroupKeys() { 
    return Object.keys( group ).sort( ( a , b ) => b - a ); 
}

然后你可以遍历它。

<WordsTable 
    v-for="(key in sortedGroupKeys)"
    :words="group[ key ]"
    :word-length="key"
/>

希望这对您有所帮助。