Сортировка массива объектов по значениям свойств
У меня есть массив объектов, полученных с помощью AJAX:
var homes = [
{
"h_id": "3",
"city": "Dallas",
"state": "TX",
"zip": "75201",
"price": "162500"
}, {
"h_id": "4",
"city": "Bevery Hills",
"state": "CA",
"zip": "90210",
"price": "319250"
}, {
"h_id": "5",
"city": "New York",
"state": "NY",
"zip": "00010",
"price": "962500"
}
];
Как мне создать функцию, которая будет сортировать объекты по свойству price
в возрастающем или убывающем порядке, используя только JavaScript?
5 ответ(ов)
Вот более гибкая версия, которая позволяет создавать многоразовые функции сортировки и сортировать по любому полю.
const sort_by = (field, reverse, primer) => {
const key = primer ?
function(x) {
return primer(x[field])
} :
function(x) {
return x[field]
};
reverse = !reverse ? 1 : -1;
return function(a, b) {
return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
}
}
// Теперь вы можете сортировать по любому полю на ваше усмотрение...
const homes=[{h_id:"3",city:"Dallas",state:"TX",zip:"75201",price:"162500"},{h_id:"4",city:"Bevery Hills",state:"CA",zip:"90210",price:"319250"},{h_id:"5",city:"New York",state:"NY",zip:"00010",price:"962500"}];
// Сортировка по цене от высокой к низкой
console.log(homes.sort(sort_by('price', true, parseInt)));
// Сортировка по городу, без учета регистра, от A до Z
console.log(homes.sort(sort_by('city', false, (a) => a.toUpperCase())));
Этот код позволяет вам определять функции сортировки для разных полей объектов. Например, вы можете сортировать ваш массив объектов homes
как по цене, так и по городу, используя функции сортировки, которые легко переиспользовать. Реверс сортировки контролируется логическим параметром, а также есть возможность использовать преобразующие функции для настройки сортировки.
Чтобы отсортировать массив объектов, вам нужно создать функцию сравнения, принимающую два аргумента. Затем вызовите функцию сортировки, передав ей эту функцию сравнения следующим образом:
// a и b - это объекты в вашем массиве
function mycomparator(a, b) {
return parseInt(a.price, 10) - parseInt(b.price, 10);
}
homes.sort(mycomparator);
Если вы хотите отсортировать в порядке возрастания, поменяйте местами выражения по обе стороны от знака минус.
Вот пример кода для сортировки строк в JavaScript, если кому-то это может понадобиться:
const dataArr = {
"hello": [{
"id": 114,
"keyword": "zzzzzz",
"region": "Шри-Ланка",
"supportGroup": "администраторы",
"category": "Категория2"
}, {
"id": 115,
"keyword": "aaaaa",
"region": "Япония",
"supportGroup": "разработчики",
"category": "Категория2"
}]
};
const sortArray = dataArr['hello'];
console.log(sortArray.sort((a, b) => {
if (a.region < b.region)
return -1;
if (a.region > b.region)
return 1;
return 0;
}));
В этом примере код сортирует массив объектов по свойству region
. Сортировка происходит в алфавитном порядке: сначала будут выведены элементы с регионами, начинающимися на буквы, которые идут раньше в алфавите.
Давайте разберем предложенный вами код для сортировки массивов на JavaScript.
Ваш метод getSortedData
принимает три аргумента: data
— массив объектов, prop
— название свойства, по которому будет производиться сортировка, и isAsc
— булевый флаг, указывающий, нужно ли сортировать по возрастанию (true
) или по убыванию (false
).
Вот как работает ваша функция:
function getSortedData(data, prop, isAsc) {
return data.sort((a, b) => {
return (a[prop] < b[prop] ? -1 : 1) * (isAsc ? 1 : -1);
});
}
Сравнение объектов: Внутри функции используется метод
sort
для сортировки массиваdata
. Сравнение выполняется с помощью стрелочной функции(a, b) => { ... }
.Сравнение свойств: Для каждого объекта
a
иb
проверяется значение их свойстваprop
. Еслиa[prop] < b[prop]
, то результат будет-1
, иначе1
. Это обеспечивает правильный порядок сортировки по возрастанию.Учет порядка: Далее результат этого сравнения умножается на
1
или-1
в зависимости от значенияisAsc
. ЕслиisAsc
равноtrue
, то результат останется без изменений. ЕслиisAsc
равноfalse
, порядок изменится на противоположный.
Обратите внимание на важный момент: если значения a[prop]
и b[prop]
равны, ваш код не возвращает 0
, что может привести к некорректной сортировке в случае таких объектов. Чтобы исправить это, вы можете использовать условие, которое возвращает 0
, когда значения равны. Вот улучшенная версия функции:
function getSortedData(data, prop, isAsc) {
return data.sort((a, b) => {
if (a[prop] < b[prop]) return isAsc ? -1 : 1;
if (a[prop] > b[prop]) return isAsc ? 1 : -1;
return 0; // Если значения равны
});
}
Теперь функция будет корректно обрабатывать случаи, когда сравниваемые значения одинаковы. Надеюсь, это поможет!
Вот сводка всех ответов выше.
Валидация Fiddle: http://jsfiddle.net/bobberino/4qqk3/
var sortOn = function (arr, prop, reverse, numeric) {
// Убедимся, что имеется свойство
if (!prop || !arr) {
return arr;
}
// Настраиваем функцию сортировки
var sort_by = function (field, rev, primer) {
// Возвращаем требуемую функцию a,b
return function (a, b) {
// Сбрасываем a и b к нужному полю
a = primer(a[field]), b = primer(b[field]);
// Выполняем фактическую сортировку, переворачиваем при необходимости
return ((a < b) ? -1 : ((a > b) ? 1 : 0)) * (rev ? -1 : 1);
}
}
// Различаем числовые и строковые значения, чтобы предотвратить,
// например, появление 100 перед меньшими числами.
// Например:
// 1
// 20
// 3
// 4000
// 50
if (numeric) {
// Сортируем "на месте" с помощью функции sort_by
arr.sort(sort_by(prop, reverse, function (a) {
// - Принудительно приводим значение к строке.
// - Заменяем любые нечисловые символы.
// - Парсим как число с плавающей точкой для обработки значений 0.02.
return parseFloat(String(a).replace(/[^0-9.-]+/g, ''));
}));
} else {
// Сортируем "на месте" с помощью функции sort_by
arr.sort(sort_by(prop, reverse, function (a) {
// - Принудительно приводим значение к строке.
return String(a).toUpperCase();
}));
}
}
Этот код позволяет сортировать массив объектов по заданному свойству, учитывая возможность сортировки по числовым и строковым значениям, а также возможность сортировки в обратном порядке. Если вам нужно больше деталей или конкретные примеры его использования, пожалуйста, дайте знать.
Сортировка массива объектов по значению строкового свойства
Как отсортировать массив целых чисел?
Как перемешать (сделать случайным) массив в JavaScript?
Как объединить два массива в JavaScript и удалить дубликаты?
Как удалить все дубликаты из массива объектов?