Сортировка и перестановка JS массива согласно другому массиву

Быстрый ответ

const arr = ['B', 'A', 'C'];
const order = ['A', 'B', 'C'];

const sortedArr = arr.sort((a, b) => order.indexOf(a) – order.indexOf(b));

Углубление в искусство сортировки 🧙‍♂️

Если перед вами стоят задачи, выходящие за рамки стандартного функционала, давайте окунемся в более сложные техники. В частности, разберем сортировку объектов, использование внешних библиотек и улучшение производительности.

Изящная сортировка сложных структур

Для сортировки объектов или решения особых случаев примените сочетание методов map() и sort():

const itemsArray = [{ id: 'B' }, { id: 'A' }, { id: 'C' }];
const orderArray = ['A', 'B', 'C'];

const sortedItems = itemsArray
  .map(item => ({ ...item, sortOrder: orderArray.indexOf(item.id) })) 
  .sort((a, b) => a.sortOrder – b.sortOrder)
  .map(item => item.id);

Подробнее об этом расскажет наш спикер на видео

Использование сторонних библиотек

Когда сортировка становится сложной, можно использовать такие библиотеки, как Lodash или Underscore.js:

const _ = require('lodash');

const sortedItemsWithLodash = _.sortBy(itemsArray, item => orderArray.indexOf(item.id));

Оптимизация производительности

Для повышения эффективности сортировки избегайте использования indexOf внутри sort. Вместо этого применяйте Map для ускорения получения индексов:

const indexMap = new Map(order.map((item, index) => [item, index]));

const sortedArrBetter = arr.sort(
  (a, b) => (indexMap.get(a) – indexMap.get(b))
);

Визуализация

Демонстрация проходит легче с использованием эмодзи. У нас есть группа (elements), ваш плейлист (arrToSort) и программа концерта (sortOrder):

Программа концерта (sortOrder): [👔, 👖, 👗, 🧢]

Плейлист до сортировки (arrToSort):

[👗, 👖, 👔, 🧢, 👔]

Мы подгоняем плейлист под программу концерта:

arrToSort.sort((a, b) => sortOrder.indexOf(a) – sortOrder.indexOf(b));

Плейлист после сортировки:

[👔, 👔, 👖, 👗, 🧢]

Теперь плейлист полностью соответствует программе концерта, а вы становитесь лучшим менеджером.

Преодоление проблем

Сложности часто возникают при сортировке, если есть дубликаты или отсутствуют значения. В таком случае может помочь array_multisort(), функция из PHP, работающая аналогично алгоритмам из JavaScript.

Полезные рекомендации

• Заранее определите порядок сортировки, чтобы ускорить выполнение задачи.
• Сортируете объекты? Сравнивайте их по одному и тому же свойству.
• Применяйте фильтрацию и трансформацию для обработки несовместимых значений (null, undefined).
• Всегда проверяйте логику сортировки на практических примерах.

Адаптация под различные задачи

Разные задачи требуют соответствующих подходов. Вот несколько типовых сценариев:

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

Полезные материалы

1. Array.prototype.sort() – JavaScript | MDN: Загляните в мир JavaScript от профессионалов.
2. CS50 2016 – Week 3 – Algorithms: Просмотрите лекцию из Гарвардского университета о сортировке.
3. Методы массивов – JavaScript.info: Всё, что нужно знать о методах массива.
4. Sort an Array of Objects in JavaScript with the sort() method – SitePoint: Как сортировать объекты в JavaScript.
5. JavaScript Arrow Function – W3Schools: Погружение в стрелочные функции JavaScript.
6. The 10 Most Common JavaScript Issues Developers Face | Toptal: Советы по оптимизации производительности и обходу распространенных ошибок при сортировке больших массивов.