Сортировка и перестановка 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
). - Всегда проверяйте логику сортировки на практических примерах.
Адаптация под различные задачи
Разные задачи требуют соответствующих подходов. Вот несколько типовых сценариев:
- Многомерные массивы: сортировка по значениям, находящимся глубоко внутри структуры.
- Нестандартные порядки: сортировка разнотипных данных, например, чисел и строк.
- Объединение отсортированных массивов: это может оказаться быстрее, если вы используете правильный метод сравнения.
Полезные материалы
- Array.prototype.sort() – JavaScript | MDN: Загляните в мир JavaScript от профессионалов.
- CS50 2016 – Week 3 – Algorithms: Просмотрите лекцию из Гарвардского университета о сортировке.
- Методы массивов – JavaScript.info: Всё, что нужно знать о методах массива.
- Sort an Array of Objects in JavaScript with the sort() method – SitePoint: Как сортировать объекты в JavaScript.
- JavaScript Arrow Function – W3Schools: Погружение в стрелочные функции JavaScript.
- The 10 Most Common JavaScript Issues Developers Face | Toptal: Советы по оптимизации производительности и обходу распространенных ошибок при сортировке больших массивов.