-
배열의 중복 다루기Web/자바스크립트 2020. 10. 30. 20:41반응형
1. 배열의 중복 검사
[1, 2, 3].every((el, idx, arr) => arr.indexOf(el) === idx); // true [1, 2, 1].every((el, idx, arr) => arr.indexOf(el) === idx); // false
indexOf는 인자로 들어가는 값과 동일한 첫 번째 원소의 index를 찾아준다.
그래서, 첫 번째 원소와 중복되는 이후 원소들의 idx는 indexOf(el)과 다르게 된다.
(el은 같아서 indexOf(el)이 계속 동일하게 나오는데, idx는 달라지기 때문)
그래서 두, 세번째로 나오는 중복 원소들은 false를 return하게 된다.
2. 배열의 중복 제거
[1, 2, 2, 4, 3, 4].filter((e, i, a) => a.indexOf(e) === i) // [1, 2, 3, 4]
유사한 원리이다.
indexOf(e)로 찾아낸, 첫 번째 중복 원소를 제외한 나머지 중복 원소들을 전부 걸러내는 방식.
indexOf(e)는 계속 동일하게 첫 번째 원소의 index를 찾아주는데, i는 계속 변하기 때문에
조건식에 의해 중복 원소들이 걸러지게 되는 것.
3. 중복 원소 추출
[1, 2, 2, 4, 3, 4].filter((e, i, a) => a.indexOf(e) !== i) // [2, 4]
하나 이상의 중복 원소들이 등장하면, 걔네들을 걸러주는 코드.
물론 이 코드들이 filter나 indexOf같은 메소드들로 이루어져있기 때문에,
반복문이 여러 번 돌아가게 되어 그렇게 효율적인 코드는 아닐 수 있다.
하지만 코드량이 매우 짧아서 참고해볼 만 한 듯.
4. 배열 내 중복 값의 개수
reduce() 메서드와 객체를 이용하여, 배열 내 중복 원소들의 갯수를 구해낼 수 있다.
const names = ['kim', 'han', 'kim', 'kim', 'han', 'park']; const result = names.reduce((acc, cur) => { if(acc[cur]) { acc[cur]++; } else { acc[cur] = 1; } return acc; }, {}); console.log(result); // { kim : 3, han : 2, park : 1 }
객체를 이용한 reduce이다. reduce 연산의 누적값을 객체에다가 저장해주는 것.
만약 배열의 특정 원소가 객체에 존재하지 않는다면 값을 1로 세팅하고 객체에 넣어주고,
만약 객체에 이미 존재하는 값이라면 해당 값을 1만큼 증가시켜주면 된다.
return acc로, 매 번 객체를 return해줘야 하는 것을 잊지 말 것.
생각보다 간단한 원리.
좀 더 간단한 버젼은 다음과 같다.
const names = ['kim', 'han', 'kim', 'kim', 'han', 'park']; const result = names.reduce((acc, cur) => { acc[cur] = (acc[cur] || 0) + 1; return acc; }, {}); console.log(result);
만약 객체에 이미 해당 원소의 값이 존재한다면, (acc[cur] || 0)의 결과로 acc[cur]의 값이 나온다.
만약 해당 원소 값이 객체에 존재하지 않는다면 (acc[cur] || 0)의 결과는 0일 것.
어느 쪽이 됐건, 연산 결과에 1을 더해주면 된다.
그러면 값이 존재하지 않을 때는 0 + 1을 해서 1개로 값이 세팅되는거고
만약 값이 존재하면 그 값에 1을 더한 값으로 갱신이 되는 것.
참고
반응형'Web > 자바스크립트' 카테고리의 다른 글
From jQuery to VanillaJS (0) 2020.12.28 ES Lint + Prettier 도입하기 🔥🔥🔥 (0) 2020.12.04 JS로 CSS 스타일 값 다루기 (0) 2020.10.30 실전적인 AJAX (0) 2020.10.30 Pure Javascript의 AJAX (0) 2020.10.30