JavaScript методи масивів: шпаргалка

JavaScript методи масивів

Масив — основна структура даних в JS. Тримай під рукою — тут зібрані всі методи з позначками, що мутує оригінал, а що ні.

Детальніше — в уроках Масиви частина 1 та Масиви частина 2.

Мутація vs новий масив

Мутація vs створення нового масиву

Додавання та видалення елементів

Всі ці методи мутують оригінальний масив.

const fruits = ['яблуко', 'банан', 'вишня'];

fruits.push('диня');        // ['яблуко', 'банан', 'вишня', 'диня']
fruits.pop();               // 'диня', масив: ['яблуко', 'банан', 'вишня']

fruits.unshift('абрикос');  // ['абрикос', 'яблуко', 'банан', 'вишня']
fruits.shift();             // 'абрикос'

// splice: видалити 1 елемент з позиції 1, вставити 'ківі'
fruits.splice(1, 1, 'ківі'); // ['яблуко', 'ківі', 'вишня']

Трансформація

Ці методи НЕ мутують — повертають новий масив.

const nums = [1, 2, 3, 4, 5];

nums.map(x => x * 2);           // [2, 4, 6, 8, 10]
nums.filter(x => x > 3);        // [4, 5]
nums.reduce((sum, x) => sum + x, 0); // 15

nums.slice(1, 3);               // [2, 3] — без мутації!
[1, 2].concat([3, 4]);          // [1, 2, 3, 4]

[[1, 2], [3, [4]]].flat();      // [1, 2, 3, [4]]
[[1, 2], [3, [4]]].flat(Infinity); // [1, 2, 3, 4]

Доступ до елементів

const arr = ['а', 'б', 'в', 'г', 'ґ'];

arr[0];        // 'а'
arr[arr.length - 1]; // 'ґ' — старий спосіб

// at() — підтримує від'ємні індекси (ES2022)
arr.at(0);     // 'а'
arr.at(-1);    // 'ґ' — останній
arr.at(-2);    // 'г' — передостанній

Ітерація

const fruits = ['яблуко', 'банан', 'вишня'];

fruits.forEach((fruit, i) => console.log(i, fruit));
// 0 'яблуко', 1 'банан', 2 'вишня'

for (const [i, fruit] of fruits.entries()) {
  console.log(i, fruit); // те саме
}

Пошук

find vs filter

find vs filter — різниця

const users = [
  { name: 'Олена', age: 25 },
  { name: 'Іван', age: 30 },
  { name: 'Марія', age: 28 },
];

users.find(u => u.age > 25);     // { name: 'Іван', age: 30 } — перший
users.filter(u => u.age > 25);   // [{ name: 'Іван'... }, { name: 'Марія'... }] — всі

users.some(u => u.age > 29);     // true — хоча б один старший за 29
users.every(u => u.age > 20);    // true — всі старші за 20

users.findIndex(u => u.name === 'Марія'); // 2

// ES2023: пошук з кінця
[1, 2, 3, 4, 3].findLast(x => x === 3);      // 3 (індекс 4)
[1, 2, 3, 4, 3].findLastIndex(x => x === 3);  // 4

Сортування

// Увага: sort() без аргументу сортує як РЯДКИ!
[10, 9, 2, 21].sort();           // [10, 2, 21, 9] — неправильно!
[10, 9, 2, 21].sort((a, b) => a - b); // [2, 9, 10, 21] — правильно

// Сортування об'єктів
users.sort((a, b) => a.age - b.age);         // за віком (зростання)
users.sort((a, b) => a.name.localeCompare(b.name)); // за ім'ям (алфавіт)

// ES2023: без мутації
const sorted = [3, 1, 2].toSorted((a, b) => a - b); // [1, 2, 3]
const reversed = [1, 2, 3].toReversed();             // [3, 2, 1]

splice vs slice

const arr = [1, 2, 3, 4, 5];

// splice(start, deleteCount) — МУТУЄ
arr.splice(1, 2);    // повертає [2, 3], arr тепер [1, 4, 5]

// slice(start, end) — НЕ мутує
const arr2 = [1, 2, 3, 4, 5];
arr2.slice(1, 3);    // повертає [2, 3], arr2 залишається [1, 2, 3, 4, 5]

map vs forEach

// map — повертає новий масив
const doubled = [1, 2, 3].map(x => x * 2);  // [2, 4, 6]

// forEach — нічого не повертає (undefined)
const result = [1, 2, 3].forEach(x => console.log(x)); // undefined

Правило: потрібен новий масив → map(). Потрібен побічний ефект (console.log, запис у DOM) → forEach().

Статичні методи

Array.isArray([1, 2]);        // true
Array.isArray('hello');       // false

Array.from('hello');          // ['h', 'e', 'l', 'l', 'o']
Array.from({ length: 3 }, (_, i) => i); // [0, 1, 2]

Array.of(1, 2, 3);           // [1, 2, 3]

Рецепти

// Видалити дублікати
[...new Set([1, 2, 2, 3, 3])];              // [1, 2, 3]

// Сума
[1, 2, 3, 4].reduce((a, b) => a + b, 0);    // 10

// Максимум
Math.max(...[5, 2, 8, 1]);                   // 8

// Перемішати (shuffle)
arr.sort(() => Math.random() - 0.5);

// Групування (ES2024)
Object.groupBy(users, u => u.age >= 30 ? '30+' : '<30');
// { '<30': [{name:'Олена'...}, {name:'Марія'...}], '30+': [{name:'Іван'...}] }

// Групування (старий спосіб через reduce)
users.reduce((groups, user) => {
  const key = user.age >= 30 ? '30+' : '<30';
  groups[key] = [...(groups[key] || []), user];
  return groups;
}, {});

ES2023: немутуючі версії

const arr = [3, 1, 2];

arr.toSorted((a, b) => a - b);  // [1, 2, 3] — arr не змінився
arr.toReversed();                // [2, 1, 3] — arr не змінився
arr.toSpliced(1, 1, 9);         // [3, 9, 2] — arr не змінився
arr.with(0, 99);                 // [99, 1, 2] — arr не змінився