Фильтрация массива — это распространенная операция в JavaScript, которая позволяет извлекать определенные элементы из массива на основе определенных условий. В этой статье блога мы рассмотрим различные методы фильтрации массивов, приведя примеры кода для каждого метода. Независимо от того, являетесь ли вы новичком или опытным разработчиком JavaScript, это подробное руководство поможет вам понять и реализовать эффективные методы фильтрации массивов в ваших проектах.

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

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

Метод 2: совместное использование методов map() и filter()
Объединив методы map() и filter(), вы можете реализовать более сложные сценарии фильтрации. Метод map() преобразует каждый элемент массива, а затем метод filter() удаляет нежелательные элементы на основе определенных условий.

const products = [
  { name: 'iPhone', price: 999 },
  { name: 'MacBook', price: 1999 },
  { name: 'iPad', price: 799 },
];
const affordableProducts = products
  .map((product) => ({ ...product, discounted: product.price < 1000 }))
  .filter((product) => product.discounted);
console.log(affordableProducts);
/* Output:
[
  { name: 'iPhone', price: 999, discounted: true },
  { name: 'iPad', price: 799, discounted: true }
]
*/

Метод 3. Использование метода уменьшения() для расширенной фильтрации.
Метод уменьшения() позволяет выполнять операции расширенной фильтрации путем накопления результатов процесса фильтрации. Вы можете определить собственную логику в функции редуктора, чтобы определить условия фильтрации.

const numbers = [1, 2, 3, 4, 5, 6];
const evenSum = numbers.reduce((acc, num) => {
  if (num % 2 === 0) {
    return acc + num;
  }
  return acc;
}, 0);
console.log(evenSum); // Output: 12

Метод 4. Использование метода find() для поиска одного элемента
Метод find() ищет элемент в массиве на основе определенного условия и возвращает первый соответствующий элемент. Это полезно, когда вы хотите найти один элемент, удовлетворяющий заданному критерию.

const users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Alice' },
];
const user = users.find((user) => user.id === 2);
console.log(user); // Output: { id: 2, name: 'Jane' }

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