Как использовать метод фильтра массива в JavaScript
Введение
Когда мы работаем с массивами, одна из общих задач, которые, по нашему мнению, нам необходимо решить, — отфильтровать некоторые данные из массива. Возможно, мы хотим вернуть только нечетные или четные элементы в массиве чисел. Возможно, мы хотим, чтобы массив возвращал только строки, содержащие только определенные символы. Когда у нас есть этот сценарий, метод фильтра массива может быть чрезвычайно полезным.
Как мы используем фильтр?
Чтобы использовать метод фильтра, мы передаем в метод обратный вызов. Обычно это анонимная функция, хотя мы можем передать ссылку на функцию. Функция обратного вызова, которую мы передаем, действует как тестовая функция и должна возвращать логическое значение (true или false). Если элемент проходит эту тестовую функцию и возвращается значение true, элемент будет добавлен в возвращаемый массив. Если элемент не проходит тестовую функцию, элемент не будет добавлен в возвращаемый массив. Исходный массив не изменяется при использовании метода фильтра.
Для петель
Как и в случае с другими вспомогательными методами массива, мы можем достичь желаемого результата, используя цикл for, но обычно использование вспомогательного метода массива позволяет нам писать более читаемый и расширяемый код. Начнем с примера, который возвращает четные числа из массива значений. Мы начнем с того, что сделаем это с помощью цикла for.
const values = [10, 15, 20, 25, 30];
let results = [];
for(let i = 0; i < values.length; i++) {
if(values[i] % 2 === 0) {
results.push(values[i]);
}
}
console.log(results);
//Returns ---> [10, 20, 30]
В приведенном выше примере мы начинаем с объявления переменной с помощью const, которую мы называем values. Мы инициализируем это массивом, содержащим некоторые числа. Затем мы инициализируем другую переменную, на этот раз с помощью let с именем results. Далее мы используем цикл for, который перебирает массив values. Если элемент четный, то он помещается в массив результатов. Когда мы записываем в консоль массив results вне цикла, мы видим массив, содержащий только четные элементы. Это работает, но если бы мы использовали метод фильтрации, часть работы была бы сделана за нас, и у нас был бы код, менее подверженный ошибкам. Давайте рассмотрим тот же пример, но на этот раз с использованием метода фильтра.
Использование метода фильтра
const values = [10, 15, 20, 25, 30];
const results = values.filter(function(value) {
return value % 2 === 0;
});
console.log(results);
//Returns ---> //Returns ---> [10, 20, 30]
На этот раз мы используем тот же массив, хранящийся в переменной values. Затем мы создаем другую переменную с именем results. В ней будет храниться новый массив, который будет возвращен при использовании фильтра. Мы вызываем метод фильтра для значений и проверяем, является ли значение четным. Когда мы записываем в консоль результаты, мы получаем тот же массив, что и при использовании цикла for.
Что нужно знать
Стоит помнить, что когда мы используем фильтр, исходный массив не мутируется (изменяется). Мы можем сравнить исходный и новый массивы из приведенного выше примера, и мы увидим, что они очень разные.
console.log(results); //Returns ---> [10, 20, 30] console.log(values); //Returns ---> [10, 15, 20, 25, 30]
Мы также должны убедиться, что когда мы передаем обратный вызов в метод фильтра, мы что-то возвращаем, иначе новый массив получит пустой возвращенный массив. Это показано в примере ниже, где мы не используем ключевое слово return.
const values = [10, 15, 20, 25, 30];
const results = values.filter(function(value) {
value % 2 === 0;
});
console.log(results);
//Returns ---> []
Дополнительные примеры
С таким же успехом мы могли бы использовать filter для массива строк. Давайте посмотрим на пример этого. Мы вернем массив строк, содержащих букву a.
const names = ["Sally", "Bob", "Lauren", "Ted"];
const filteredNames = names.filter(function(name) {
return name.includes("a");
});
console.log(filteredNames);
//Returns --> (2) ['Sally', 'Lauren']
В приведенном выше примере мы объявляем переменную, используя константу с именем names. Мы назначаем этому массив, содержащий строки имен. Затем мы создаем переменную с именем filteredNames. Мы присваиваем этому результат использования метода фильтра. В обратном вызове для метода фильтра мы устанавливаем параметр name для представления каждого элемента в массиве и с помощью метода include проверяем, содержит ли строковый элемент букву a. Когда мы консольно регистрируем filteredNames, мы получаем массив, содержащий только строки из массива names, которые содержат букву a.
Вложенные структуры данных
Наконец, давайте рассмотрим использование метода filtered для вложенной структуры данных. Мы возьмем массив, содержащий объекты, и вернем объекты, у которых свойство score больше 90.
const results = [
{
name: "Billy",
score: 90
},
{
name: "Ted",
score: 100
},
{
name: "Laura",
score: 9
},
{
name: "Alice",
score: 100
},
{
name: "Peter",
score: 98
}
];
const passed = results.filter(result => result.score > 90);
console.log(passed);
//Returns --->
[
{name: 'Ted', score: 100}
{name: 'Alice', score: 100}
{name: 'Peter', score: 98}
]
В приведенном выше примере мы устанавливаем вложенную структуру данных в переменную с именем results. Затем мы создаем другую переменную с именем passed. Эта переменная будет содержать новый массив, созданный методом фильтра. Мы устанавливаем параметр result и возвращаем результаты, в которых оценка превышает 90.
Надеюсь, вам понравилась эта статья. Не стесняйтесь оставлять комментарии, вопросы или отзывы и подписывайтесь на меня, чтобы получать больше контента!
