필터가 있는 자바스크립트 맵

안녕하세요 여러분 오늘은 자바스크립트에서 필터와 함께 맵 메소드를 사용하는 방법을 보여드리고자 합니다.
시작하자...

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

보시다시피 "Frontend"범주가 있는 항목만 인쇄됩니다

.

*필터 조건을 "백엔드"로 변경하면 출력은

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

이제 볼 수 있듯이 "백엔드"범주가 있는 항목만 인쇄됩니다

.

*필터 조건을 "Fullstack"으로 변경하면 출력은

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

이제 볼 수 있듯이 "FullStack"범주가 있는 항목만 인쇄됩니다

.

이것이 javascript.it에서 map()과 함께 filter() 메소드를 사용하는 방법입니다. 정말 멋지고 유용하지 않나요?

이것이 이번 포스트의 전부입니다.
이 게시물을 읽어 주셔서 감사합니다. 실수를 발견하거나 제안하고 싶은 경우 댓글 섹션에 언급하십시오.
^^ 아래 링크에서 기부로 저를 도울 수 있습니다 감사합니다👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

이 게시물도 확인하십시오.