Методы массивов в JavaScript

push()

Метод push() предназначен для добавления одного или нескольких элементов в конец массива. Это один из самых часто используемых методов для динамического расширения массива данными.

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

const myArray = ['HTML', 'CSS', 'JS'];

const arrayLength = myArray.push('PHP', 'SQL');

console.log(myArray); // ['HTML', 'CSS', 'JS', 'PHP', 'SQL']
console.log(arrayLength); // 5

unshift()

Метод unshift() является полной противоположностью push(). Он добавляет один или несколько элементов в начало массива.

Как и push(), unshift() мутирует исходный массив. Добавление в начало требует сдвига всех существующих элементов вправо для освобождения места, поэтому с точки производительности эта операция может быть медленнее push(), особенно для очень больших массивов. Метод также возвращает новую длину массива.

const myArray = ['HTML', 'CSS', 'JS'];

const arrayLength = myArray.unshift('PHP', 'SQL');

console.log(myArray); // ['PHP', 'SQL', 'HTML', 'CSS', 'JS']
console.log(arrayLength); // 5

pop()

Метод pop() - используется для удаления последнего элемента из массива. Это классическая операция для структуры данных "стек" (LIFO - Last In, First Out).

pop() — деструктивный метод, который изменяет исходный массив, удаляя из него последний элемент. В отличие от push() и unshift(), он возвращает не длину, а сам удаленный элемент. Это позволяет использовать удаленное значение, например, для присвоения переменной. Если массив пуст, pop() вернет undefined.

const myArray = ['HTML', 'CSS', 'JS'];

const removedElement = myArray.pop();

console.log(myArray); // ['HTML', 'CSS']
console.log(removedElement); // 'JS'

shift()

Метод shift() - удаляет первый элемент из массива. Он противоположен pop() и является основной операцией для структуры "очередь" (FIFO - First In, First Out).

shift() мутирует массив, удаляя его нулевой элемент. После удаления все последующие элементы сдвигаются на одну позицию влево, что может быть ресурсоемким для больших массивов. Метод возвращает удаленный элемент. Если массив пуст, возвращается undefined.

const myArray = ['HTML', 'CSS', 'JS'];

const removedElement = myArray.shift();

console.log(myArray); // ['CSS', 'JS']
console.log(removedElement); // 'HTML'

join()

Метод join() - создает и возвращает новую строку путем объединения всех элементов массива. Разделитель между элементами в результирующей строке задается аргументом метода.

Это не мутирующий метод; исходный массив остается неизменным. Если аргумент не указан, элементы будут разделены запятой ,. Если передать пустую строку '', элементы склеятся вплотную. join() невероятно полезен для быстрого форматирования данных массива для вывода, создания CSV-строк или динамического формирования HTML-атрибутов.

// Пример 1
const  myArray = ['HTML', 'CSS', 'JS', 'PHP', 'SQL'];

const result = myArray.join();

console.log(myArray); // ['HTML', 'CSS', 'JS', 'PHP', 'SQL']
console.log(result); // 'HTML, CSS, JS, PHP, SQL'

// Пример 2
const myArray = ['HTML', 'CSS', 'JS', 'PHP', 'SQL'];

const result = myArray.join(' - ');

console.log(myArray); // ['HTML', 'CSS', 'JS', 'PHP', 'SQL']
console.log(result); // 'HTML - CSS - JS - PHP - SQL'

split()

Метод split() — это метод строк, который преобразует строку в массив подстрок, разделяя исходную строку по указанному разделителю. Это мощный инструмент для парсинга и обработки текстовых данных.

Метод split() принимает строку и "разрезает" ее в местах, где встречается указанный разделитель (delimiter), возвращая массив полученных фрагментов. Разделитель может быть как простым символом, так и сложным регулярным выражением.

Метод split() не является методом массивов, но в реальной практике он часто используется вместе с методами массивов как противоположное действие методу join(). Например, когда Вам необходимо сначала преобразовать массив в строку, а затем обратно в массив.

Данный метод принимает два аргумента:

// Пример 1
const names = 'Вася, Петя, Маша, Света';

const result = names.split();

console.log(names); // 'HTML, CSS, JS, PHP, SQL'
console.log(result); // ['HTML', 'CSS', 'JS', 'PHP', 'SQL']

// Пример 2
const names = 'Вася - Петя - Маша - Света';

const result = names.split(' - ');

console.log(names); // 'HTML - CSS - JS - PHP - SQL'
console.log(result); // ['HTML', 'CSS', 'JS', 'PHP', 'SQL']

concat()

Метод concat() - используется для объединения двух или более массивов. Он не изменяет существующие массивы, а возвращает новый массив, являющийся результатом слияния.

concat() — это безопасный способ "склеить" массивы, соответствующий принципам функционального программирования (иммутабельность). Он может принимать как другие массивы, так и простые значения в качестве аргументов. В современном JS часто используется оператор расширения (spread operator) [...arr1, ...arr2] как более краткая альтернатива, но concat() остается хорошо читаемым и поддерживаемым вариантом.

const myArray1 = ['HTML', 'CSS', 'JS'];
const myArray2 = ['PHP', 'SQL', 'Python'];

const result = myArray1.concat(myArray2);

console.log(myArray1); // ['HTML', 'CSS', 'JS']
console.log(myArray2); // ['PHP', 'SQL', 'Python']
console.log(result); // ['HTML', 'CSS', 'JS', 'PHP', 'SQL', 'Python']

reverse()

Метод reverse() - переставляет элементы массива в обратном порядке: первый становится последним, а последний — первым.

Важно помнить, что reverse() работает деструктивно — он меняет порядок элементов в исходном массиве. Метод возвращает ссылку на этот же, уже измененный массив. Если требуется сохранить исходный массив, перед применением reverse() следует создать его копию, например, с помощью slice() или оператора расширения: [...array].reverse().

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

const result = myArray.reverse();

console.log(myArray); // [5, 4, 3, 2, 1]
console.log(result); // [5, 4, 3, 2, 1]

includes()

Метод includes() - проверяет, содержит ли массив определенное значение. Это простой и читаемый способ проверки на существование элемента.

Подробное описание: includes() возвращает булево значение (true или false). Он выполняет строгое сравнение (как ===), учитывая тип данных. Метод отлично подходит для примитивных значений (строк, чисел), но для поиска объектов или проверки по сложному условию следует использовать some(). Он является более современной и интуитивной заменой проверке indexOf(element) !== -1.

// Пример
const myArray = [1, 2, 3, 4, 5];

const result_1 = myArray.includes(3);
const result_2 = myArray.includes(7);

console.log(myArray); // [1, 2, 3, 4, 5]
console.log(result_1); // true
console.log(result_2); // false

indexOf() и lastIndexOf()

Эти методы используются для поиска индекса элемента в массиве.

Метод indexOf() - возвращает первый индекс, по которому данный элемент может быть найден в массиве.

Метод lastIndexOf() - возвращает последний индекс элемента, обходя массив с конца.

Оба метода возвращают -1, если элемент не найден. Они используют строгое сравнение (===). Вторым необязательным аргументом можно передать индекс, с которого следует начать поиск. Эти методы идеальны для поиска примитивов, когда вам нужна не просто проверка существования (includes), а именно позиция элемента.

// Пример indexOf()
const myArray = ['HTML', 'CSS', 'JS', 'PHP', 'JS'];

const result_1 = myArray.lastIndexOf('JS');
const result_2 = myArray.lastIndexOf('Python');

console.log(myArray); // ['HTML', 'CSS', 'JS', 'PHP', 'JS' ]
console.log(result_1); // 2
console.log(result_2); // -1


// Пример lastIndexOf
const myArray = ['HTML', 'CSS', 'JS', 'PHP', 'JS'];

const result_1 = myArray.lastIndexOf('JS');
const result_2 = myArray.lastIndexOf('Python');

console.log(myArray); // ['HTML', 'CSS', 'JS', 'PHP', 'JS' ]
console.log(result_1); // 2
console.log(result_2); // -1

some()

Метод some() - проверяет, удовлетворяет ли хотя бы один элемент массива заданному условию. Его можно рассматривать как оператор ИЛИ (OR), примененный ко всем элементам последовательно.

Метод some() последовательно перебирает элементы массива и для каждого вызывает предоставленную функцию-колбэк. Логика работы строится на принципе "короткого замыкания" (short-circuit): как только колбэк возвращает true для какого-либо элемента, перебор немедленно прекращается, и метод возвращает true. Если ни для одного элемента колбэк не вернул true (то есть все результаты были false), метод вернет false. Данный метод принимает колбэк-функцию с тремя аргументами:

const myArray = [5, -2, 4, 0, -4, 1];

const result = myArray.some((item, index, array) => {
    return item > 0
});

console.log(myArray); // [5, -2, 4, 0, -4, 1]
console.log(result); // true

every()

Метод every() - проверяет, удовлетворяют ли все элементы массива заданному условию. Его можно рассматривать как оператор И (AND), примененный ко всем элементам последовательно.

Метод every() работает по принципу, противоположному some(). Он перебирает элементы массива и вызывает колбэк для каждого. Если колбэк возвращает false для какого-либо элемента, перебор немедленно прекращается, и метод возвращает false. Только если колбэк вернул true для всех элементов без исключения, метод возвращает true. Данный метод принимает колбэк-функцию с тремя аргументами:

Используйте some() когда вас интересует наличие хотя бы одного подходящего элемента, а every() - когда важно гарантировать соответствие всех элементов определенному критерию. Оба метода эффективны благодаря возможности досрочного прерывания, что особенно важно при работе с большими массивами.

const myArray = [5, -2, 4, 0, -4, 1];

const result = myArray.every((item, index, array) => {
    return item > 0
});

console.log(myArray); // [5, -2, 4, 0, -4, 1]
console.log(result); // false

// Особый случай - пустой массив: для пустого массива every() всегда возвращает true
const emptyArray = [];
const result = emptyArray.every(element => element > 10);
console.log(result); // true (вакуумно-истинное утверждение)

slice()

Метод slice() - возвращает неглубокую копию части массива, выбранной от начального до конечного индексов (конечный индекс не включается). Это своего рода "ножницы" для массива.

slice() — не мутирующий метод. Исходный массив остается нетронутым. Он принимает два необязательных аргумента: start (начало) и end (конец). Если аргументы не переданы, создается полная копия массива, что часто используется для безопасного применения мутирующих методов (например, arrayCopy = originalArray.slice().reverse()). Отрицательные индексы отсчитываются с конца массива.

const myArray = ['HTML', 'CSS', 'JS', 'PHP', 'SQL'];

const result_1 = myArray.slice(2);
const result_2 = myArray.slice(0, 3);
const result_3 = myArray.slice(1, 3);
const result_4 = myArray.slice(-3);

console.log(myArray); // ['HTML', 'CSS', 'JS', 'PHP', 'SQL' ]
console.log(result_1); // [JS', 'PHP']
console.log(result_2); // ['HTML', 'CSS', 'JS']
console.log(result_3); // ['CSS', 'JS']
console.log(result_4); // ['CSS', 'JS', 'PHP']

splice()

Метод splice() - это "швейцарский нож" для модификации массива. Он может удалять, добавлять и заменять элементы в любом месте массива.

В отличие от slice(), splice() — сильно мутирующий метод, который изменяет исходный массив. Он возвращает массив, содержащий удаленные элементы. Его синтаксис: splice(start, deleteCount, item1, item2, ...).

const myArray = ['HTML', 'CSS', 'JS', 'PHP', 'SQL'];

// Пример 1
const result_1 = myArray.splice(3);

console.log(myArray); // ['HTML', 'CSS', 'JS' ]
console.log(result_1); // ['PHP', 'SQL']

// Пример 2
const result_2 = myArray.splice(0, 2, 'SCSS', 'Python');

console.log(myArray); // ['SCSS', 'Python', 'JS', 'PHP', 'SQL']
console.log(result_2); // ['HTML', 'CSS' ]

sort()

Метод sort() - упорядочивает элементы массива на месте и возвращает отсортированный массив.

По умолчанию, sort() преобразует элементы в строки и сортирует их в порядке следования символов Unicode. Это приводит к неожиданным результатам для чисел (например, [10, 2, 1] станет [1, 10, 2]). Для корректной сортировки ему передают функцию-компаратор. Эта функция принимает два элемента (a, b) и должна вернуть:

const myArray = ['B', 'F', 'E', 'D', 'A', 'C'];

// По умолчанию, сортировка от меньшего к большему
const result = myArray.sort();

// Сортировка от меньшего к большему
const result_2 = myArray.sort((a, b) => {
    return a < b
});

// Сортировка от большего к меньшему
const result_3 = myArray.sort((a, b) => {
    return a > b
});

console.log(myArray); // ['A', 'B', 'C', 'D', 'E', 'F']
console.log(result); // ['A', 'B', 'C', 'D', 'E', 'F']
console.log(result_2); // ['A', 'B', 'C', 'D', 'E', 'F']
console.log(result_3); // ['F', 'E', 'D', 'C', 'B', 'A']

forEach()

Метод forEach() - позволяет перебать массив, как это можно было бы сделать с помощью цикла for. Выполняет предоставленную функцию один раз для каждого элемента массива в порядке возрастания индекса. Это современная и элегантная замена циклу for для случаев, когда нужно просто совершить действие с каждым элементом (например, вывести в консоль, обновить DOM), не создавая новый массив. Ключевая особенность: forEach() всегда возвращает undefined. Его нельзя прервать ключевым словом break; для досрочного прерывания перебора потребуется обычный цикл for или методы some()/every().

const myArray = ['HTML', 'CSS', 'JS', 'PHP', 'SQL'];

myArray.forEach((item, index, array) => {
    console.log(item); // 'HTML', 'CSS', JS, 'PHP', 'SQL'
    console.log(index); // 0, 1, 2, 3, 4
    console.log(array); // ['HTML', 'CSS', JS, 'PHP', 'SQL'] * myArray.length
});

map()

Метод map() - создает новый массив с результатами вызова указанной функции для каждого элемента исходного массива.

Это один из краеугольных камней функционального программирования в JS. map() не изменяет исходный массив, а трансформирует его, создавая новую структуру данных. Колбэк-функция должна возвращать значение, которое попадет в новый массив. Идеально подходит для преобразования данных: рендеринга списков в React, извлечения свойств из объектов, применения математических операций.

// Пример: умножаем каждый элемент массива на 10
const myArray = [2, 4, 6, 8];

const newArray = myArray.map((item, index, array) => {
    return item * 10
});

console.log(myArray); // [2, 4, 6, 8]
console.log(newArray); // [20, 40, 60, 80]


// Пример 2: изменяем имя пользователя с id = 2
const users = [
    {id: 1, 'Петр'},
    {id: 2, 'Степан'},
    {id: 3, 'Мария'},
];

const newUsers = users.map(user => {
    if(user.id === 2) {
        user.name = 'Михаил';
    }
    return user;
});

console.log(users); // [ {id: 1, 'Петр'}, {id: 2, 'Степан'}, {id: 3, 'Мария'} ]
console.log(newUsers); // [ {id: 1, 'Петр'}, {id: 2, 'Михаил'}, {id: 3, 'Мария'} ]

filter()

Метод filter() - создает новый массив со всеми элементами, прошедшими проверку, реализованную в предоставленной функции-колбэке. Это "сито" для ваших данных.

Колбэк-функция должна возвращать булево значение. Если true — элемент проходит "фильтр" и попадает в новый массив. Если false — отсеивается. Исходный массив не меняется. Незаменим для задач фильтрации: отбор товаров по критерию, поиск пользователей по роли, удаление "пустых" значений из массива.

const myArray = ['HTML', 101, 'CSS', 54, 'JavaScript', 'PHP', 79, 'Python'];

// пример 1
const newArray = myArray.filter((item, index, array) => {
    console.log(item); // 'HTML', true, 'CSS', 54, 'JavaScript', 'PHP', 79, 'Python'
    console.log(index); // 0, 1, 2, 3, 4, 5, 6, 7
    console.log(array); //  ['HTML', true, 'CSS', 54, 'JavaScript', 'PHP', 79, 'Python'] * myArray.length

    if(!Number(item)) {
        return item; // или return true
    }

    // или return !Number(item)
});

console.log(myArray); // ['HTML', true, 'CSS', 54, 'JavaScript', 'PHP', 79, 'Python']
console.log(newArray); // ['HTML', 'CSS', 'JavaScript', 'PHP', 'Python']


// пример 2
const products = [
    {id: 1, 'Товар 1', price: 1000},
    {id: 2, 'Товар 2', price: 2000},
    {id: 3, 'Товар 3', price: 3000},
];

const newProducts = myArray_2.filter(product => product.id != 2);

console.log(products); // [ {id: 1, 'Товар 1', price: 1000}, {id: 2, 'Товар 2', price: 2000}, {id: 3, 'Товар 3', price: 3000} ]
console.log(newProducts); // [ {id: 1, 'Товар 1', price: 1000}, {id: 3, 'Товар 3', price: 3000} ]


// пример 3
const products = [
    {id: 1, 'Товар 1', price: 1000},
    {id: 2, 'Товар 2', price: 2000},
    {id: 3, 'Товар 3', price: 3000},
];

const newProducts = myArray_2.filter(product => product.id == 2);

console.log(products); // [ {id: 1, 'Товар 1', price: 1000}, {id: 2, 'Товар 2', price: 2000}, {id: 3, 'Товар 3', price: 3000} ]
console.log(newProducts); // [ {id: 2, 'Товар 2', price: 2000} ]

find()

Метод find() - возвращает значение первого элемента в массиве, который удовлетворяет предоставленной функции-предикату. Если ничего не найдено, возвращает undefined.

Главное отличие от filter() в том, что find() возвращает один элемент (или undefined), а не массив. Он останавливает перебор сразу после нахождения первого подходящего элемента, что делает его производительным для поиска уникальных объектов (пользователь по ID, заказ по номеру).

// пример 1
const products = [
    {id: 1, 'Товар 1', price: 1000},
    {id: 2, 'Товар 2', price: 2000},
    {id: 3, 'Товар 3', price: 3000},
];

const newProducts = products.find(product => product.id == 2);

console.log(products); // [ {id: 1, 'Товар 1', price: 1000}, {id: 2, 'Товар 2', price: 2000}, {id: 3, 'Товар 3', price: 3000} ]
console.log(newProducts); // {id: 2, 'Товар 2', price: 2000}


// пример 2
const languages = ['HTML', 'CSS', 'JavaScript', 'PHP', 'Python'];

const value = languages.find((item, index, array) => {
    console.log(item); // 'HTML', 'CSS', 'JavaScript', 'PHP', 'Python'
    console.log(index); // 0, 1, 2, 3, 4, 5, 6, 7
    console.log(array); //  ['HTML', 'CSS', 'JavaScript', 'PHP', 'Python'] * languages.length

    if(item == 'JavaScript') {
        return item;
    }
});

console.log(languages); // ['HTML', 'CSS', 'JavaScript', 'PHP', 'Python']
console.log(value); // JavaScript


// пример 3
const arrayNumbers = [2, 7, 9, 25, 1];

const number = arrayNumbers.find(item => item >= 20);

console.log(arrayNumbers); // [2, 7, 9, 25, 1]
console.log(number); // 25

reduce()

Метод reduce() (редуцировать, свертка) — самый универсальный метод. Он выполняет функцию-редуктор для каждого элемента массива (слева-направо), возвращая одно результирующее значение. С его помощью можно реализовать логику sum, average, groupBy, и даже другие методы вроде map или filter.

Его мощь в аккумуляции. Данный метод принимает два аргумента: Колбэк-функцию и начальное значение аккумулятора. Колбэк-функция в свою очередь принимает четыре параметра:

const myArray = [5, -2, 4, 0, -4, 1];

// Пример 1
const result_1 = myArray.reduce((previousValue , item, index, array) => {
    return previousValue + item
});

console.log(myArray); // [5, -2, 4, 0, -4, 1]
console.log(result_1); // 4

// Пример 2
const result_2 = myArray.reduce((previousValue , item, index, array) => {
    return previousValue + item
}, 5);

console.log(myArray); // [5, -2, 4, 0, -4, 1]
console.log(result_2); // 9

fill()

Метод fill() - заполняет все элементы массива от начального до конечного индекса одним статическим значением.

Это мутирующий метод. Он изменяет исходный массив. Часто используется для инициализации массивов определенной длины и с определенным значением (например, создание пустого игрового поля, обнуление данных). Можно указать диапазон заполнения: fill(value, start, end).

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

// В этом примере метод fill() заполняет элементы массива arr значением 0, начиная с индекса 2 и заканчивая индексом 4.
const result = myArray.fill(0, 2, 4);

console.log(myArray); // [1, 2, 0, 0, 5]
console.log(result); // [1, 2, 0, 0, 5]
// Как видите, метод fill() вернул измененный массив, который является тем же объектом, что и исходный массив arr
console.log(myArray === result); // true