Array.prototype.filter()

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

Попробуйте

const words = ["spray", "elite", "exuberant", "destruction", "present"];

const result = words.filter((word) => word.length > 6);

console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"]

Синтаксис

filter(callbackFn)
filter(callbackFn, thisArg)

Параметры

callbackFn

Функция, которая будет выполняться для каждого элемента в массиве. Она должна возвращать истинное (truthy) значение, чтобы сохранить элемент в результирующем массиве, и ложное (falsy) значение в противном случае. Функция вызывается со следующими аргументами:

element

Текущий обрабатываемый элемент в массиве.

index

Индекс текущего обрабатываемого элемента в массиве.

array

Массив, для которого был вызван filter().

thisArg Необязательный

Значение, которое будет использоваться как this при выполнении callbackFn. См. итеративные методы.

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

Поверхностная копия заданного массива, содержащая только элементы, прошедшие проверку. Если ни один элемент не прошел проверку, возвращается пустой массив.

Описание

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

callbackFn вызывается только для тех индексов массива, которые имеют присвоенные значения. Он не вызывается для пустых слотов в разреженных массивах.

Метод filter() является обобщенным. Он ожидает, что значение this будет иметь свойство length и свойства с целочисленными ключами.

Примеры

Отфильтровывание всех малых значений

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

function isBigEnough(value) {
  return value >= 10;
}

const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

Нахождение всех простых чисел в массиве

Следующий пример возвращает все простые числа в массиве:

const array = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];

function isPrime(n) {
  if (n < 2) {
    return false;
  }
  if (n % 2 === 0) {
    return n === 2;
  }
  for (let factor = 3; factor * factor <= n; factor += 2) {
    if (n % factor === 0) {
      return false;
    }
  }
  return true;
}

console.log(array.filter(isPrime)); // [2, 3, 5, 7, 11, 13]

Фильтрация недействительных объектов из массива объектов

Следующий пример использует filter() для создания отфильтрованного массива, содержащего все объекты с ненулевым, числовым id.

const 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;
}

const arrByID = arr.filter(filterByID);

console.log("Filtered Array\n", arrByID);
// Filtered Array
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

console.log("Number of Invalid Entries =", invalidEntries);
// Number of Invalid Entries = 5

Поиск в массиве

Следующий пример использует filter() для фильтрации содержимого массива на основе критериев поиска.

const fruits = ["apple", "banana", "grapes", "mango", "orange"];

/**
 * Filter array items based on search criteria (query)
 */
function filterItems(arr, query) {
  return arr.filter((el) => el.toLowerCase().includes(query.toLowerCase()));
}

console.log(filterItems(fruits, "ap")); // ['apple', 'grapes']
console.log(filterItems(fruits, "an")); // ['banana', 'mango', 'orange']

Использование третьего аргумента callbackFn

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

const names = ["JC63", "Bob132", "Ursula89", "Ben96"];
const greatIDs = names
  .map((name) => parseInt(name.match(/\d+/)[0], 10))
  .filter((id, idx, arr) => {
    // Without the arr argument, there's no way to easily access the
    // intermediate array without saving it to a variable.
    if (idx > 0 && id <= arr[idx - 1]) return false;
    if (idx < arr.length - 1 && id <= arr[idx + 1]) return false;
    return true;
  });
console.log(greatIDs); // [132, 96]

Аргумент array не является массивом, который строится, — нет способа получить доступ к строящемуся массиву из функции обратного вызова.

Использование filter() с разреженными массивами

filter() пропустит пустые слоты.

console.log([1, , undefined].filter((x) => x === undefined)); // [undefined]
console.log([1, , undefined].filter((x) => x !== 2)); // [1, undefined]

Вызов filter() на объектах, не являющихся массивами

Метод filter() считывает свойство length объекта this, а затем обращается к каждому свойству, ключ которого является неотрицательным целым числом, меньшим, чем length.

const arrayLike = {
  length: 3,
  0: "a",
  1: "b",
  2: "c",
  3: "a", // ignored by filter() since length is 3
};
console.log(Array.prototype.filter.call(arrayLike, (x) => x <= "b"));
// [ 'a', 'b' ]

Спецификации

Совместимость с браузерами

Смотрите также

• Полифилл Array.prototype.filter в core-js
• Полифилл es-shims для Array.prototype.filter
• Руководство по Индексированным коллекциям
• Array
• Array.prototype.forEach()
• Array.prototype.every()
• Array.prototype.map()
• Array.prototype.some()
• Array.prototype.reduce()
• TypedArray.prototype.filter()