Javascript - Map vs filter



すべてのコードに意味があります.

MAP VS FILTER機能


mapはjavascriptでfor文に取って代わり、実際の仕事でよく使われる機能です.
配列が受信されると、配列内の各要素が検索され、必要なreturn値が返されます.
例を挙げる.
const classmates = [
  {name: "철수", age:13},
  {name: "영희", age:10},
  {name: "맹구", age:14}
  ]

classmates.map((data) => ({name : data.name, age: data.age, school: "맹구초등학교"})  //배열안에있는 객체를 한번씩 돌면서 school이라는 key값과 맹구초등학교라는 value를 저장하였다.
ここで見るポイント!
mapには()=>{return}関数が含まれています.戻り文にJavaScript構文がない場合は

classmates.map((データ)=>()もこのように使用できます。


また、return値を1行だけ書くと、

classmates.map((データ)=>)はカッコなしで使用できます。


ビジネスの例)
 const fruits = [
        {number: 1, title: "레드향"},
        {number: 2, title: "샤인머스켓"},
        {number: 3, title: "산청딸기"},
        {number: 4, title: "한라봉"},
        {number: 5, title: "사과"},
        {number: 6, title: "애플망고"},
        {number: 7, title: "딸기"},
        {number: 8, title: "천혜향"},
        {number: 9, title: "과일선물세트"},
        {number: 10, title: "귤"},
    ]
 
 
 fruits.map((data) => (
            <Wrapper>
                <RankingBold>{data.number}</RankingBold>
                <Title>{data.title}</Title>
            </Wrapper>
        ))
では、Filterの機能は何でしょうか.
その名の通りフィルタリングの機能です.
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6); //word의 길이가 6이상인 값만 다 반환
だからmapとfilterをよく使います.受信したデータを一度フィルタリングし、フィルタリングしたデータをmapに戻し、必要なhtmlを送信する形で処理すると仮定する.
Map vs foreach
両方の機能が悪くない!配列内の要素を巡回し、必要な値を実行します...
2つの違いは、mapが配列であり、戻り値が与えられ、foreach文は関数のみを実行することです.
classmates = ["철수","영희", "맹구"]

classmates.map((el) => el + "어린이") // ["철수어린이", "영희어린이", "맹구어린이"]

classmates.forEach((el) => {
  	el + "어린이"
}) //undefined가 나온다. 만약에 함수가 실행된 결과값을 보고싶다면 console.log(el + "어린이")를 선언문안에 적어주면된다.
foreach文は,結果値を実行する必要がない場合に,実務でよく用いられる.したがって,mapとforeach文を用いるタイミングを把握したほうがよい.