Эта статья демонстрирует, как эффективно использовать методы JavaScript map() и filter(), по отдельности и в комбинации, для эффективной обработки массивов. Мы рассмотрим практические примеры, чтобы проиллюстрировать их мощь и универсальность в манипулировании данными.
Оглавление
- JavaScript Map
- JavaScript Filter
- Цепочки Map и Filter
- Пример из реального мира: Фильтрация товаров в электронной коммерции
- Заключение
JavaScript Map
Метод map() — это функция высшего порядка, которая итерирует каждый элемент массива и применяет предоставленную функцию обратного вызова. Эта функция преобразует каждый элемент, и map() возвращает новый массив, содержащий преобразованные значения. Исходный массив остаётся неизменным.
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2); // [2, 4, 6, 8, 10]
console.log(doubledNumbers);
console.log(numbers); // Исходный массив не изменился
JavaScript Filter
Метод filter() также итерирует массив. Однако вместо преобразования элементов он выборочно включает элементы на основе условия, определённого функцией обратного вызова. Функция обратного вызова должна возвращать true, чтобы включить элемент, и false, чтобы исключить его. filter() возвращает новый массив, содержащий только элементы, удовлетворяющие условию.
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(number => number % 2 === 0); // [2, 4, 6]
console.log(evenNumbers);
Цепочки Map и Filter
Истинная мощь map() и filter() раскрывается, когда они используются в цепочке. Это позволяет компактно и эффективно выполнять сложные манипуляции с данными. filter() обычно применяется первым, чтобы сузить массив, а затем map() для преобразования оставшихся элементов.
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenSquared = numbers
.filter(number => number % 2 === 0)
.map(number => number * number); // [4, 16, 36, 64, 100]
console.log(evenSquared);
Пример из реального мира: Фильтрация товаров в электронной коммерции
Представим приложение электронной коммерции. У нас есть массив объектов товаров:
const products = [
{ name: "Shirt", price: 25, inStock: true, category: "clothing" },
{ name: "Pants", price: 40, inStock: false, category: "clothing" },
{ name: "Shoes", price: 75, inStock: true, category: "shoes" },
{ name: "Hat", price: 15, inStock: true, category: "accessories" },
{ name: "Jacket", price: 60, inStock: true, category: "clothing" }
];
Нам нужно отобразить только названия товаров категории «одежда», которые есть в наличии. Мы можем элегантно достичь этого, используя filter() и map():
const inStockClothingNames = products
.filter(product => product.inStock && product.category === "clothing")
.map(product => product.name);
console.log(inStockClothingNames); // ['Shirt', 'Jacket']
Заключение
Комбинация map() и filter() предлагает мощный и читаемый подход к манипулированию массивами в JavaScript. Этот функциональный стиль способствует более чистому коду, уменьшает потребность в многословных циклах и улучшает сопровождаемость. Помните, что оба метода возвращают новые массивы, сохраняя неизменность исходных данных.