Изучение разницы между методом фильтрации и методом сращивания
За последнюю неделю я обнаружил, что совершаю одну и ту же ошибку несколько раз. Это не было большой ошибкой, и я быстро понял ее. Но, чтобы продолжить свое совершенствование как разработчик, я решил написать эту статью.
Я всегда нахожу, что если я пишу на какую-то тему, это помогает мне действительно понять, как это работает.
В этой статье мы рассмотрим, как использовать метод filter() в JavaScript для удаления элемента из массива.
Виноват
У меня был массив элементов, и я хотел удалить один элемент из массива. Затем я хотел использовать оставшиеся элементы в массиве. Но я также не хотел изменять исходный массив. Подход, который я выбрал, заключался в использовании методов indexOf() и splice().
Совместное использование этих двух методов - один из способов найти элемент и удалить его из массива.
Метод indexOf() возвращает первый индекс, по которому данный элемент может быть найден в массиве, или -1, если его нет.
Метод splice() изменяет содержимое массива, удаляя или заменяя существующие элементы и / или добавляя новые элементы на место.
Моей первой мыслью было сделать что-то вроде примера кода ниже. Здесь у меня есть массив foods. Я хотел создать новый массив japaneseFoods без «пиццы».
const foods = ["sushi", "tempura", "soba", "pizza"];
const index = foods.indexOf("pizza");
const japaneseFoods = foods.splice(index);
Проблема в том, что метод splice изменяет исходный массив. Кроме того, он возвращает удаленные элементы, а не оставшиеся.
// foods = ["sushi", "tempura", "soba"] // japaneseFoods = ["pizza"]
Вместо этого я не хотел, чтобы исходный массив изменялся. Я также хотел, чтобы новый массив был массивом оставшихся элементов. Я хотел, чтобы массивы выглядели вот так.
// foods = ["sushi", "tempura", "soba", "pizza] // japaneseFoods = ["sushi", "tempura", "soba"]
Решение
Вместо использования методов indexOf() и splice() я использовал метод filter().
Метод filter() создает новый массив со всеми элементами, которые проходят проверку, реализованную предоставленной функцией.
Используя метод filter(), массив foods не будет изменен. Кроме того, новый массив japaneseFoods будет содержать все элементы, не равные «пицца».
Как это работает
Метод filter() принимает один обязательный параметр функции обратного вызова. Он также принимает необязательный параметр для установки значения this в функции обратного вызова. Но я не нашел для этого практического варианта использования.
Аргумент функции обратного вызова запускается для каждого элемента в массиве. Если элемент проходит проверку, он сохраняется в новом массиве. В противном случае элемент не будет добавлен. Если ни один элемент не прошел проверку, будет возвращен пустой массив.
Функция обратного вызова принимает три аргумента:
- element - текущий обрабатываемый элемент в массиве.
- index (необязательно) - индекс текущего обрабатываемого элемента в массиве.
- массив (необязательно) - был вызван массив
filter.
В нашем примере мы создали функцию, которая будет проверять, не равен ли каждый элемент строке «pizza». Это вернет истинное или ложное значение, которое определит, добавлен ли элемент в новый массив или нет.
(food) => food !== "pizza"
Поскольку «суши», «темпура» и «соба» не равны «пицца», они вернет истину и будет добавлен в новый массив. Поскольку «pizza» равно «pizza», он вернет false и не будет добавлен в новый массив.
Заключение
Спасибо за прочтение! Метод filter() - один из самых удобных методов объекта массива. Как мы видели в этой статье, это очень полезно для удаления элементов из массива. Здесь я показал базовый пример, но метод filter() также может обрабатывать более сложные варианты использования. Вы можете прочитать больше об этом здесь".
Прочтите статью ниже, чтобы узнать еще один совет по JavaScript.
Ресурсы
Больше контента на plainenglish.io
