Метод sort()

Деструктивний (змінює вихідний масив)

Метод sort() використовується для сортування елементів масиву на місці (змінює порядок елементів у масиві). За замовчуванням, метод sort() впорядковує елементи у лексикографічному порядку - тобто як рядки.

Що виконує метод:

• Сортує і змінює вихідний масив.

• Повертає змінений масив, тобто посилання на відсортований вихідний.

• За замовчуванням сортує за зростанням.

• Сортування відбувається шляхом приведення значень до рядка і порівняння порядкових номерів у таблиці Unicode.

Сортування чисел за зростанням (посимвольно)

const numbers = [3, 7, 1, 9, 6];
console.log("Вихідний масив: ", numbers);
//  [3, 7, 1, 9, 6]

numbers.sort();

console.log("Вихідний масив після сортування:", numbers);
// [1, 3, 6, 7, 9]

За замовчуванням значення приводяться до рядка. Тому стандартне сортування чисел працює посимвольно.

const numbers = [3, 7, 1, 9, 6, 10, 23, 70];
console.log("Вихідний масив: ", numbers);
//  [3, 7, 1, 9, 6, 10, 23, 70]

numbers.sort();

console.log("Вихідний масив після сортування:", numbers);
// [1, 10, 23, 3, 6, 7, 70, 9]

Метод спочатку відсортував по першому символу, потім по другому і тд. Нижче ми розглянемо як задавати свій порядок сортування.

Сортування рядків за алфавітом (посимвольно)

Масив рядків метод sort() сортує за алфівітом.

const people = ["Max", "Alex", "Helga", "Angelina", "Pablo"];
console.log("Вихідний масив: ", people);
// ['Max', 'Alex', 'Helga', 'Angelina', 'Pablo']

people.sort();

console.log("Вихідний масив після сортування:", people);
// ['Alex', 'Angelina', 'Helga', 'Max', 'Pablo']

У той же час великі і малі літери метод sort() розглядає як різні символи і розташовує згідно з таблицею символів unicode. Порядковий номер великих літер менший, ніж у малих.

const letters = ["b", "C", "d", "c", "A", "B", "D", "a"];
console.log("Вихідний масив: ", letters);
// ["b", "C", "d", "c", "A", "B", "D", "a"]

letters.sort();

console.log("Вихідний масив після сортування:", letters);
// ['A', 'B', 'C', 'D', 'a', 'b', 'c', 'd']

Уникнення деструкції, чистота функції

Метод sort() змінює вихідний масив. Відтак потрібно робити копію масива перед застосуванням методу.

const letters = ["b", "C", "d", "c", "A", "B", "D", "a"];
console.log("Вихідний масив: ", letters);
// ["b", "C", "d", "c", "A", "B", "D", "a"]

const sortedLetters = [...letters].sort();

console.log("Вихідний масив після сортування:", letters);
// ["b", "C", "d", "c", "A", "B", "D", "a"]

console.log("Новий відсортований масив:", sortedLetters);
// ['A', 'B', 'C', 'D', 'a', 'b', 'c', 'd']

Сортування чисел за арифметичним зростанням і спаданням

Щоб сортування за зростанням чи спаданням відбувалось по арифметичним правилам у метод sort() передають колбек-функцію порівняння (compare function) з двома параметрами. Від результату цієї функції буде залежати порядок сортування.

Синтаксис:

array.sort((a, b) => {
  // Тіло колбек-функції
});

a - перший елемент для порівняння.

b - другий елемент для порівняння.

Сортування за арифметичним зростанням

Якщо виклик колбек функції повертає відʼємне значення тобто a < b, сортування поставить a перед b. Це буде сортування за зростанням.

const numbers = [3, 7, 1, 9, 6, 10, 23, 70];
console.log("Вихідний масив: ", numbers);
//  [3, 7, 1, 9, 6, 10, 23, 70]

numbers.sort((a, b) => {
  return a - b;
});

console.log("Вихідний масив після сортування:", numbers);
// [1, 3, 6, 7, 9, 10, 23, 70]

Для спрощення запису можна використвувати неявне повернення.

Сортування за арифметичним спаданням

Якщо виклик колбек функції повертає будь-яке додатне значення більше нуля, тобто b > a, сортування поставить b перед a. Тобто це - сортування за спаданням.

const numbers = [3, 7, 1, 9, 6, 10, 23, 70];
console.log("Вихідний масив: ", numbers);
//  [3, 7, 1, 9, 6, 10, 23, 70]

numbers.sort((a, b) => b - a);

console.log("Вихідний масив після сортування:", numbers);
// [70, 23, 10, 9, 7, 6, 3, 1]

Якщо виклик колбек функції повертає 0, сортування залишить a і b незмінними по відношенню один до одного, але відсортує їх по відношенню до всіх інших елементів.

Сортування рядків (регістронезалежне)

Вище ми розглянули сортування масиву рядків за алфавітом, але малі літери при цьому виносилися ніби окремим алфавітом після великих літер. Цей ефект усуває використання в методі sort() колбек функції із методом рядків localeCompare().

firstString.localeCompare(secondString)

Метод localeCompare() викликається на рядку, який треба порівняти (firstString) і як аргумент йому в круглих дужках передають другий рядок (secondString).

"a".localeCompare("b"); // -1
"b".localeCompare("a"); // 1
"a".localeCompare("a"); // 0
"b".localeCompare("b"); // 0

• Повертає від'ємне значення, якщо firstString повинен бути перед secondString.

• Повертає додатне значення більше нуля, якщо firstString повинен бути після secondString.

• Якщо рядки однакові, повертається нуль.

Це зручно використовувати для сортування рядків, оскільки метод sort() очікує такі самі значення від колбек-функції.

const letters = ["b", "C", "d", "c", "A", "B", "D", "a"];
console.log("Вихідний масив: ", letters);
// ["b", "C", "d", "c", "A", "B", "D", "a"]

letters.sort((a, b) => a.localeCompare(b));

console.log("Вихідний масив після сортування:", letters);
// ['a', 'A', 'b', 'B', 'c', 'C', 'd', 'D']

Сортування за алфавітом і в зворотньому порядку

Відсортуємо згідно з вказаними правилами масив рядків в алфавітоному і зворотному порядку.

const people = ["Max", "Alex", "Helga", "Angelina", "Pablo"];
console.log("Вихідний масив: ", people);
// ['Max', 'Alex', 'Helga', 'Angelina', 'Pablo']

const alphabetSort = [...people].sort((a, b) => a.localeCompare(b));
const reverseSort = [...people].sort((a, b) => b.localeCompare(a));

console.log("Вихідний масив після сортування:", people);
// ['Max', 'Alex', 'Helga', 'Angelina', 'Pablo']

console.log("Алфавітне сортування:", alphabetSort);
// ['Alex', 'Angelina', 'Helga', 'Max', 'Pablo']

console.log("Реверсне сортування:", reverseSort);
// ['Pablo', 'Max', 'Helga', 'Angelina', 'Alex']

Сортування об'єктів

За описпними вище принципами можна сортувати масиви обʼєктів. Відсортуємо нижченаведений масив обʼєктів за зростанням віку, спаданням віку і за алфавітом.

const people = [
  { name: "Alex", age: 18 },
  { name: "Max", age: 67 },
  { name: "Helga", age: 14 },
  { name: "Mathew", age: 36 },
  { name: "Angelina", age: 59 },
  { name: "Pablo", age: 7 },
  { name: "Paolina", age: 61 },
];
console.log(people); // вихідний масив

const olderPeople = [...people].sort((a, b) => a.age - b.age);
console.log(olderPeople); // від молодших до старших

const youngerPeople = [...people].sort((a, b) => b.age - a.age);
console.log(youngerPeople); // від старших до молодших

const alphabetPeople = [...people].sort((a, b) => a.name.localeCompare(b.name));
console.log(alphabetPeople); // за алфавітом