Метод filter
Метод filter позволяется отфильтровать элементы массива, оставив только подходящие под определенное условие элементы. Метод в параметре получает функцию, которая выполнится для каждого элемента массива. Своим результатом метод возвращает новый массив, в который войдут только те элементы, для которых переданная функции вернет true .
В функцию можно передавать три параметра. Если эти параметры есть (они не обязательны), то в первый автоматически попадет элемент массива, во второй попадет его номер в массиве (индекс), а в третий — сам массив.
Синтаксис
let новый массив = массив.filter(function(элемент, индекс, массив) < код return true или false >);
Пример
Давайте отфильтруем массив, оставив в нем только положительные числа:
let arr = [-2, 5, 1, -5, -1, 1, 3, 4, -1]; let res = arr.filter(function(elem) < if (elem >= 0) < return true; >else < return false; >>); console.log(res);
Результат выполнения кода:
Пример
Сократим код, воспользовавшись стрелочной функцией:
let arr = [-2, 5, 1, -5, -1, 1, 3, 4, -1]; let res = arr.filter(elem => < if (elem >= 0) < return true; >else < return false; >>); console.log(res);
Результат выполнения кода:
Пример
let arr = [-2, 5, 1, -5, -1, 1, 3, 4, -1]; let res = arr.filter(elem => < return elem >= 0; >); console.log(res);
Результат выполнения кода:
Пример
Сократим код, воспользовавшись особенностями стрелочных функций:
let arr = [-2, 5, 1, -5, -1, 1, 3, 4, -1]; let res = arr.filter(elem => elem > 0); console.log(res);
Результат выполнения кода:
Пример
При необходимости в третий параметр можно передать сам массив:
let res = arr.filter(function(elem, index, arr) < тут будет доступен массив arr >);
Смотрите также
- методы map и forEach ,
которые позволяют применить функцию к каждому элементу массива - методы some и every ,
выполняющие проверку массива - методы reduce и reduceRight ,
сворачивающие массив к одному значению
Отфильтровать массив объектов
Сначала строки вида 003 , 001 приводим в нормальный вид. Потом фильтруем массив arrayobj и проверяем есть ли id текущего элемента в arrayCheckIds . Потом проходимся мапом, чтобы получить только свойство name .
const arrayObj = [ < "object": < id: "1", name: 'obj1', checkId: '001', >>, < "object": < id: "2", name: 'obj2', checkId: '002', >>, < "object": < id: '3', name: 'obj3', checkId: '003', >>, < "object": < id: "4", name: 'obj4', checkId: '004', >> ]; const arrayCheckIds = ['003', '001'].map(e=>''+Number(e)); console.log(arrayObj.filter(e => arrayCheckIds.includes(e.object.id)).map(e => e.object.name));Отслеживать
ответ дан 22 авг 2021 в 8:32
13.1k 2 2 золотых знака 21 21 серебряный знак 37 37 бронзовых знаков
Спасибо огромное!
22 авг 2021 в 9:05
- javascript
- фильтрация
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
.filter ( )
Фильтры для воды удерживают вредные частицы, а фильтр JS — плохие значения.
Время чтения: 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
- Николай Лопин ,
- Светлана Коробцева
Обновлено 7 июня 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Метод массива .filter ( ) позволяет получить новый массив, отфильтровав элементы с помощью переданной колбэк-функции. Колбэк-функция будет вызвана для каждого элемента массива и по результату функции примет решение включать этот элемент в новый массив или нет.
Пример
Скопировать ссылку «Пример» Скопировано
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] const evenOnly = nums.filter(function (n) const remainder = n % 2 return remainder === 0>)const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] const evenOnly = nums.filter(function (n) const remainder = n % 2 return remainder === 0 >)
Результат будет [2 , 4 , 6 , 8 , 10 ] .
const languages = ["Java", "TypeScript", "C#", "JavaScript", "Julia"] const jLanguages = languages.filter(function (language) return language.startsWith("J")>)const languages = ["Java", "TypeScript", "C#", "JavaScript", "Julia"] const jLanguages = languages.filter(function (language) return language.startsWith("J") >)
Результат будет [‘ Java’ , ‘ Java Script’ , ‘ Julia’ ] .
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Аналогично методу .for Each ( ) , методу .filter ( ) необходимо передать аргументом функцию. Главное отличие — функция должна возвращать boolean, т. е. результатом должен быть true или false . Такие функции называют предикатами.
Это предикат, так как функция возвращает boolean-результат сравнения:
function isPositive(num) return num > 0>function isPositive(num) return num > 0 >
Это предикат, так как метод .includes ( ) у строки возвращает boolean:
function hasChar(str, char) return str.includes(char)>function hasChar(str, char) return str.includes(char) >
А вот это не предикат, ведь функция возвращает число, даже несмотря на то, что любое число в JavaScript (кроме 0) может быть приведено к true :
function sum(a, b) return a + b>function sum(a, b) return a + b >
От результата выполнения функции зависит, попадёт ли элемент в итоговый массив:
- true — элемент попадёт в итоговый массив.
- false — не попадёт в итоговый массив.
function predicate(num) if (num >= 5) return true > return false> const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] // передаём предикатnums.filter(predicate) // [5, 6, 7, 8, 9, 10] // Либо делаем короче и просто возвращаем результат сравненияnums.filter((num) => num >= 5) // [5, 6, 7, 8, 9, 10]function predicate(num) if (num >= 5) return true > return false > const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] // передаём предикат nums.filter(predicate) // [5, 6, 7, 8, 9, 10] // Либо делаем короче и просто возвращаем результат сравнения nums.filter((num) => num >= 5) // [5, 6, 7, 8, 9, 10]
Функция, которую мы передаём в метод .filter ( ) , принимает три параметра:
- item — элемент массива в текущей итерации;
- index — индекс текущего элемента;
- arr — сам массив, который мы перебираем.
const languages = ["Java", "TypeScript", "C#", "JavaScript", "Julia"] languages.filter(function (item, index, arr) console.log("Текущий элемент " + item) console.log("Индекс " + index) console.log("Массив " + arr) return index >= 3>)const languages = ["Java", "TypeScript", "C#", "JavaScript", "Julia"] languages.filter(function (item, index, arr) console.log("Текущий элемент " + item) console.log("Индекс " + index) console.log("Массив " + arr) return index >= 3 >)
�� В новом массиве отфильтрованные элементы будут находиться в том же порядке, в котором они были в исходном массиве.
�� .filter ( ) возвращает новый массив, при этом исходный массив никак не изменится.
�� Из-за того, что JavaScript имеет динамическую типизацию, то нам ничего не мешает возвращать какое угодно значение из функции. В этом случае JavaScript сам определит его истинность. Стоит помнить, что значения 0 , undefined , null и пустая строка » считаются ложными и равны false .
const goods = [ name: "AirPods", description: "Классные беспроводные наушники", >, name: "MacBook Pro", description: "Ноутбук на все случаи жизни", >, name: "iPhone", description: "", >, name: "Дошик", >,] // Просто возвращаем значения описанияconst withDescription = goods.filter(function (item) return item.description>)const goods = [ name: "AirPods", description: "Классные беспроводные наушники", >, name: "MacBook Pro", description: "Ноутбук на все случаи жизни", >, name: "iPhone", description: "", >, name: "Дошик", >, ] // Просто возвращаем значения описания const withDescription = goods.filter(function (item) return item.description >)
В результате получим массив с AirPods и MacBook Pro.
Для хорошей читаемости и понимания кода лучше всегда явно возвращать boolean-значение из функции-предиката.
�� В JavaScript функция, в которой нет явного возвращаемого значения (т. е. нет return ) все равно возвращает undefined . Потому, если забыть вернуть результат в функции в методе .filter ( ) , то в результате получим пустой массив, так как отфильтруются все элементы.
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] const filtered = nums.filter(function (num) // Забыли вернуть результат num >= 5>)const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] const filtered = nums.filter(function (num) // Забыли вернуть результат num >= 5 >)
Получим [ ] , потому что undefined считается как false .
Как понять
Скопировать ссылку «Как понять» Скопировано
Метод .filter ( ) позволяет получить новый массив с отфильтрованными значениями на основании данных исходного. Несмотря на то, что то же самое можно сделать, используя обычный цикл for или while , метод .filter ( ) позволяет сделать это проще.
Если решать такую задачу без .filter ( ) , то выйдет так:
const nums = [1, 2, 3, 4, 5, 6]const odds = [] for (let i = 0; i < nums.length; i++) if (nums[i] % 2 !== 0) odds.push(nums[i]) >> console.log(odds)const nums = [1, 2, 3, 4, 5, 6] const odds = [] for (let i = 0; i nums.length; i++) if (nums[i] % 2 !== 0) odds.push(nums[i]) > > console.log(odds)
Результат будет [1 , 3 , 5 ] .
.filter ( ) позволит сильно сократить код и сделать его понятнее:
const nums = [1, 2, 3, 4, 5, 6] const odds = nums.filter(function (num) return num % 2 !== 0>)console.log(odds)const nums = [1, 2, 3, 4, 5, 6] const odds = nums.filter(function (num) return num % 2 !== 0 >) console.log(odds)
Результат — [1 , 3 , 5 ] .
На практике
Скопировать ссылку «На практике» Скопировано
Егор Огарков советует
Скопировать ссылку «Егор Огарков советует» Скопировано
�� Так как filter возвращает массив, то у полученного массива мы можем продолжать по цепочке вызывать другие методы массива.
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] const result = nums.filter(num => num >= 5).map(. ).reduce(. )const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] const result = nums.filter(num => num >= 5).map(. ).reduce(. )
�� В filter в качестве функции можно передать конструктор Boolean . Таким образом можно легко и быстро отфильтровать все элементы, которые при приведении к boolean будут равны false .
const num = 3 const elements = [0, "", "one", "two", num === 3 && "three", null].filter( Boolean)const num = 3 const elements = [0, "", "one", "two", num === 3 && "three", null].filter( Boolean )
Результат — [‘one’ , ‘two’ , ‘three’ ] .
Array.prototype.filter()
Метод filter() создаёт новый массив со всеми элементами, прошедшими проверку, задаваемую в передаваемой функции.
Интерактивный пример
Синтаксис
// Стрелочная функция filter((element) => . > ) filter((element, index) => . > ) filter((element, index, array) => . > ) // Колбэк-функция filter(callbackFn) filter(callbackFn, thisArg) // Встроенная колбэк-функция filter(function callbackFn(element) . >) filter(function callbackFn(element, index) . >) filter(function callbackFn(element, index, array) . >) filter(function callbackFn(element, index, array) . >, thisArg)
Параметры
Функция-предикат, которая будет вызвана для проверки каждого элемента массива. Если функция возвращает true , то элемент остаётся в массиве, если false , то удаляется.
Принимает три аргумента
Текущий обрабатываемый элемент в массиве.
Индекс текущего обрабатываемого элемента в массиве.
Обрабатываемый массив, на котором был вызван метод filter() .
Значение, используемое в качестве this при вызове колбэк-функции callbackFn .
Возвращаемое значение
Вернётся новый массив с элементами, которые прошли проверку. Если ни один элемент не прошёл проверку, то будет возвращён пустой массив.
Описание
Метод filter() вызывает переданную функцию callback один раз для каждого элемента, присутствующего в массиве, и создаёт новый массив со всеми значениями, для которых функция callback вернула значение, которое может быть приведено к true . Функция callback вызывается только для индексов массива с уже определёнными значениями; она не вызывается для индексов, которые были удалены или которым значения никогда не присваивались. Элементы массива, не прошедшие проверку функцией callback , просто пропускаются и не включаются в новый массив.
Функция callback вызывается с тремя аргументами:
- значение элемента;
- индекс элемента;
- массив, по которому осуществляется проход.
Если в метод filter() был передан параметр thisArg , при вызове callback он будет использоваться в качестве значения this . В противном случае в качестве значения this будет использоваться значение undefined . В конечном итоге, значение this , наблюдаемое из функции callback , определяется согласно обычным правилам определения this .
Метод filter() не изменяет массив, для которого он был вызван.
Элементы массива, обрабатываемые методом filter() , устанавливается до первого вызова функции callback . Элементы, добавленные в массив после начала выполнения метода filter() , либо изменённые в процессе выполнения, не будут обработаны функцией callback . Соответствующим образом, если существующие элементы удаляются из массива, они также не будут обработаны
Предупреждение: одновременное изменение элементов, описанное в предыдущем параграфе, часто приводит к труднопонимаемому коду, поэтому не рекомендуется делать это (за исключением особых случаев).
Примеры
Фильтрация всех маленьких значений
Следующий пример использует filter() для создания отфильтрованного массива, все элементы которого больше или равны 10, а все меньшие 10 удалены.
function isBigEnough(value) return value >= 10; > let filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // массив filtered теперь содержит [12, 130, 44]
Найти все простые числа в массиве
Следующий пример возвращает все простые числа в массиве:
const array = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]; function isPrime(num) for (let i = 2; num > i; i++) if (num % i == 0) return false; > > return num > 1; > console.log(array.filter(isPrime)); // [2, 3, 5, 7, 11, 13]
Фильтрация неверных записей в JSON
В следующем примере метод filter() используется для создания отфильтрованного JSON-объекта, все элементы которого содержат ненулевое числовое поле id .
let arr = [ id: 15 >, id: -1 >, id: 0 >, id: 3 >, id: 12.2 >, >, id: null >, id: NaN >, id: "undefined" >, ]; let invalidEntries = 0; function filterByID(item) if (Number.isFinite(item.id) && item.id !== 0) return true; > invalidEntries++; return false; > let arrByID = arr.filter(filterByID); console.log("Отфильтрованный массив\n", arrByID); // Отфильтрованный массив // [< id: 15 >, < id: -1 >, < id: 3 >, < id: 12.2 >] console.log("Количество некорректных элементов token punctuation">, invalidEntries); // Количество некорректных элементов = 5
Поиск в массиве
В следующем примере filter() используется для фильтрации содержимого массива на основе входных данных.
var fruits = ["apple", "banana", "grapes", "mango", "orange"]; /** * Элементы массива фильтруется на основе критериев поиска (query) */ function filterItems(query) return fruits.filter(function (el) return el.toLowerCase().indexOf(query.toLowerCase()) > -1; >); > console.log(filterItems("ap")); // ['apple', 'grapes'] console.log(filterItems("an")); // ['banana', 'mango', 'orange']
Реализация с использованием ES2015
const fruits = ["apple", "banana", "grapes", "mango", "orange"]; /** * Элементы массива фильтруется на основе критериев поиска (query) */ const filterItems = (arr, query) => return arr.filter( (el) => el.toLowerCase().indexOf(query.toLowerCase()) !== -1, ); >; console.log(filterItems(fruits, "ap")); // ['apple', 'grapes'] console.log(filterItems(fruits, "an")); // ['banana', 'mango', 'orange']
Модификация изначального массива (изменение, добавление и удаление)
В следующих примерах проверяется поведение метода filter при изменении массива.
// Изменение всех элементов let words = ["spray", "limit", "exuberant", "destruction", "elite", "present"]; const modifiedWords = words.filter((word, index, arr) => arr[index + 1] += " extra"; return word.length 6; >); console.log(modifiedWords); // Обратите внимание, что есть три слова длиной менее 6, но так как они были изменены, // возвращается одно слово ['spray'] // Добавление новых элементов words = ["spray", "limit", "exuberant", "destruction", "elite", "present"]; const appendedWords = words.filter((word, index, arr) => arr.push("new"); return word.length 6; >); console.log(appendedWords); // Только три слова удовлетворяют условию, хотя `words` теперь имеет куда больше слов, // длинной меньше 6 символов: ['spray', 'limit', 'elite'] // Удаление элементов words = ["spray", "limit", "exuberant", "destruction", "elite", "present"]; const deleteWords = words.filter((word, index, arr) => arr.pop(); return word.length 6; >); console.log(deleteWords); // Заметьте, что 'elite' не получено, так как удалено из `words` до того, // как filter смог получить его: ['spray', 'limit']
Спецификации
| Specification |
|---|
| ECMAScript Language Specification # sec-array.prototype.filter |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Полифил Array.prototype.filter в библиотеке core-js
- Array.prototype.forEach()
- Array.prototype.every()
- Array.prototype.some()
- Array.prototype.reduce()
- Array.prototype.find()
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 6 янв. 2024 г. by MDN contributors.
Your blueprint for a better internet.