JavaScript. Как удалить элемент массива

developer

2 года назад

Содержание

1 Удаление элемента с помощью метода splice()
2 Удаление первого и последнего элемента в массиве
3 Удаление элемента по условию
4 Функция для удаления элементов из массива
5 Как удалить дубли в массиве?
6 Как удалить элемент из массива объектов?

Как и всё остальное в JavaScript, удаление элемента из массива можно произвести несколькими способами. Для начала рассмотрим базовые возможности, а затем более сложные варианты.

Перед началом этого поста рекомендую вам ознакомиться с методами поиска по массиву, т.к. они будут использоваться в этом посте.

Удаление элемента с помощью метода `splice()`

Первый вариант, который мы рассмотрим будет с использованием метода splice(). Он принимает три параметра и изменяет исходный массив.

Первым параметром мы указываем индекс элемента в массиве, который мы хотим удалить. Вторым параметром мы указываем сколько элементов начиная с этого индекса мы удаляем. Третий параметр нам не нужен, т.к. он указывается для добавления элементов к массиву.

Если вы не знаете индекс элемента в массиве, мы можем его определить с помощью метода indexOf()

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

const index = arr.indexOf(2);

if (index !== -1) {
    arr.splice(index, 1);
}

console.log(arr); // [0, 1, 3, 4, 5];

Метод indexOf — возвращает нам индекс искомого элемента в массиве, или -1, если такой элемент не найден. Для этого мы делаем проверку index !== -1.

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

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

Для удаления последнего элемента из массива мы можем использовать метод pop(), который затем вернет нам удаляемый элемент. Для пустого массива данный метод вернет undefined

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

const removedEl = arr.pop();

console.log(arr); // [0, 1, 2, 3, 4]
console.log(removedEl); // 5

Тут как мне кажется всё просто. Также мы можем использовать метод splice для удаления последнего элемента:

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

// Индекс последнего элемента вычисляем через его длину
// Т.к. порядок элементов начинается с 0, 
// нам нужно от длинны отнять единицу для получения индекса последнего элемента.
const lastEl = arr.length - 1;

arr.splice(lastEl);

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

Удалить первый элемент массива еще более просто. Для этого мы также можем использовать метод splice()

const arr = [0, 1, 2, 3, 4, 5];
arr.splice(0, 1); // где 0 - это индекс первого элемента в массиве

Но также мы можем использовать метод shift() — он извлечет первый элемент в массиве и вернет его в нашу переменную, т.е. это аналог метода pop() для последнего элемента массива.

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

const removedEl = arr.shift();

console.log(arr); // [1, 2, 3, 4, 5]
console.log(removedEl); // 0

Удаление элемента по условию

Другой вариант это использование метода filter(), он является более сложным, но и дает возможность применять условия для фильтрации — какие элементы попадут в новый массив, а какие нет.

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

// В новый массив не будет возвращен элемент, который равен 2
const newArr = arr.filter(el => el !== 2);
console.log(newArr); // [0, 1, 3, 4, 5]

// В новый массив будут возвращены числа кратные 2
const multipleOfTwo = arr.filter(el => (el % 2) === 0);
console.log(multipleOfTwo); // [0, 2, 4]

// Получим элементы, которые больше или равны 2 и меньше или равны 4
const newArr2 = arr.filter(el => el >= 2 && el <= 4);
console.log(newArr2); // [2, 3, 4]

Подробнее про метод JS filter() можете прочитать в этом посте.

Функция для удаления элементов из массива

Если в вашем приложении вам часто требуется удалять элемент из массива, вы можете написать функцию и расширить ее при необходимости с заданием каких-либо дополнительных условий.

const removeArrEl = (arr, value) => {
  return arr.filter(el => el !== value);
}

// Передадим массив чисел и удалим оттуда 2
console.log(removeArrEl([1,2,3,4], 2)); // [1, 3, 4]

Как удалить дубли в массиве?

Первый способ. Для того, чтобы удалить повторяющиеся элементы массива можно воспользоваться следующим способом:

const arr = [2, 'John', 57, -1, 2, 'Smith', 'John'];

const uniqArr = [...new Set(arr)];

console.log(uniqArr); // [2, 'John', 57, -1, 'Smith']

Второй способ. При помощи метода filter() мы проходимся по нашему массиву и смотрим если ли в данном массиве этот элемент:

const uniqArray = arr.filter((item, index) => {
  return index === arr.indexOf(item);
});

console.log(uniqArray); // [2, 'John', 57, -1, 'Smith']

Третий способ. При помощи метода reduce():

const uniqArray = arr.reduce((uniq, item, index) => {
  return uniq.includes(item) ? uniq : [...uniq, item];
}, []);

console.log(uniqArray); // [2, 'John', 57, -1, 'Smith']

Как удалить элемент из массива объектов?

С обычными массивами мы разобрались, теперь давайте рассмотрим как удалить элемент массива, если это массив объектов. В посте, который я упоминал выше, есть раздел как выполнить поиск по массиву с объектами:

const arr = [
    { name: 'Ben', age: 21 },
    { name: 'Clif', age: 22 },
    { name: 'Eric', age: 18 },
    { name: 'Anna', age: 27 },
];

const index = arr.findIndex(item => item.name === 'Anna');
arr.splice(index, 1);

console.log(arr); // остается три элемента

Также мы можем использовать метод filter() и получить новый массив с уже удаленным объектом

const newArr = arr.filter(item => item.name !== 'Anna');

console.log(newArr);

Разница в том, что мы получаем новый массив и при этом будут удалены все объекты с name === 'Anna'

Удаление элемента с помощью метода splice()