정보실

웹학교

정보실

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

본문

Map, Filter, Reduction은 오랫동안 사용되어 왔습니다. 이들은 종종 Functional Programming 스타일의 일부로 간주됩니다.


애니메이션이 조금 이상해 보일 수도 있습니다. 그러나 나는 내가 만든 테트리스 그리드로 제한되었습니다. (테트리스 튜토리얼을 만드는 나의 이전의 방법으로).


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


우리는 종종 복잡한 아이디어를 시각화하여 메모리에 적용합니다. 시각 자료를 학습을 위한 출발점으로 사용하는 코딩 기사는 많지 않습니다. 그러나 시각화는 교육에서 중요한 역할을 합니다. 이는 코딩에도 적용됩니다.


지난 수년간의 map, filter 및 reduce에도 불구하고 나는 종종 자신에게 묻습니다. 

원래 배열의 복사본이 만들어 졌습니까? 

원래 배열에 대한 참조가 수정 되었습니까? 

나는 이 질문을 끝내기 위해 이 튜토리얼을 만들었습니다.


내 희망은 일단 시각적으로 보게 되면 암기하기가 더 쉬워진다는 것입니다.


Array.map - 모든 값을 표현식에 매핑합니다. 


1*4EGwsCicbWJeml2aAm714A.gif 

 Array.map() : 7 개의 숫자 세트 [1, 2, 3, 4, 5, 6, 7]에 "value + 1"


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

2] .map()은 배열의 수정 된 사본을 원래의 변경되지 않은 상태로 반환합니다.

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


Array.filter - 조건과 일치하는 모든 것을 유지합니다. 


1*TOPYVvfMBmjajPh-fqZ9GQ.gif 


참고 : 애니메이션에는 약간의 실수가 있습니다. [5,6,7]이 아니라 [6,7]을 반환해야 합니다. 나는 그것을 곧 고칠 것이다. . .


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

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

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


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


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


고유하게 감소시키는 것은 누적기(accumulator)를 사용한다는 것입니다.


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


1*dhTC_FFgiH3mKROrnDj12w.gif 


1] 감속기(Reducer) 함수 F는 값과 누적기(accumulator)를 가져옵니다.

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

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


결론 


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


Map, Filter 및 Reduce는 객체 배열에서도 사용할 수 있습니다. 숫자 값에 대한 작업에만 국한되지 않습니다.




페이지 정보

조회 53회 ]  작성일19-07-28 22:31

웹학교