📦 Полный гайд по методам массивов JavaScript

Все методы работы с массивами с примерами и описаниями

⚠️ МУТИРУЕТ — изменяет исходный массив

✅ НЕ МУТИРУЕТ — возвращает новый массив

📋 Содержание

➕➖ Добавление и удаление элементов
🔄 Перебор элементов
🔀 Преобразование массивов
🔍 Поиск элементов
📊 Сортировка и порядок
🔗 Объединение и разделение
✅ Проверка условий
📉 Агрегация (reduce)
🛠️ Статические методы
🎮 Интерактивная демонстрация

➕➖ Добавление и удаление элементов

push()

Добавляет элементы в конец массива и возвращает новую длину

array.push(element1, element2, ..., elementN)

let fruits = ['яблоко', 'банан'];
fruits.push('апельсин');
console.log(fruits); // ['яблоко', 'банан', 'апельсин']
fruits.push('киви', 'манго');
console.log(fruits); // ['яблоко', 'банан', 'апельсин', 'киви', 'манго']

Результат: ['яблоко', 'банан', 'апельсин', 'киви', 'манго']

pop()

Удаляет последний элемент массива и возвращает его

array.pop()

let fruits = ['яблоко', 'банан', 'апельсин'];
let last = fruits.pop();
console.log(last); // 'апельсин'
console.log(fruits); // ['яблоко', 'банан']

Результат: last = 'апельсин', fruits = ['яблоко', 'банан']

unshift()

Добавляет элементы в начало массива и возвращает новую длину

array.unshift(element1, element2, ..., elementN)

let fruits = ['банан', 'апельсин'];
fruits.unshift('яблоко');
console.log(fruits); // ['яблоко', 'банан', 'апельсин']

Результат: ['яблоко', 'банан', 'апельсин']

shift()

Удаляет первый элемент массива и возвращает его

array.shift()

let fruits = ['яблоко', 'банан', 'апельсин'];
let first = fruits.shift();
console.log(first); // 'яблоко'
console.log(fruits); // ['банан', 'апельсин']

Результат: first = 'яблоко', fruits = ['банан', 'апельсин']

splice()

Удаляет, заменяет или добавляет элементы в массив

array.splice(start, deleteCount, item1, item2, ...)

let arr = ['a', 'b', 'c', 'd', 'e'];

// Удаление
arr.splice(2, 2); // ['a', 'b', 'e']

// Вставка
arr = ['a', 'b', 'c'];
arr.splice(1, 0, 'x', 'y'); // ['a', 'x', 'y', 'b', 'c']

// Замена
arr = ['a', 'b', 'c'];
arr.splice(1, 1, 'z'); // ['a', 'z', 'c']

Результат: различные варианты изменения массива

💡 Самый универсальный метод для изменения массива!

🔄 Перебор элементов

forEach()

Выполняет функцию для каждого элемента массива

array.forEach((element, index, array) => { })

let numbers = [1, 2, 3, 4, 5];
numbers.forEach((num, index) => {
    console.log(`Индекс ${index}: ${num}`);
});
// Индекс 0: 1
// Индекс 1: 2
// ...

Выводит все элементы с их индексами

💡 Не возвращает новый массив, просто перебирает

map()

Создает новый массив с результатами вызова функции для каждого элемента

array.map((element, index, array) => { })

let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

let names = ['Иван', 'Мария', 'Петр'];
let greetings = names.map(name => `Привет, ${name}!`);
console.log(greetings); // ['Привет, Иван!', 'Привет, Мария!', 'Привет, Петр!']

Результат: [2, 4, 6, 8, 10], ['Привет, Иван!', ...]

filter()

Создает новый массив с элементами, прошедшими проверку

array.filter((element, index, array) => { })

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6, 8, 10]

let words = ['спринт', 'марафон', 'бег', 'прыжок'];
let longWords = words.filter(word => word.length > 5);
console.log(longWords); // ['спринт', 'марафон', 'прыжок']

Результат: [2, 4, 6, 8, 10], ['спринт', 'марафон', 'прыжок']

flatMap()

Сначала map(), потом flat() - комбинация двух методов

array.flatMap((element, index, array) => { })

let arr = [1, 2, 3, 4];
let result = arr.flatMap(x => [x, x * 2]);
console.log(result); // [1, 2, 2, 4, 3, 6, 4, 8]

let sentences = ['Привет мир', 'JavaScript круто'];
let words = sentences.flatMap(s => s.split(' '));
console.log(words); // ['Привет', 'мир', 'JavaScript', 'круто']

Результат: [1, 2, 2, 4, 3, 6, 4, 8], ['Привет', 'мир', 'JavaScript', 'круто']

🔀 Преобразование массивов

slice()

Возвращает копию части массива

array.slice(start, end)

let fruits = ['яблоко', 'банан', 'апельсин', 'киви', 'манго'];
console.log(fruits.slice(1, 3)); // ['банан', 'апельсин']
console.log(fruits.slice(2)); // ['апельсин', 'киви', 'манго']
console.log(fruits.slice(-2)); // ['киви', 'манго']

Результат: ['банан', 'апельсин'], ['апельсин', 'киви', 'манго'], ['киви', 'манго']

flat()

Разворачивает вложенные массивы на указанную глубину

array.flat(depth)

let arr = [1, 2, [3, 4], [5, [6, 7]]];
console.log(arr.flat()); // [1, 2, 3, 4, 5, [6, 7]]
console.log(arr.flat(2)); // [1, 2, 3, 4, 5, 6, 7]
console.log(arr.flat(Infinity)); // [1, 2, 3, 4, 5, 6, 7]

Результат: [1, 2, 3, 4, 5, [6, 7]], [1, 2, 3, 4, 5, 6, 7]

fill()

Заполняет элементы массива статическим значением

array.fill(value, start, end)

let arr = [1, 2, 3, 4, 5];
arr.fill(0); // [0, 0, 0, 0, 0]

arr = [1, 2, 3, 4, 5];
arr.fill(9, 2, 4); // [1, 2, 9, 9, 5]

let zeros = new Array(5).fill(0); // [0, 0, 0, 0, 0]

Результат: [0, 0, 0, 0, 0], [1, 2, 9, 9, 5], [0, 0, 0, 0, 0]

copyWithin()

Копирует часть массива в другое место в этом же массиве

array.copyWithin(target, start, end)

let arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3); // [4, 5, 3, 4, 5]

arr = [1, 2, 3, 4, 5];
arr.copyWithin(1, 3, 4); // [1, 4, 3, 4, 5]

Результат: [4, 5, 3, 4, 5], [1, 4, 3, 4, 5]

with()

Возвращает новый массив с измененным элементом по индексу (ES2023)

array.with(index, value)

let arr = [1, 2, 3, 4, 5];
let newArr = arr.with(2, 99);
console.log(newArr); // [1, 2, 99, 4, 5]
console.log(arr); // [1, 2, 3, 4, 5] - оригинал не изменился

Результат: [1, 2, 99, 4, 5]

💡 Иммутабельная альтернатива arr[index] = value

toReversed()

Возвращает новый массив в обратном порядке (ES2023)

array.toReversed()

let arr = [1, 2, 3, 4, 5];
let reversed = arr.toReversed();
console.log(reversed); // [5, 4, 3, 2, 1]
console.log(arr); // [1, 2, 3, 4, 5] - оригинал не изменился

Результат: [5, 4, 3, 2, 1]

toSorted()

Возвращает новый отсортированный массив (ES2023)

array.toSorted(compareFn)

let arr = [3, 1, 4, 1, 5, 9, 2, 6];
let sorted = arr.toSorted((a, b) => a - b);
console.log(sorted); // [1, 1, 2, 3, 4, 5, 6, 9]
console.log(arr); // [3, 1, 4, 1, 5, 9, 2, 6] - оригинал не изменился

Результат: [1, 1, 2, 3, 4, 5, 6, 9]

toSpliced()

Возвращает новый массив с удаленными/добавленными элементами (ES2023)

array.toSpliced(start, deleteCount, item1, item2, ...)

let arr = ['a', 'b', 'c', 'd', 'e'];
let newArr = arr.toSpliced(2, 2, 'X', 'Y');
console.log(newArr); // ['a', 'b', 'X', 'Y', 'e']
console.log(arr); // ['a', 'b', 'c', 'd', 'e'] - оригинал не изменился

Результат: ['a', 'b', 'X', 'Y', 'e']

🔍 Поиск элементов

indexOf()

Возвращает первый индекс элемента или -1

array.indexOf(searchElement, fromIndex)

let fruits = ['яблоко', 'банан', 'апельсин', 'банан'];
console.log(fruits.indexOf('банан')); // 1
console.log(fruits.indexOf('киви')); // -1
console.log(fruits.indexOf('банан', 2)); // 3

Результат: 1, -1, 3

lastIndexOf()

Возвращает последний индекс элемента или -1

array.lastIndexOf(searchElement, fromIndex)

let numbers = [1, 2, 3, 2, 1];
console.log(numbers.lastIndexOf(2)); // 3
console.log(numbers.lastIndexOf(2, 2)); // 1

Результат: 3, 1

includes()

Проверяет, содержит ли массив элемент

array.includes(searchElement, fromIndex)

let fruits = ['яблоко', 'банан', 'апельсин'];
console.log(fruits.includes('банан')); // true
console.log(fruits.includes('киви')); // false

let numbers = [1, 2, 3, NaN];
console.log(numbers.includes(NaN)); // true (в отличие от indexOf)

Результат: true, false, true

find()

Возвращает первый элемент, удовлетворяющий условию

array.find((element, index, array) => { })

let numbers = [5, 12, 8, 130, 44];
let found = numbers.find(num => num > 10);
console.log(found); // 12

let users = [
    {name: 'Иван', age: 25},
    {name: 'Мария', age: 30},
    {name: 'Петр', age: 20}
];
let user = users.find(u => u.age > 25);
console.log(user); // {name: 'Мария', age: 30}

Результат: 12, {name: 'Мария', age: 30}

findIndex()

Возвращает индекс первого элемента, удовлетворяющего условию

array.findIndex((element, index, array) => { })

let numbers = [5, 12, 8, 130, 44];
let index = numbers.findIndex(num => num > 10);
console.log(index); // 1

Результат: 1

findLast()

Возвращает последний элемент, удовлетворяющий условию (ES2023)

array.findLast((element, index, array) => { })

let numbers = [5, 12, 8, 130, 44];
let found = numbers.findLast(num => num > 10);
console.log(found); // 44

Результат: 44

findLastIndex()

Возвращает индекс последнего элемента, удовлетворяющего условию (ES2023)

array.findLastIndex((element, index, array) => { })

let numbers = [5, 12, 8, 130, 44];
let index = numbers.findLastIndex(num => num > 10);
console.log(index); // 4

Результат: 4

📊 Сортировка и порядок

sort()

Сортирует элементы массива

array.sort(compareFunction)

// Строки (по умолчанию)
let fruits = ['банан', 'яблоко', 'апельсин'];
fruits.sort();
console.log(fruits); // ['апельсин', 'банан', 'яблоко']

// Числа (требуется функция сравнения!)
let numbers = [40, 100, 1, 5, 25];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 5, 25, 40, 100]

// По убыванию
numbers.sort((a, b) => b - a);
console.log(numbers); // [100, 40, 25, 5, 1]

Результат: ['апельсин', 'банан', 'яблоко'], [1, 5, 25, 40, 100]

⚠️ БЕЗ функции сравнения числа сортируются как строки: [1, 100, 25, 40, 5]!

reverse()

Разворачивает массив в обратном порядке

array.reverse()

let arr = [1, 2, 3, 4, 5];
arr.reverse();
console.log(arr); // [5, 4, 3, 2, 1]

Результат: [5, 4, 3, 2, 1]

🔗 Объединение и разделение

concat()

Объединяет массивы в новый массив

array.concat(array2, array3, ..., arrayN)

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [7, 8, 9];
let combined = arr1.concat(arr2, arr3);
console.log(combined); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

// Можно добавлять и отдельные элементы
let result = arr1.concat(99, arr2);
console.log(result); // [1, 2, 3, 99, 4, 5, 6]

Результат: [1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 99, 4, 5, 6]

join()

Объединяет элементы массива в строку

array.join(separator)

let fruits = ['яблоко', 'банан', 'апельсин'];
console.log(fruits.join()); // 'яблоко,банан,апельсин'
console.log(fruits.join(', ')); // 'яблоко, банан, апельсин'
console.log(fruits.join(' + ')); // 'яблоко + банан + апельсин'
console.log(fruits.join('')); // 'яблокобананапельсин'

Результат: 'яблоко, банан, апельсин'

✅ Проверка условий

every()

Проверяет, все ли элементы удовлетворяют условию

array.every((element, index, array) => { })

let numbers = [2, 4, 6, 8, 10];
console.log(numbers.every(num => num % 2 === 0)); // true

let mixed = [2, 4, 5, 8];
console.log(mixed.every(num => num % 2 === 0)); // false

let ages = [25, 30, 35, 40];
console.log(ages.every(age => age >= 18)); // true

Результат: true, false, true

some()

Проверяет, есть ли хотя бы один элемент, удовлетворяющий условию

array.some((element, index, array) => { })

let numbers = [1, 3, 5, 7, 9];
console.log(numbers.some(num => num % 2 === 0)); // false

let mixed = [1, 3, 4, 7];
console.log(mixed.some(num => num % 2 === 0)); // true

let ages = [12, 15, 22, 8];
console.log(ages.some(age => age >= 18)); // true

Результат: false, true, true

📉 Агрегация (reduce)

reduce()

Применяет функцию к аккумулятору и каждому элементу (слева направо)

array.reduce((accumulator, currentValue, index, array) => { }, initialValue)

// Сумма чисел
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 15

// Подсчет элементов
let fruits = ['яблоко', 'банан', 'яблоко', 'апельсин', 'банан', 'яблоко'];
let count = fruits.reduce((acc, fruit) => {
    acc[fruit] = (acc[fruit] || 0) + 1;
    return acc;
}, {});
console.log(count); // {яблоко: 3, банан: 2, апельсин: 1}

// Максимальное значение
let max = numbers.reduce((a, b) => Math.max(a, b));
console.log(max); // 5

Результат: 15, {яблоко: 3, банан: 2, апельсин: 1}, 5

💡 Самый мощный метод для агрегации данных!

reduceRight()

То же, что reduce(), но справа налево

array.reduceRight((accumulator, currentValue, index, array) => { }, initialValue)

let arr = ['1', '2', '3', '4', '5'];
let result = arr.reduceRight((acc, val) => acc + val);
console.log(result); // '54321'

// Разворачивание массива
let numbers = [1, 2, 3, 4, 5];
let reversed = numbers.reduceRight((acc, val) => {
    acc.push(val);
    return acc;
}, []);
console.log(reversed); // [5, 4, 3, 2, 1]

Результат: '54321', [5, 4, 3, 2, 1]

🛠️ Статические методы

Array.isArray()

Проверяет, является ли значение массивом

Array.isArray(value)

console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray('массив')); // false
console.log(Array.isArray({0: 'a', 1: 'b'})); // false
console.log(Array.isArray(null)); // false

Результат: true, false, false, false

Array.from()

Создает массив из итерируемого или массивоподобного объекта

Array.from(arrayLike, mapFunction)

// Из строки
console.log(Array.from('Hello')); // ['H', 'e', 'l', 'l', 'o']

// Из Set
let set = new Set([1, 2, 3]);
console.log(Array.from(set)); // [1, 2, 3]

// С функцией преобразования
console.log(Array.from([1, 2, 3], x => x * 2)); // [2, 4, 6]

// Создание диапазона
console.log(Array.from({length: 5}, (_, i) => i + 1)); // [1, 2, 3, 4, 5]

Результат: ['H', 'e', 'l', 'l', 'o'], [1, 2, 3], [2, 4, 6], [1, 2, 3, 4, 5]

Array.of()

Создает массив из переданных аргументов

Array.of(element1, element2, ..., elementN)

console.log(Array.of(1, 2, 3)); // [1, 2, 3]
console.log(Array.of(7)); // [7] (в отличие от new Array(7))
console.log(Array.of()); // []
console.log(Array.of(undefined)); // [undefined]

Результат: [1, 2, 3], [7], [], [undefined]

💡 Разница: new Array(7) создает массив из 7 пустых элементов

toString()

Преобразует массив в строку

array.toString()

let arr = [1, 2, 3, 4, 5];
console.log(arr.toString()); // '1,2,3,4,5'

let mixed = ['a', 'b', 'c'];
console.log(mixed.toString()); // 'a,b,c'

Результат: '1,2,3,4,5', 'a,b,c'

toLocaleString()

Преобразует массив в строку с учетом локали

array.toLocaleString(locales, options)

let prices = [1000.5, 2000.75, 3000.25];
console.log(prices.toLocaleString('ru-RU', {
    style: 'currency',
    currency: 'RUB'
}));
// '1 000,50 ₽,2 000,75 ₽,3 000,25 ₽'

let dates = [new Date('2024-01-15')];
console.log(dates.toLocaleString('ru-RU')); // '15.01.2024, 00:00:00'

Результат: форматированная строка с учетом локали

length

Свойство, возвращающее длину массива

array.length

let fruits = ['яблоко', 'банан', 'апельсин'];
console.log(fruits.length); // 3

// Изменение длины
fruits.length = 2;
console.log(fruits); // ['яблоко', 'банан']

// Очистка массива
fruits.length = 0;
console.log(fruits); // []

Результат: 3, ['яблоко', 'банан'], []

💡 length можно изменять для усечения массива!

at()

Возвращает элемент по индексу (поддерживает отрицательные индексы)

array.at(index)

let arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr.at(0)); // 'a'
console.log(arr.at(2)); // 'c'
console.log(arr.at(-1)); // 'e' (последний элемент)
console.log(arr.at(-2)); // 'd' (предпоследний)

Результат: 'a', 'c', 'e', 'd'

💡 Удобнее arr[arr.length - 1] для получения последнего элемента!

keys()

Возвращает итератор ключей (индексов) массива

array.keys()

let arr = ['a', 'b', 'c'];
let iterator = arr.keys();
for (let key of iterator) {
    console.log(key); // 0, 1, 2
}

console.log([...arr.keys()]); // [0, 1, 2]

Результат: 0, 1, 2

values()

Возвращает итератор значений массива

array.values()

let arr = ['a', 'b', 'c'];
let iterator = arr.values();
for (let value of iterator) {
    console.log(value); // 'a', 'b', 'c'
}

console.log([...arr.values()]); // ['a', 'b', 'c']

Результат: 'a', 'b', 'c'

entries()

Возвращает итератор пар [индекс, значение]

array.entries()

let arr = ['a', 'b', 'c'];
let iterator = arr.entries();
for (let [index, value] of iterator) {
    console.log(index, value);
}
// 0 'a'
// 1 'b'
// 2 'c'

console.log([...arr.entries()]); // [[0, 'a'], [1, 'b'], [2, 'c']]

Результат: [[0, 'a'], [1, 'b'], [2, 'c']]

🎮 Интерактивная демонстрация

Введите массив (числа или слова через запятую) и попробуйте различные методы!

Результат появится здесь...

🔥 Продвинутые примеры

Выберите пример...

💻 Создано для изучения JavaScript методов массивов

📚 Все примеры рабочие и готовы к использованию

🔥 Совет: Практикуйтесь с интерактивной демонстрацией!