Как исключить / пропустить элементы из сортировки?

Есть массив объектов, которые мне нужно отсортировать. Выглядит это так:

var array = [
    {left: 20, top: 50, group: 'groupOne'},
    {left: 18, top: 10, group: 'groupTwo'},
    {left: 15, top: 15, group: 'groupThree'},
    {left: 25, top: 30, group: 'groupThree'},
    {left: 18, top: 25, group: 'groupFour'},
    {left: 28, top: 25, group: 'groupFive'},
    {left: 25, top: 15, group: 'groupSix'},
    {left: 30, top: 30, group: 'groupSix'}
];

Хочу отсортировать по левый (в первую очередь) и верхняя (во вторую). Моя функция сортировки выглядит так:

array.sort((x, y) => {
    return x.left - y.left || x.top - y.top;
});

Результат:

[
    {left: 15, top: 15, group: "groupThree"},
    {left: 18, top: 10, group: "groupTwo"},
    {left: 18, top: 25, group: "groupFour"},
    {left: 20, top: 50, group: "groupOne"},
    {left: 25, top: 15, group: "groupSix"},
    {left: 25, top: 30, group: "groupThree"},
    {left: 28, top: 25, group: "groupFive"},
    {left: 30, top: 30, group: "groupSix"}
];

Функция сортировки работает почти так, как я хотел, но было бы лучше, если бы она также учитывала группа, если существует более одного элемента одной и той же группы.

Другими словами, я хочу, чтобы конечный результат выглядел так:

[
    {left: 15, top: 15, group: "groupThree"},
    {left: 25, top: 30, group: "groupThree"},
    {left: 18, top: 10, group: "groupTwo"},
    {left: 18, top: 25, group: "groupFour"},
    {left: 20, top: 50, group: "groupOne"},
    {left: 25, top: 15, group: "groupSix"},
    {left: 30, top: 30, group: "groupSix"}
    {left: 28, top: 25, group: "groupFive"},
];

Предметы из одной группы «склеиваются». Любые идеи?

Просто поместите .localeCompare() для группы между сравнениями для left и top. Другими словами, это то же самое, что вы уже делаете.

Pointy 08.12.2018 15:13

А как две группы сортируются? На основе первого из группы?

Jonas Wilms 08.12.2018 15:16

Если у двух элементов одна и та же группа, их следует отсортировать так же, как и раньше (слева и вверху).

hames 08.12.2018 15:18

Поинти, что ты имеешь в виду?

hames 09.12.2018 01:40
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
4
789
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете сгруппировать элементы и отсортировать сгруппированные элементы, а затем отсортировать по первому элементу сгруппированного элемента.

Позже сброшены все группы.

var array = [{ left: 20, top: 50, group: 'groupOne' }, { left: 18, top: 10, group: 'groupTwo' }, { left: 15, top: 15, group: 'groupThree' }, { left: 25, top: 30, group: 'groupThree' }, { left: 18, top: 25, group: 'groupFour' }, { left: 28, top: 25, group: 'groupFive' }, { left: 25, top: 15, group: 'groupSix' }, { left: 30, top: 30, group: 'groupSix' }],
    leftTop = (a, b) => a.left - b.left || a.top - b.top,
    sorted = Array
        .from(
            array
                .reduce((m, o) => m.set(o.group, (m.get(o.group) || []).concat(o)), new Map)
                .values(),
            a => a.sort(leftTop)
        )
        .sort(([a], [b]) => leftTop(a, b))
        .reduce((a, b) => a.concat(b));

console.info(sorted);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Спасибо Нина, решение идеально подходит для меня. Но можете ли вы мне сказать еще кое-что? При отладке кода остановился на части .sort(([x], [y]) => leftTop(x, y)) (просто поменял буквы). Я знаю, что браузер иногда каким-то образом трансформирует код, чтобы читать его по-другому, но почему он изменил его на .sort(function(_a, _b) { var x = _a[0]; var y = _b[0]; return... }). Как браузер узнал, что нужно брать только первый элемент массива? Другими словами, как [x] изменился на _a[0]

hames 10.12.2018 22:25

это часть деструктуризация, где массив деструктурируется в массив и берется первый элемент. браузер знает это по синтаксису ES6.

Nina Scholz 10.12.2018 22:52

Другие вопросы по теме