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

Ниже представлены несколько методов, с помощью которых можно удалять элементы из массива, используя JavaScript.

Все описанные ниже методы не изменяют исходный массив, а вместо этого создают новый.

Если вам известен индекс элемента

Предположим, у вас есть массив, и вы хотите удалить элемент, находящийся на позиции i.

Один из способов – это использовать оператор slice():

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const i = 3
const filteredItems = items.slice(0, i-1).concat(items.slice(i, items.length))
// ["a", "b", "d", "e", "f"]

slice() создаёт новый массив с индексами, которые он получает. Мы просто создаём новый массив – от начала до индекса, который хотим удалить. Далее, с помощью concat(), мы объединяем его с другим массивом, который начинается с позиции, следующей за той, которую мы удалили, и заканчивается последним элементом.

Если вы знаете значение

В этом случае хорошим вариантом будет использование метода filter(), который предлагает более декларативный подход:

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valueToRemove = 'c'
const filteredItems = items.filter(item => item !== valueToRemove)
// ["a", "b", "d", "e", "f"]

В примере выше, мы используем стрелочные функции ES6. Но вы можете использовать традиционные функции для поддержки старых браузеров:

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valueToRemove = 'c'
const filteredItems = items.filter(function(item) {
 return item !== valueToRemove
})
// ["a", "b", "d", "e", "f"]

Или же вы можете использовать Babel и преобразовать код ES6 обратно в ES5, чтобы сделать его более усваиваемым старыми браузерами, и тогда ваш JavaScript код останется современным.

Удаление нескольких элементов

Что делать, если вместо одного элемента вы хотите удалить несколько?

Давайте найдем простейшее решение.

По индексу

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

const items = ['a', 'b', 'c', 'd', 'e', 'f']
 
const removeItem = (items, i) =>
 items.slice(0, i-1).concat(items.slice(i, items.length))
 
let filteredItems = removeItem(items, 3)
filteredItems = removeItem(filteredItems, 5)
//["a", "b", "c", "d"]

По значению

Вы можете искать включения внутри callback функции:

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valuesToRemove = ['c', 'd']
const filteredItems = items.filter(item => !valuesToRemove.includes(item))
// ["a", "b", "e", "f"]

Избегайте изменения исходного массива

splice() (не путать с slice()) изменяет исходный массив и следует избегать его использования.

Больше статей можно найти на сайте codenative.ru