Карта Javascript с фильтром

Привет, ребята, сегодня я хочу показать вам, как использовать метод карты с фильтром в javascript.
Давайте начнем…

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

Как использовать map() и filter() вместе?

Код -

const webDev = [
  {
    name:"HTML",
    category:"Frontend"
  },
  {
    name:"CSS",
    category:"Frontend"
  },
  {
    name:"JAVASCRIPT",
    category:"Frontend"
  },
  {
    name:"REACT JS",
    category:"Frontend"
  },
  {
    name:"NODE JS",
    category:"Backend"
  },
  {
    name:"MONGO DB",
    category:"Backend"
  },
  {
    name:"EXPRESS JS",
    category:"Backend"
  },
  {
    name:"MERN",
    category:"FullStack"
  },
  {
    name:"MEVN",
    category:"FullStack"
  },
  {
    name:"MEAN",
    category:"FullStack"
  },
]
const filteredMap = (arr) => { 
  arr.filter(
  item => item.category === "Frontend"
  ).map(item => {
    console.log(`Name: ${item.name}, Category: ${item.category}`)
  })
}
filteredMap(webDev)

• Сначала мы создали массив объектов с именем «webDev». Этот массив содержит объекты, каждый из которых имеет два поля «имя» и «категория».
• После этого мы создали стрелочную функцию с именем «filteredMap», и у нее есть один параметр «arr», который представляет собой массив, в котором мы будем выполнять наш метод фильтрации и сопоставления вместе.
• Внутри функции мы использовали arr.filter() и отфильтровали массив на основе категории, а затем присоединили к нему метод map(), как цепочку. Метод map() будет отображать только отфильтрованные элементы.

Выход

Name: HTML, Category: Frontend
Name: CSS, Category: Frontend
Name: JAVASCRIPT, Category: Frontend
Name: REACT JS, Category: Frontend

• Как видите, печатаются только те элементы, которые имеют категорию «Внешний вид».

*Если мы изменим условие фильтра на «Бэкэнд», то вывод будет

Name: NODE JS, Category: Backend
Name: MONGO DB, Category: Backend
Name: EXPRESS JS, Category: Backend

• Как видите, теперь печатаются только те элементы, которые имеют категорию «Бэкенд».

*Если мы изменим условие фильтра на «Полный стек», то на выходе будет

Name: MERN, Category: FullStack
Name: MEVN, Category: FullStack
Name: MEAN, Category: FullStack

• Как видите, теперь печатаются только те элементы, которые имеют категорию «Полный стек».
• Итак, вот как вы можете использовать метод filter() с map() в javascript. Довольно круто и полезно, не так ли?

Вот и все для этого поста.
СПАСИБО, ЧТО ПРОЧИТАЛИ ЭТО ПОСТ, И ЕСЛИ ВЫ ОБНАРУЖИТЕ ЛЮБУЮ ОШИБКУ ИЛИ ХОТИТЕ СДЕЛАТЬ ЛЮБОЕ ПРЕДЛОЖЕНИЕ, ПОЖАЛУЙСТА, ОТМЕТЬТЕ ОБ ЭТОМ В РАЗДЕЛЕ КОММЕНТАРИЙ.
^^Вы можете помочь мне некоторым пожертвованием по ссылке ниже Спасибо👇👇 ^^
☕ → https://www.buymeacoffee.com/waaduheck ←

Также проверьте эти сообщения
https://dev.to/shubhamtiwari909/higher-order-function-in-javascript-1i5h

https://dev.to/shubhamtiwari909/styled-componenets-react-js-15kk

Если этот пост был полезен, пожалуйста, несколько раз нажмите кнопку аплодисментов 👏, чтобы выразить свою поддержку автору 👇

🚀Разработчики: учитесь и развивайтесь, не отставая от того, что важно, ПРИСОЕДИНЯЙТЕСЬ К FAUN.