정보실

웹학교

정보실

javascript Map, Filter 및 Reduce – 애니메이션

본문

Map, filter 및 reduce는 오랫동안 사용되어 왔습니다. 그것들은 종종 함수형 프로그래밍 스타일의 일부로 간주됩니다.


애니메이션이 약간 이상하게 보일 수 있습니다. 그러나 나는 내가 만든 Tetris 그리드로 제한되었습니다 (이전의 Tetris 튜토리얼을 만드는 방법에서).


우리는 종종 복잡한 아이디어를 시각화하여 메모리에 투입합니다. 영상을 학습의 출발점으로 사용하는 코딩 기사는 많지 않습니다. 

그러나 시각화는 교육에서 중요한 역할을 합니다. 이것은 코딩에도 적용됩니다.


https://medium.com/@js_tut/map-filter-and-reduce-animated-7fe391a35a47 


몇 년 동안 map, filter 및 reduce 작업을 한 후에도 여전히 스스로 묻습니다. 원래 배열의 사본이 만들어 졌습니까? 원래 배열에 대한 참조가 수정 되었습니까? 이 질문들을 끝내기 위해 이 튜토리얼을 만들었습니다.


일단 시각적으로 보이면 기억하기 쉬울 것입니다.


Array.map – 모든 값을 식에 매핑 합니다. 


1*4EGwsCicbWJeml2aAm714A.gif 


Array.map(): apply “value + 1” to a set of 7 numbers [1, 2, 3, 4, 5, 6, 7]


1] 표현식 값 + 1은 원래 배열의 모든 항목에 적용됩니다.

2] .map()은 원본을 그대로 두고 배열의 수정 된 사본을 반환합니다.

3] 결과 : [2,3,4,5,6,7,8] (원래 배열의 사본이 생성됩니다.)


Array.filter – 조건과 일치하는 모든 것을 유지하십시오. 

1*TOPYVvfMBmjajPh-fqZ9GQ.gif 


참고 : 애니메이션에는 약간의 실수가 있습니다. [6,7,8]이 아닌 [6,7]을 반환해야 합니다. 곧 수정하겠습니다. . .


1] 함수 값> 5가 원래 배열의 모든 항목에 적용됩니다.

2] .filter ()는 배열의 수정 된 복사본을 반환합니다 – 원본은 여전히 ​​사용 가능합니다!

3] 결과 : [6,7] (조건을 통과 한 값만 해당)


Array.reduce – 모든 항목을 단일 값으로 줄입니다. 


감속기의 일반적인 용도는 장바구니에 있는 모든 품목의 가격을 결합하는 것입니다.

감소를 독특하게 만드는 것은 누산기를 사용한다는 것입니다.

어큐뮬레이터는 시작 값으로 설정해야 합니다. 여기 0입니다.


1*dhTC_FFgiH3mKROrnDj12w.gif 


1] Reducer 함수 F는 값과 누산기를 가져옵니다.

2]이 예에서 .reduce (v, a)는 모든 값의 합을 반환합니다.

3] 결과 : 28 (원래 배열의 모든 숫자의 합)


결론 


물론, 이러한 고차 함수는 다양한 문제를 해결하는 데 사용될 수 있습니다.


물론, 이러한 고차 함수는 다양한 문제를 해결하는 데 사용될 수 있습니다.










  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 34회 ]  작성일19-08-25 15:24

웹학교