javascript, jquery 배열(Array) 중복제거 !

( ※ 답만 필요하신분은 아래에서 빨간 박스를 참조하시기 바랍니다. )

 

javascript, jquery를 이용한 배열 중복제거를 알아보자!

 

중복제거에 대한 로직이 필요해서 처음엔 찾아보지 않고 혼자 생각을 해서 해보았다.

 

그리 어려운 로직은 아니였으나, 여러번 수정을 하긴했다...

 

우선 생각한 로직은, A라는 배열에 있는 값들을 B라는 빈 배열로 하나씩 옮길때마다 B 배열을 탐색해 그 값이 있는지 없는지 검사를 하고 있으면 넣지 않고, 없으면 넣는 간단한 로직이다.

 

화면으로 테스트를 보여주기 위해 간단하게 다음과 같이 만들어보았다.

 

 

왼쪽 맨 윗칸에 아무거나 입력을 하고 ▽ 버튼을 누르면 아래 멀티 셀렉트 박스로 들어가도록 했고, 중복제거 버튼을 누르면 중복을 제거하고 결과를 보여주도록 만들었다.

 

간단하게 다음과 같이 테스트를 해보자.

(※ 중복제거1은 검색전 내가 짠 로직이고, 중복제거2는 검색 한 로직이다..)

 

중복제거1 버튼을 누르면 다음과 같은 결과가 나타난다.

1과 2와 33이 2개씩 있었는데, 제거가 되고 하나씩들만 남아 중복 값들이 제거되는 것을 확인할 수 있다! 이제 어떻게 구현했는지 한번 봐보자!

 

 

머 우선 위에는 select 박스 사이즈 구해서 for문을 돌려 jquery로 select 박스 값을 인덱스로 찾아 preArray에 배열로 넣었다.

그 다음이 박스친 중복제거 로직이다.

afterArray는 처음에 빈 배열이기 때문에 처음에는 무엇이든 들어가도 중복이 되지 않는다, 그렇기 때문에 처음으로 afterArray에 들어가는 놈은 중복체크 없이 바로 넣고 continue 된다. 그 뒤론, preArray 값을 차례대로 옮길때마다 afterArray를 탐색해 똑같은 같이 있으면 chkDupl 이라는 변수를 true로 주고 탐색이 끝난후 chkDupl의 변수값이 true로 변하지 않고 false로 남아 있는다면 중복값이 없는것이기 때문에 그때 preArray의 값을 afterArray로 옮겨준다.

 처음에는 고민을 좀 했었는데, 하고 나니 생각보다 간단한 로직이었다.

(참고로 위 소스는 조금의 필터를 거친것이다... 처음에는 더 지저분했는데.. 보다보다 보니 조금은 깔끔해졌다.. 역시.. 머든.. 계속 보다보면 좋아지는것 같다..)

 

그 다음에 검색을 해봤는데, jquery의 each라는 놈을 써서 엄청 간략하게 하는 것을 찾았다.. 신기했다.. 역시 많이 알수록 좋은것 같다..

(jquery each함수는 for문과 마찬가지로 반복문의 일종이다.)

 

중복제거2 함수에 그걸 구현해봤다, 테스트 해보면 다음과 같은 결과를 볼수 있다!

 

 중복제거1을 사용한 것과 같은 결과를 나타내주며, each를 사용한 로직은 다음과 같다.

 

 

 중복제거 로직 위아래는 위에 소스와 똑같고, each함수를 살펴보자.

보면 preArray배열를 기준으로 반복문이 돈다. function 파라미터의 index는 preArray의 index가 되고 element는 preArray index의 value가 된다.

그 안에 inArray라는 함수가 있다, 이 녀석은 해당 배열에 내가 찾는 value가 있냐 없냐를 체크해주는 함수이다. 있을경우에는 index 값을 리턴해주고 없을경우에는 -1을 리턴해준다. 그걸 이용하면 위에 로직과 마찬가지로 preArray에서 afterArray로 옮길때마다 중복을 검사해 없을 경우에만 넣는 로직이다. 첫번째 로직과 똑같은 로직임에도 불구하고 좀 더 신기술로 간단하게 구현이 되는 것을 알 수 있다.

 저는 보자마자 신기했습니다.. 이제 하나하나 배우고 있는 입장에서..ㅋ,ㅋ

 그나저나 저는 오늘도 이렇게 또 하나를 배웠습니다..ㅎ,ㅎ

 

아! 그리고 debugger라는 녀석이 있습니다!!

제가 의도치 않게 의도적으로(?) 빨간줄 쳐놨는데, 이놈에 대해서도 조만간 알아봅시다, 제 생각엔 웹 개발하는 사람에겐 참 유용한 놈입니다!!ㅎ

 

https://0taeng.tistory.com/21