Как отсортировать массив объектов по двум полям в JavaScript?
Задан массив объектов и задача состоит в том, чтобы отсортировать элементы массива по 2 полям объекта. Есть два способа решения этой проблемы, которые обсуждаются ниже:
Подход 1:
- Сначала сравните первое свойство, если оба неравны, а затем сортируйте соответственно.
- Если они равны, сделайте то же самое для второго свойства.
Пример. В этом примере реализован вышеуказанный подход.
How to sort an array of object
by two fields in JavaScript ?
< body style = «text-align:center;» >
< h1 style = «color:green;» >
< p id = «GFG_UP» style undefined spaces»> 15px; font-weight: bold;»>
< button onclick = «gfg_Run()» >
< p id = «GFG_DOWN» style undefined spaces»> font-size: 20px; font-weight: bold;»>
var el_up = document.getElementById(«GFG_UP»);
var el_down = document.getElementById(«GFG_DOWN»);
el_up.innerHTML = «Click on the button to sort «
+ «the array accordingly.< br >Array = ‘»
arr.sort(function (a, b)
var as = a.second;
var bs = b.second;
return (as < bs ) ? -1 : (as > bs) ? 1 : 0;
return (af < bf ) ? -1 : 1;
Выход:
- Прежде чем нажать на кнопку:
- После нажатия на кнопку:
Подход 2:
- Сначала сравните первое свойство. Если оба неравны, то сортируйте соответственно.
- Если они равны , то сделать то же самое для второго свойства, этот пример следующий такой же подход , но с использованием OR Gate , чтобы уменьшить код.
Пример. В этом примере реализован вышеуказанный подход.
How to sort an array of object
by two fields in JavaScript ?
< body style = «text-align:center;» >
< h1 style = «color:green;» >
< p id = «GFG_UP» style =
«font-size: 15px; font-weight: bold;» >
< button onclick = «gfg_Run()» >
< p id = «GFG_DOWN» style undefined spaces»> font-size: 20px; font-weight: bold;»>
Совет: как отсортировать массив объектов в JavaScript
Если у вас есть массив объектов, которые вам нужно отсортировать в определенном порядке, у вас может возникнуть желание найти библиотеку JavaScript. Но прежде чем вы это сделаете, помните, что вы можете сделать довольно аккуратную сортировку с помощью встроенной функции Array.sort .
В этой статье мы покажем вам, как сортировать массив объектов в JavaScript без суеты и беспокойства.
Для продолжения вам понадобится знание основных концепций JavaScript, таких как объявление переменных, функций записи и условных операторов. Мы также будем использовать синтаксис ES6. Вы можете получить дополнительную информацию об этом через нашу обширную коллекцию руководств ES6 . Эта популярная статья была обновлена в ноябре 2019 года.
Основная сортировка массива
По умолчанию функция JavaScript Array.sort кодов Unicode .
Вы можете быть удивлены, почему 32 предшествует 5. Не логично, а? Ну, на самом деле это так. Это происходит потому, что каждый элемент в массиве сначала преобразуется в строку, а «32» «5»
Стоит также отметить, что в отличие от многих других функций массива JavaScript, Array.sort
Чтобы избежать этого, вы можете создать новый экземпляр массива для сортировки и изменить его. Это возможно с помощью метода массива, который возвращает копию массива. Например, Array.slice :
Или, если вы предпочитаете более новый синтаксис, вы можете использовать оператор распространения для того же эффекта:
Вывод одинаков в обоих случаях:
Попробуйте это
Использование Array.sort К счастью, функция принимает необязательный параметр compareFunction
Использование функций сравнения для сортировки
Допустим, что foo bar
- меньше 0 — foo bar
- больше 0 — bar foo
- равно 0 — foo bar
Давайте рассмотрим простой пример с массивом чисел:
Мы можем немного изменить рефакторинг, так как вычитание a b
Теперь это хороший кандидат на функцию стрелки:
Если вы не знакомы с функциями стрелок, вы можете прочитать о них здесь: Функции стрелок ES6: толстый и краткий синтаксис в JavaScript .
Как отсортировать массив объектов в JavaScript
Теперь давайте посмотрим на сортировку массива объектов. Для этой демонстрации мы будем использовать массив певцов:
Мы можем использовать следующую функцию compare
Чтобы изменить порядок сортировки, вы можете инвертировать возвращаемое значение функции compare
Попробуйте это
Создание функции динамической сортировки
Давайте закончим, сделав это более динамичным. Давайте создадим функцию сортировки, которую вы можете использовать для сортировки массива объектов, значениями которых являются либо строки, либо числа. Эта функция имеет два параметра — ключ, по которому мы хотим отсортировать, и порядок результатов (т. Е. Возрастания или убывания):
И вот как вы бы это использовали:
Попробуйте это
В приведенном выше коде метод hasOwnProperty используется для проверки того, определено ли указанное свойство для каждого объекта и не было ли оно унаследовано через цепочку прототипов. Если он не определен для обоих объектов, функция возвращает 0
Оператор typeof также используется для проверки типа данных значения свойства. Это позволяет функции определить правильный способ сортировки массива. Например, если значением указанного свойства является string toUpperCase
Вы можете настроить вышеупомянутую функцию для учета других типов данных и любых других потребностей вашего скрипта.
String.prototype.localeCompare ()
В нашем примере выше мы хотим иметь возможность сортировать массив объектов, значениями которых являются либо строки, либо числа. Однако, если вы знаете, что будете иметь дело только с объектами, значениями которых являются строки, вы можете немного привести в порядок код с помощью метода JavaScript localeCompare
Этот метод возвращает число, указывающее, идет ли строка до, после или совпадает с заданной строкой в порядке сортировки. Это позволяет без учета регистра сортировать массив:
С точки зрения нашей функции compareValues
Вы можете прочитать больше о localeCompare на MDN .
Вывод
Итак, у вас есть это — краткое введение в сортировку массива объектов с использованием ванильного JavaScript. Хотя многие библиотеки предлагают такую возможность динамической сортировки, как показано, не так уж сложно реализовать эту функцию самостоятельно. Плюс хорошо понимать, что происходит под капотом.
Как отсортировать по алфавиту массив объектов по ключам в JavaScript
Сортировка массива объектов в JavaScript может быть кошмаром, если вы не знаете, какая логика для этого нужна. Предпочтительным способом сортировки массива является использование метода сортировки, который сортирует элементы массива на месте. Порядок сортировки по умолчанию соответствует строковым кодовым точкам Unicode.
В этой статье мы поделимся с вами очень простым, функциональным и оптимизированным методом сортировки массива объектов по некоторому ключу в порядке возрастания или убывания с использованием простого JavaScript (без дополнительных фреймворков).
1. Создать / выставить некоторые данные для сортировки
В качестве первого шага, чтобы отсортировать массив объектов по некоторому ключу, вам понадобится допустимая структура в вашем массиве, очевидно, массив объектов может иметь только объекты с хотя бы одним ключом (тот, который вы хотите отсортировать). В этом примере у нас будет переменная MyData, которая имеет следующую структуру:
Каждый элемент имеет 3 ключа, которые можно сортировать по номерам и алфавиту.
2. Создайте пользовательскую функцию сортировки
JavaScript предлагает собственный метод, который ожидает в качестве первого аргумента функцию для сортировки в соответствии с вашими потребностями, поэтому вы сами должны написать эту функцию. Цель этой статьи — показать вам, как отсортировать по некоторому ключу массив объектов, поэтому мы предоставим вам эту функцию, которую вы можете просто использовать:
Как уже упоминалось, эта функция должна быть введена в качестве первого аргумента в функцию сортировки прототипа массива в JavaScript, поэтому вы не будете использовать ее напрямую, поскольку она просто возвратит 0 или 1. Основная точка этой функции для сортировки — это localeCompare, функция JavaScript, включенная в прототип строк, которая возвращает число, указывающее, идет ли строка1 до, после или совпадает со строкой2 в порядке сортировки (значения).
3. Сортировать по ключу в порядке возрастания
Наконец, чтобы отсортировать массив объектов, просто вызовите метод сортировки массива и передайте в качестве первого аргумента dynamicSort функция, которая ожидает в качестве первого аргумента строку, а именно ключ объекта, который вы хотите отсортировать. В этом случае мы могли бы начать с сортировки по свойству name, используя следующую строку кода:
Важный
Обратите внимание, что метод sort переупорядочивает / сортирует элементы массива в одной и той же переменной (по ссылке), поэтому метод не возвращает новую переменную с новым порядком, но эта же переменная будет изменена на месте.
С предыдущим кодом console.log выведет объект с новым порядком:
Или попробуйте с новым ключом, например, город:
Это вывело бы вместо этого:
4. Сортировка по ключу в порядке убывания
Чтобы отсортировать массив объектов по некоторому ключу в алфавитном порядке в порядке убывания, нужно всего лишь добавить в качестве префикса a — (минус) символ в начале ключевой строки, поэтому функция сортировки будет сортироваться по убыванию:
Как отсортировать массив с родительскими и дочерними объектами с помощью JavaScript?
У меня есть массив с объектом, который мне нужно отсортировать таким образом, чтобы сначала появился родительский объект, а затем его дочерние объекты и так далее. Однако, когда я пытаюсь найти индекс родительского объекта в массиве, чтобы протолкнуть дочерний объект после него, метод findIndex () возвращает -1. Может ли кто-нибудь указать на корень этой проблемы, поскольку я не могу ясно понять, почему он это делает. Код и массив данных, которые я использую, написаны ниже.