Виталий Котов
Как работает метод filter() - JavaScript
Автор
Метод filter()
возвращает новый массив со всеми элементами, которые прошли проверку, определенную заданной функцией.
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// функция проверки чётных чисел
function checkEven(number) {
if (number % 2 == 0) return true;
else return false;
}
// создание нового массива с элементами, прошедшими проверку на чётность
let evenNumbers = numbers.filter(checkEven);
console.log(evenNumbers);
// Output: [ 2, 4, 6, 8, 10 ]
Синтаксис filter()
Синтаксис метода filter()
следующий:
arr.filter(callback(element), thisArg);
Где arr
- это массив.
Параметры filter()
Метод filter()
принимает:
callback
- функцию с проверкой, для вызова на каждом элементе массива; возвращает
true
, если элемент прошёл проверку, иначе возвращаетfalse
. Принимает:element
- текущий обрабатываемый элемент в массиве.
- функцию с проверкой, для вызова на каждом элементе массива; возвращает
thisArg
(необязательно) - значение, используемое в качествеthis
, при вызове функцииcallback
. По умолчанию определен какundefined
.
Возвращаемое значение filter()
Возвращает новый массив, содержащий только те элементы, которые прошли проверку.
Примечания:
filter()
не изменяет исходный массив.filter()
не вызывает функциюcallback
для элементов массива без значений.
Примеры
Пример 1: Фильтрация элементов массива
const prices = [1800, 2000, null, 3000, 5000, "Thousand", 500, 8000];
function checkPrice(element) {
return element > 2000 && !Number.isNaN(element);
}
let filteredPrices = prices.filter(checkPrice);
console.log(filteredPrices); // [ 3000, 5000, 8000 ]
// используем стрелочную функцию
let newPrices = prices.filter((price) => price > 2000 && !Number.isNaN(price));
console.log(newPrices); // [ 3000, 5000, 8000 ]
Вывод в консоль:
[ 3000, 5000, 8000 ]
[ 3000, 5000, 8000 ]
Здесь отфильтровываются все числа, меньшие или равные 2000, а также все нечисловые значения.
Пример 2: Поиск в массиве
const languages = [
"JavaScript",
"Python",
"Ruby",
"C",
"C++",
"Swift",
"PHP",
"Java",
];
function searchFor(arr, query) {
function condition(element) {
return element.toLowerCase().indexOf(query.toLowerCase()) !== -1;
}
return arr.filter(condition);
}
let newArr = searchFor(languages, "ja");
console.log(newArr); // [ 'JavaScript', 'Java' ]
// используем стрелочную функцию
const searchArr = (arr, query) =>
arr.filter(
(element) => element.toLowerCase().indexOf(query.toLowerCase()) !== -1
);
let newLanguages = searchArr(languages, "p");
console.log(newLanguages); // [ 'JavaScript', 'Python', 'PHP' ]
Вывод в консоль:
[ 'JavaScript', 'Java' ]
[ 'JavaScript', 'Python', 'PHP' ]
Здесь element
и query
преобразуются в нижний регистр, а метод indexOf()
используется для проверки наличия query
внутри element
.
Те элементы, которые не проходят эту проверку, отфильтровываются.
Все гайды по Javascript
Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
.textContent в JavaScript.style в JavaScript.setProperty() в JavaScript.scrollTo() в JavaScript.scrollIntoView() в JavaScript.scrollBy() в JavaScript.removeProperty() в JavaScript.removeEventListener() в JavaScript.querySelectorAll() в JavaScript.querySelector() в JavaScript.outerHTML в JavaScript.innerText в JavaScriptв JavaScript.hidden в JavaScript.getPropertyValue() в JavaScript.getElementsByTagName() в JavaScript.getElementsByClassName() в JavaScript.getAttribute() в JavaScript.focus() в JavaScriptЭлемент в JavaScript.dataset в JavaScript.closest() в JavaScript.classList в JavaScript.blur() в JavaScript.addEventListener() в JavaScript
Объект WeakSet в JavaScriptОбъект TypedArray в JavaScriptОбъект Set в JavaScriptОбъект SharedArrayBuffer в JavaScriptОбъект в JavaScriptОбъект Map в JavaScriptfunction в JavaScriptОбъект DataView в JavaScriptОбъект WeakMap в JavaScriptОбъект Atomics в JavaScriptМассивы в JavaScriptОбъект ArrayBuffer в JavaScript
window.print() в JavaScriptwindow.open() в JavaScriptwindow.navigator в JavaScriptwindow.location в JavaScriptwindow.history в JavaScriptURLSearchParams в JavaScriptsetTimeout() в JavaScriptsetInterval() в JavaScriptsessionStorage в JavaScriptqueueMicrotask() в JavaScriptprompt() в JavaScriptPerformance в JavaScriptwindow.matchMedia в JavaScriptlocalStorage в JavaScriptGeolocation API в JavaScriptFormData в JavaScriptfetch() в JavaScriptDOM в JavaScriptconsole.log() в JavaScriptconfirm() в JavaScriptclearTimeout() в JavaScriptclearInterval() в JavaScriptalert() в JavaScriptBOM в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript