Как отсортировать по алфавиту массив объектов по ключам в JavaScript

Сортировка массива объектов в JavaScript может быть кошмаром, если вы не знаете, какая логика для этого нужна. Предпочтительным способом сортировки массива является использование метода сортировки, который сортирует элементы массива на месте. Порядок сортировки по умолчанию соответствует строковым кодовым точкам Unicode.

В этой статье мы поделимся с вами очень простым, функциональным и оптимизированным методом сортировки массива объектов по некоторому ключу в порядке возрастания или убывания с использованием простого JavaScript (без дополнительных фреймворков).

1. Создать / выставить некоторые данные для сортировки

В качестве первого шага, чтобы отсортировать массив объектов по некоторому ключу, вам понадобится допустимая структура в вашем массиве, очевидно, массив объектов может иметь только объекты с хотя бы одним ключом (тот, который вы хотите отсортировать). В этом примере у нас будет переменная MyData, которая имеет следующую структуру:

var MyData = [
{ id : 1, name: "Angel Miguel",   city: "Nex Mexico" },
{ id : 2, name: "Michael Rogers", city: "Bogotá"     },
{ id : 3, name: "Steve Rogers",   city: "New York"   },
{ id : 4, name: "Ángel José",     city: "Bucaramanga"},
{ id : 5, name: "Carlos Delgado", city: "Nex Mexico" },
{ id : 6, name: "Jhonny Zapata",  city: "Zacatecas"  },
{ id : 7, name: "Bruce Wayne",    city: "Gotham"     },
{ id : 8, name: "Speedy Gonzales",city: "Nex Mexico" }
];

Каждый элемент имеет 3 ключа, которые можно сортировать по номерам и алфавиту.

2. Создайте пользовательскую функцию сортировки

JavaScript предлагает собственный метод, который ожидает в качестве первого аргумента функцию для сортировки в соответствии с вашими потребностями, поэтому вы сами должны написать эту функцию. Цель этой статьи — показать вам, как отсортировать по некоторому ключу массив объектов, поэтому мы предоставим вам эту функцию, которую вы можете просто использовать:

/**
* Function to sort alphabetically an array of objects by some specific key.
*
* @param {String} property Key of the object to sort.
*/
function dynamicSort(property) {
var sortOrder = 1;
if(property[0] === "-") {
sortOrder = -1;
property = property.substr(1);
}
return function (a,b) {
if(sortOrder == -1){
return b[property].localeCompare(a[property]);
}else{
return a[property].localeCompare(b[property]);
}
}
}

Как уже упоминалось, эта функция должна быть введена в качестве первого аргумента в функцию сортировки прототипа массива в JavaScript, поэтому вы не будете использовать ее напрямую, поскольку она просто возвратит 0 или 1. Основная точка этой функции для сортировки — это localeCompare, функция JavaScript, включенная в прототип строк, которая возвращает число, указывающее, идет ли строка1 до, после или совпадает со строкой2 в порядке сортировки (значения).

3. Сортировать по ключу в порядке возрастания

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

Важный

Обратите внимание, что метод sort переупорядочивает / сортирует элементы массива в одной и той же переменной (по ссылке), поэтому метод не возвращает новую переменную с новым порядком, но эта же переменная будет изменена на месте.

// Sort the MyData array with the custom function
// that sorts alphabetically by the name key
MyData.sort(dynamicSort("name"));
// Display data with new order !
console.log(MyData);

С предыдущим кодом console.log выведет объект с новым порядком:

[
{ "id":4, "name": "Ángel José",     "city":"Bucaramanga" },
{ "id":1, "name": "Angel Miguel",   "city":"Nex Mexico"  },
{ "id":7, "name": "Bruce Wayne",    "city":"Gotham"      },
{ "id":5, "name": "Carlos Delgado", "city":"Nex Mexico"  },
{ "id":6, "name": "Jhonny Zapata",  "city":"Zacatecas"   },
{ "id":2, "name": "Michael Rogers", "city":"Bogotá"      },
{ "id":8, "name": "Speedy Gonzales","city":"Nex Mexico"  },
{ "id":3, "name": "Steve Rogers",   "city":"New York"    }
]

Или попробуйте с новым ключом, например, город:

// Sort the MyData array with the custom function
// that sorts alphabetically by the name key
MyData.sort(dynamicSort("city"));
// Display data with new order !
console.log(MyData);

Это вывело бы вместо этого:

[
{ "id":2, "name": "Michael Rogers", "city": "Bogotá"     },
{ "id":4, "name": "Ángel José",     "city": "Bucaramanga"},
{ "id":7, "name": "Bruce Wayne",    "city": "Gotham"     },
{ "id":3, "name": "Steve Rogers",   "city": "New York"   },
{ "id":1, "name": "Angel Miguel",   "city": "Nex Mexico" },
{ "id":5, "name": "Carlos Delgado", "city": "Nex Mexico" },
{ "id":8, "name": "Speedy Gonzales","city": "Nex Mexico" },
{ "id":6, "name": "Jhonny Zapata",  "city": "Zacatecas"  }
]

4. Сортировка по ключу в порядке убывания

Чтобы отсортировать массив объектов по некоторому ключу в алфавитном порядке в порядке убывания, нужно всего лишь добавить в качестве префикса a - (минус) символ в начале ключевой строки, поэтому функция сортировки будет сортироваться по убыванию:

// Sort the MyData array with the custom function
// that sorts alphabetically in descending order by the name key
MyData.sort(dynamicSort("-name"));
// Display data with new order !
console.log(MyData);

Это вывело бы:

[
{ "id" :3, "name" : "Steve Rogers",    "city":"New York"   },
{ "id" :8, "name" : "Speedy Gonzales", "city":"Nex Mexico" },
{ "id" :2, "name" : "Michael Rogers",  "city":"Bogotá"     },
{ "id" :6, "name" : "Jhonny Zapata",   "city":"Zacatecas"  },
{ "id" :5, "name" : "Carlos Delgado",  "city":"Nex Mexico" },
{ "id" :7, "name" : "Bruce Wayne",     "city":"Gotham"     },
{ "id" :1, "name" : "Angel Miguel",    "city":"Nex Mexico" },
{ "id" :4, "name" : "Ángel José",      "city":"Bucaramanga"}
]