Удалить элемент из массива в JavaScript: 3 способа

Рассмотрим три способа удаления конкретного элемента из массива в JavaScript без изменения исходного массива. Это важно для соблюдения принципов неизменяемости данных, особенно при работе с функциями и передаче массивов в качестве аргументов.

Метод filter()

Первый подход использует метод filter(). Этот метод создаёт новый массив, содержащий только элементы, удовлетворяющие условию, заданному в callback-функции. Таким образом, удаляются все вхождения элемента.

const inputArray = [6, -3, 5, 2, 2, 1];
const elementToRemove = 2;

const resultArray = inputArray.filter(element => element !== elementToRemove);

console.log("Исходный массив:", inputArray);
console.log("Результат:", resultArray);

Этот код создаёт resultArray, не содержащий элементы, равные elementToRemove. Исходный inputArray остаётся неизменным.

> Замечание: Метод filter() удаляет все вхождения заданного элемента.

Методы findIndex() и slice()

Второй подход использует методы findIndex() и slice(). findIndex() находит индекс первого вхождения элемента, а slice() создаёт новый массив, исключая элемент по найденному индексу.

const inputArray = [6, -3, 5, 2, 2, 1];
const elementToRemove = 2;

const index = inputArray.findIndex(element => element === elementToRemove);

const resultArray = index > -1 ? [
  ...inputArray.slice(0, index),
  ...inputArray.slice(index + 1)
] : inputArray;

console.log("Исходный массив:", inputArray);
console.log("Результат:", resultArray);

Здесь используется тернарный оператор для обработки случая, когда elementToRemove отсутствует в массиве (index === -1). В этом случае resultArray будет равен inputArray.

> Замечание: Метод slice() в этом решении удаляет только первое вхождение элемента.

Библиотека Lodash

Третий способ демонстрирует использование библиотеки Lodash. Функция _.remove() позволяет удалять элементы, удовлетворяющие условию. Однако важно помнить, что _.remove() изменяет исходный массив. Для обеспечения неизменяемости, необходимо клонировать исходный массив с помощью _.clone().

const _ = require('lodash');

const inputArray = [6, -3, 5, 2, 2, 1];
const elementToRemove = 2;

const clonedArray = _.clone(inputArray);
_.remove(clonedArray, element => element === elementToRemove);

console.log("Исходный массив:", inputArray);
console.log("Результат:", clonedArray);

В этом примере _.clone() создаёт копию inputArray, над которой и работает _.remove(). Оригинальный inputArray остаётся неизменным.

> Замечание: Без клонирования с помощью _.clone(), метод _.remove() изменит исходный массив.

Все три метода позволяют удалить конкретный элемент из массива в JavaScript без мутации исходного массива, обеспечивая чистоту кода и предотвращая непредвиденные побочные эффекты. Выбор метода зависит от конкретной задачи: filter() для удаления всех вхождений, findIndex() и slice() для удаления первого вхождения, и Lodash для более лаконичного решения (с обязательным клонированием для неизменяемости).

Что будем искать? Например,программа