JavaScript .filter( )

Существует множество информации и видеороликов о том, как применять метод filter(), но, как мы знаем, лучшее обучение происходит при самостоятельном кодировании и экспериментировании. Так что давайте погрузимся…

const newArray = array.filter(function(element) {
    return //conditional statement
})
console.log(newArray)
//=> returns array with filtered elements

Вход в полноэкранный режим Выход из полноэкранного режима

Метод filter() принимает функцию обратного вызова, содержащую критерии поиска, используемые для фильтрации целевого массива. Каждый элемент целевого массива пропускается через функцию обратного вызова в поисках истинного значения, после чего возвращается новый массив элементов, которые оказались истинными. Если ни один элемент не соответствует истине, то filter() вернет пустой массив. Этот метод является неразрушающим, поскольку он не мутирует исходный массив.

Необязательными параметрами для этого метода являются index (если вы хотите начать итерацию с определенной точки массива) и thisArg, о которых вы можете прочитать здесь.

Используя тот же синтаксис, что и выше, давайте напишем простой условный оператор.

const myArray = [ 3, 2, 1, "go", 1]

const numArray = myArray.filter(function(element){
    return element > 1
})

console.log(numArray)
//=> [3, 2]

Войти в полноэкранный режим Выйти из полноэкранного режима

Это было просто, верно? Есть более простые/чистые способы написать этот код, но в целях обучения мне нравится видеть детали! Далее приведены некоторые данные, которые вы можете использовать, чтобы следовать за вами или создать свой собственный код filter().

Если бы вы сказали мне, что однажды я буду набирать данные персонажей The Office, чтобы попрактиковаться в кодировании, я бы рассмеялся, но вот он я!!! И да, я обнаружил, что некоторые фанаты вычислили возраст персонажей на основе случайных кусочков информации из сериала.

const officeCharacters = [
    {
        character: "Michael Scott",
        gender: "male",
        age: 40,
        job: "Branch Manager"
    },
    {
        character: "Dwight Schrute",
        gender: "male",
        age: 35,
        job: "Salesman"
    },
    {
        character: "Pam Beesly",
        gender: "female",
        age: 26,
        job: "Receptionist"
    },
    {
        character: "Jim Halpert",
        gender: "male",
        age: 26,
        job: "Salesman"
    }
]

Войти в полноэкранный режим Выйти из полноэкранного режима

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

const maleCharacters = officeCharacters.filter(function(char) {
    return char.gender === "male"
})

console.log(maleCharacters)
//=> returns new array with only the male characters

Вход в полноэкранный режим Выход из полноэкранного режима

Прости, Пэм!

Теперь давайте отфильтруем персонажей моложе 40 лет. На этот раз с помощью стрелочной функции и задав условие меньше или равно 39.

const ageBelowForty = officeCharacters.filter(char => char.age <= 39)

console.log(ageBelowForty)

Вход в полноэкранный режим Выход из полноэкранного режима

Здесь мы видим возвращаемый массив ageBelowForty в консоли браузера.

Если вы похожи на меня… вы, вероятно, думаете, что возраст и пол — не самые лучшие фильтры для сотрудников, поэтому вот еще один, та же идея, но фильтрация по должности…

const salesEmployees = officeCharacters.filter(char => char.job === "Salesman")
console.log(salesEmployees)
//=> returns array of 2 salesman

Войти в полноэкранный режим Выйти из полноэкранного режима

Как насчет нескольких условий? ДА. Давайте попробуем…

const filterCharacters = officeCharacters.filter(char => {
    return char.age >= 30 && char.gender === "male"
})
console.log(filterCharacters)
//=> returns an array of 2 characters (Michael and Dwight)

Войти в полноэкранный режим Выход из полноэкранного режима

Допустим, мы не уверены, что ищем, но знаем, чего не хотим. Попробуйте использовать оператор !==.

Это лишь упрощенный вариант начала фильтрации. Представляете, как это удобно для больших массивов объектов? Существует множество различных способов написания условий, что делает .filter() хорошим помощником в JavaScript.

Если вам нужно отфильтровать массив для одного конкретного элемента, попробуйте метод .find(). Этот метод возвращает первый элемент, который принимает значение true.
Не уверены, что работаете с массивом? Ознакомьтесь с методом .isArray() на MDN. Метод .filter() работает только с массивами (включая массивы объектов, как описано выше) и при неправильном применении выдаст сообщение об ошибке.