Filter: примеры (JAVASCRIPT)

JavaScript метод filter: применение и примеры
Раздел: Массивы, Итерация
filter(callback: function, thisArg?: any): Array
типовые примерыfilter на php, python, mysqlfilter изменения javascriptпримеры расширенные

Основы функции filter

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

Аргументы:

  • callbackFn - Функция-предикат, которая вызывается для каждого элемента массива. Принимает три аргумента:
    1. element - текущий обрабатываемый элемент массива.
    2. index (необязательный) - индекс текущего элемента.
    3. array (необязательный) - массив, по которому осуществляется проход.
    Функция должна возвращать true, чтобы элемент остался в новом массиве, или false, чтобы отбросить.
  • thisArg (необязательный) - Значение, используемое в качестве this при выполнении callbackFn.

Возвращаемое значение:

Новый массив, содержащий все элементы, для которых функция callbackFn вернула истинное значение (true). Если ни один элемент не удовлетворяет условию, возвращается пустой массив.

Простые примеры использования

Отбор четных чисел из массива.

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers);
[2, 4, 6]

Использование второго аргумента (индекса) для выборки элементов на четных позициях.

const fruits = ['apple', 'banana', 'orange', 'kiwi', 'mango'];
const result = fruits.filter((fruit, index) => index % 2 === 0);
console.log(result);
['apple', 'orange', 'mango']

Использование контекста (параметр thisArg).

function isGreaterThanThreshold(element) {
  return element > this.threshold;
}
const data = [5, 12, 3, 18, 7];
const context = { threshold: 10 };
const filtered = data.filter(isGreaterThanThreshold, context);
console.log(filtered);
[12, 18]

Похожие функции в JavaScript

Array.prototype.map() - Создает новый массив с результатами вызова функции для каждого элемента. Используется для трансформации данных, а не для фильтрации.

Array.prototype.reduce() - Выполняет функцию-редуктор для каждого элемента, возвращая одно конечное значение. Может применяться для фильтрации, но менее интуитивен для этой задачи.

Цикл for или for...of - Классические итеративные подходы. Предпочтительны, когда логика фильтрации сложна и требует прерывания или когда важна максимальная производительность на очень больших данных. filter() предлагает более декларативный и читаемый синтаксис для типичных сценариев.

Типичные ошибки

1. Ожидание модификации исходного массива. Метод filter() возвращает новый массив.

const arr = [1, 2, 3];
arr.filter(x => x > 1);
console.log(arr); // Оригинальный массив не изменился
[1, 2, 3]

2. Неявное приведение возвращаемого значения к boolean. Если функция обратного вызова возвращает не boolean, значение будет неявно преобразовано. Это может привести к неожиданным результатам.

const arr = [0, 1, 2, 'hello', '', null];
const filtered = arr.filter(element => element);
console.log(filtered); // Ложные значения отфильтрованы
[1, 2, 'hello']

3. Пропуск несуществующих или удаленных элементов в разреженных массивах.

const sparse = [1, , 3, , 5];
const dense = sparse.filter(() => true);
console.log(dense); // Отсутствующие элементы удалены
[1, 3, 5]

Изменения в последних версиях

Метод filter() был стандартизирован в ECMAScript 5.1 (ES5). В ECMAScript 2015 (ES6) изменился только общий контекст языка (появление стрелочных функций, упрощающих написание колбэков). Сам алгоритм метода остается стабильным. Важным уточнением является гарантированный порядок обхода элементов и то, что метод пропускает пустые слоты в разреженных массивах, что было частью первоначальной спецификации.

Расширенные примеры

Фильтрация объектов по значению свойства.

Пример javascript
const users = [
  { name: 'Alice', age: 25, active: true },
  { name: 'Bob', age: 17, active: true },
  { name: 'Charlie', age: 30, active: false }
];
const activeAdults = users.filter(user => user.age >= 18 && user.active);
console.log(activeAdults);
[ { name: 'Alice', age: 25, active: true } ]

Удаление дубликатов с использованием индекса.

Пример javascript
const duplicates = ['a', 'b', 'a', 'c', 'b', 'a'];
const unique = duplicates.filter((item, index, arr) => arr.indexOf(item) === index);
console.log(unique);
['a', 'b', 'c']

Фильтрация с использованием внешнего предиката.

Пример javascript
function isPrime(num) {
  if (num <= 1) return false;
  for (let i = 2; i <= Math.sqrt(num); i++) {
    if (num % i === 0) return false;
  }
  return true;
}
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const primes = nums.filter(isPrime);
console.log(primes);
[2, 3, 5, 7]

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

Пример javascript
const mixed = [0, false, 'text', null, 42, '', undefined, NaN, 'end'];
const truthyValues = mixed.filter(Boolean);
console.log(truthyValues);
['text', 42, 'end']

Аналоги в других языках программирования

PHP: array_filter - Работает схожим образом, но функция обратного вызова получает только значение (по умолчанию) или значение и ключ. Возвращает отфильтрованный массив, сохраняя ключи.

$numbers = [1, 2, 3, 4];
$even = array_filter($numbers, function($value) {
    return $value % 2 === 0;
});
print_r($even);
Array ( [1] => 2 [3] => 4 )

Python: filter() - Принимает функцию и итерируемый объект, возвращает итератор. Для получения списка результат нужно обернуть в list().

numbers = [1, 2, 3, 4]
even = list(filter(lambda x: x % 2 == 0, numbers))
print(even)
[2, 4]

C# (LINQ): Where - Используется в LINQ запросах для фильтрации коллекций. Работает отложенно.

int[] numbers = { 1, 2, 3, 4 };
var even = numbers.Where(n => n % 2 == 0);
// even будет IEnumerable содержащий [2, 4]

JS filter function comments

En
Filter Creates a new array with all elements that pass the test implemented by the provided function.