Как отсортировать объект VueJS в порядке убывания числа вхождений?

Question

У меня есть динамический объект, который состоит из числа вхождений из пользовательского выбора. Объект выглядит так:

{ "Excitement": 2, "Competence": 3, "Sophistication": 1 }

Это функция:

rankFactors() {
      const headers = this.headers;
      var counts = {};
      for (var i = 0; i < headers.length; i++) {
        var num = headers[i];
        counts[num] = counts[num] ? counts[num] + 1 : 1;
      }
      return counts;
 }

Как мне отсортировать этот объект так, чтобы он всегда был в порядке убывания? Таким образом, я могу распечатать его как список «Топ-3».

Это мой CodeSandbox: https://codesandbox.io/embed/vue-template-mzi03

Для воспроизведения достаточно выбрать черты личности с несколькими вариантами из нескольких заголовков.

Answer 1

Думаю, я бы сделал это примерно так:

rankFactors() {
  const headers = this.headers;
  const counts = {};

  for (const header of headers) {
    counts[header] = (counts[header] || 0) + 1;
  }

  const factors = Object.keys(counts).map(header => {
    return {
      name: header,
      count: counts[header]
    }
  });

  factors.sort((a, b) => b.count - a.count);

  return factors;
}

Первый этап очень похож на то, что у вас было, создание объекта отсчета. Это простая структура данных, с которой можно работать для сбора этих подсчетов, но после того, как этот этап завершен, это не лучший выбор для работы с сортировкой. Для этого нам лучше использовать массив.

Итак, затем он преобразует объект в массив объектов, каждый из которых имеет форму {name: 'Excitement', count: 2}. Этот массив затем сортируется на основе количества и затем возвращается. Вы можете добавить .slice(0, 3), если вы просто хотите получить верхнюю 3.