[Javascript] Array 중복 값 제거(Remove Array Duplicates)

Set 사용

 

ES6에 도입 된 새로운 데이터 개체이다.

 

고유 한 값만 저장하고 배열을 전달하면 중복 값이 ​​제거된다.

 

let array = [1, 1, 1, 2, 2, 2, 3, 3];

const set = new Set(array); // Set {1,2,3}


// 다시 배열로 변환하는 두 가지 방법


array = [...set]; // [1,2,3]

Array.from(new Set(array)); // [1,2,3]

 

 

---

 

filter 사용

 

제공하는 조건을 통과하는 요소들로 새로운 배열을 만드는 함수. 

 

요소가 통과하면서 true를 반환하면 필터링 된 배열에 포함된다. 

 

indexOf

배열에서 제공된 요소에서 찾은 첫 번째 인덱스를 반환.

 

let array = [1, 1, 1, 2, 2, 2, 3, 3];

let newArray = array.filter((item, index) => array.indexOf(item) === index);

console.log(newArray); // [ 1, 2, 3 ]

 

설명

let array = [1, 1, 1, 2, 2, 2, 3, 3];

let newArray1 = array.filter((item, index) => {
    console.log(
    	// 배열 인덱스의 요소
        item,
        // 인덱스
        index,
        // 해당 배열의 요소의 첫번째 위치
        array.indexOf(item),
        // 첫번째면 true, 아니면 false
        array.indexOf(item) === index
    );

	// true만을 반환하여 return 한다.
    return array.indexOf(item) === index;
});

console.log(newArray1); // 중복된 값을 제외하고 출력

let newArray2 = array.filter(
    (item, index) => array.indexOf(item) !== index
);

console.log(newArray2); // 중복된 값만 출력


// =================================Result============================================


// 1 0 0 true
// 1 1 0 false
// 1 2 0 false
// 2 3 3 true
// 2 4 3 false
// 2 5 3 false
// 3 6 6 true
// 3 7 6 false
// [ 1, 2, 3 ]
// [ 1, 1, 2, 2, 3 ]

 

---

 

reduce 사용

 

배열이 해당 item을 포함하는지를 비교하여 중복 item을 제외한 완성된 배열을 만들어준다. 

 

let array = [1, 1, 1, 2, 2, 2, 3, 3];

let newArray = array.reduce(
    (finalArray, item) =>
        finalArray.includes(item) ? finalArray : [...finalArray, item],
    []
);

console.log(newArray); // [ 1, 2, 3 ]

 

설명

let array = [1, 1, 1, 2, 2, 2, 3, 3];

let newArray = array.reduce((finalArray, item) => {
    console.log(
        // 배열 인덱스의 요소
        item,
        // 완성 된 배열
        finalArray,
        // 배열이 item을 포함하는 지
        finalArray.includes(item),
        // 포함하면 배열의 변화가 없다 / 포함하지 않으면 배열에 아이템을 넣는다.
        finalArray.includes(item) ? finalArray : [...finalArray, item]
    );

    return finalArray.includes(item) ? finalArray : [...finalArray, item];
}, []); // [] : finalArray의 초기 값

console.log(newArray);


============================== Result ==============================


// 1 [] false [ 1 ]
// 1 [ 1 ] true [ 1 ]
// 1 [ 1 ] true [ 1 ]
// 2 [ 1 ] false [ 1, 2 ]
// 2 [ 1, 2 ] true [ 1, 2 ]
// 2 [ 1, 2 ] true [ 1, 2 ]
// 3 [ 1, 2 ] false [ 1, 2, 3 ]
// 3 [ 1, 2, 3 ] true [ 1, 2, 3 ]
// [ 1, 2, 3 ]

 

References

---

medium.com/dailyjs/how-to-remove-array-duplicates-in-es6-5daa8789641c