sort() у масиві

JavaScriptJunior~2 хв читання

Метод sort() у JavaScript використовується для сортування елементів масиву. Він змінює вихідний масив (на відміну від більшості інших методів) і може працювати як із числами, так і зі рядками, якщо вказати функцію порівняння.

Синтаксис

javascript

array.sort(compareFunction);

Де `compareFunction` - це колбек вигляду:

javascript

(a, b) => {
  // повернути від'ємне значення, якщо a має бути раніше b
  // повернути додатне значення, якщо a має бути пізніше b
  // повернути 0, якщо порядок не важливий
}

Приклад 1. Проста сортування рядків

javascript

const fruits = ['banana', 'apple', 'cherry'];

fruits.sort();

console.log(fruits); // ['apple', 'banana', 'cherry']

За умовчанням sort() сортує елементи як рядки за Unicode, навіть якщо це числа! Тому числа без колбека сортуються не за величиною, а за символами.

Приклад 2. Помилка при сортуванні чисел без функції порівняння

javascript

const numbers = [1, 10, 2, 5];
numbers.sort();
console.log(numbers); // [1, 10, 2, 5] - сортує як рядки!

Виправлено:

javascript

numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 2, 5, 10]

Функція (a, b) => a - b сортує за зростанням, (a, b) => b - a - за спаданням.

Приклад 3. Сортування за властивістю об'єкта

javascript

const users = [
  { name: 'Tim', age: 25 },
  { name: 'Alex', age: 30 },
  { name: 'John', age: 20 }
];

users.sort((a, b) => a.age - b.age);

console.log(users);
// [
//   { name: 'John', age: 20 },
//   { name: 'Tim', age: 25 },
//   { name: 'Alex', age: 30 }
// ]

Частий сценарій - сортування масиву об'єктів за числовим полем.

Приклад 4. Сортування рядків за алфавітом (без урахування регістру)

javascript

const names = ['tim', 'Alex', 'john'];

names.sort((a, b) => a.localeCompare(b, 'en', { sensitivity: 'base' }));

console.log(names); // ['Alex', 'john', 'tim']

localeCompare - правильний спосіб сортувати рядки з урахуванням мови та регістру.

Приклад 5. Сортування за спаданням

javascript

const prices = [100, 500, 200, 50];

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

console.log(prices); // [500, 200, 100, 50]

Важливо: `sort()` змінює вихідний масив

javascript

const arr = [3, 1, 2];
const sorted = arr.sort();

console.log(sorted); // [1, 2, 3]
console.log(arr);    // [1, 2, 3] - той самий масив, змінений!

Якщо потрібно зберегти вихідний - скопіюй перед сортуванням:

javascript

const sortedCopy = [...arr].sort((a, b) => a - b);

Приклад 6. Сортування за декількома критеріями

javascript

const users = [
  { name: 'Tim', age: 25 },
  { name: 'Alex', age: 25 },
  { name: 'John', age: 20 }
];

users.sort((a, b) => {
  if (a.age !== b.age) return a.age - b.age;
  return a.name.localeCompare(b.name);
});

console.log(users);
// [
//   { name: 'John', age: 20 },
//   { name: 'Alex', age: 25 },
//   { name: 'Tim', age: 25 }
// ]

Якщо вік однаковий - сортування йде за іменем.

Часті помилки

Без колбека сортуються рядки, а не числа

javascript

[10, 2, 1].sort(); // ['1', '10', '2']

Рішення:

javascript

[10, 2, 1].sort((a, b) => a - b); // [1, 2, 10]

Зміна вихідного масиву

javascript

const a = [3, 1, 2];
const b = a.sort();
console.log(a === b); // true - це той самий об'єкт

Відсутність стабільності у старих версіях JS

Сортування може бути нестабільним у старих рушіях (до ES2019). У сучасних версіях ECMAScript sort() стабільний - елементи з рівним порядком зберігають початковий.

Коли використовувати `sort()`

Мета	Чи підходить `sort()`
Відсортувати числа або рядки	Так
Відсортувати об'єкти за полем	Так
Отримати новий відсортований масив без зміни оригіналу	Так, але тільки з копією (`[...arr]`)
Перевірити умову	Ні
Трансформувати дані	Ні

Коротко:

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

Формула запам'ятовування: arr.sort((a, b) => a - b) -> за зростанням arr.sort((a, b) => b - a) -> за спаданням

Порівняння з іншими методами

Метод	Повертає новий масив	Змінює вихідний	Призначення
map()	так	ні	Перетворює елементи
filter()	так	ні	Відбирає елементи
find()	ні (елемент)	ні	Знаходить перший елемент
reduce()	ні (одне значення)	ні	Зводить до одного результату
sort()	ні (той самий масив)	так	Сортує елементи

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.