Javascript - Map vs filter
10803 ワード
すべてのコードに意味があります.
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文を用いるタイミングを把握したほうがよい.Reference
この問題について(Javascript - Map vs filter), 我々は、より多くの情報をここで見つけました https://velog.io/@moony_moon/Javascript-Map-vs-filterテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol