В данном туториале рассмотрим способы удаления элемента из массива по значению, используя методы splice() и filter() на JavaScript.
Удаление элемента из массива по значению используя метод splice() на JavaScript
Метод splice() позволяет добавлять, заменять или удалять элементы в массивах используя индекс. Поэтому, для начала нужно получить индекс элемента с помощью метода indexOf(), а затем, используя полученный индекс, удалить элемент из массива применив к нему метод splice().
Например, создадим массив с тремя строковыми элементами, а затем удалим один из них используя вышеупомянутые функции.
let myArray = ['one', 'two', 'three'];
let myIndex = myArray.indexOf('two');
if (myIndex !== -1) {
myArray.splice(myIndex, 1);
}
console.log(myArray) // ["one", "three"]Давайте разберемся. Метод indexOf() поочереди проверяет каждый элемент в массиве и возвращает индекс первого элемента, который равен искомому значению, если соответствие не найдено возвращает -1. Далее мы использовали инструкцию if, блок кода которой будет выполняться только при наличии искомого значения в массиве, то есть его индекс не будет равен -1. Если значение присутствует в массиве, к нему применяется метод splice(), который удалит 1 элемент начиная с индекса сохраненного в myIndex. После удаления элемента из массива, функция console.log() выведет в консоли измененный массив.
Мы так же можем удалить из массива больше одного элемента, смотрите спецификацию метода splice().
Удаление элемента из массива по значению используя метод filter() на JavaScript
Метод filter() создает новый массив, со всеми элементами, которые прошли проверку согласно заданной функции внутри filter(). В нашем случае мы создадим функцию, которая будет возвращать все элементы массива, за исключением того, которое мы хотим удалить, а результат будет сохранен в новом массиве.
Например, создадим такой же массив как в предыдущем примере и применим к нему метод filter():
let myArray = ['one', 'two', 'three'];
let newArray = myArray.filter(function(f) { return f !== 'two' });
console.log(newArray) // ["one", "three"]В коде выше, мы удалили значение two из массива, а результат сохранили в переменную newArray, содержимое которой было выведено в консоли. При таком подходе исходный массив не изменился.
Отличие двух подходов
Используя методы indexOf() и splice(), из массива будет удален только первый найденный элемент, даже если в нем присутствует несколько элементов с одинаковым значением.
Использую метод filter(), будут отфильтрованы все элементы исходного массива и в новый массив сохранятся только те элементы, которые не равны значению заданному в функции.