image

배열 중복 제거하기

태그
Javascript
상세설명배열 중복 제거하기 : Set() / filter(), indexOf() / forEach(), includes()
작성일자2023.12.15

자바스크립트에서 배열 중복 제거하는 방법

  • Set()
  • Set을 활용해 유일한 값 {"A","B","C","D","E"} 만 담은 후 전개연산자(...)를 사용하거나 Array.from()을 사용하여 유일한 값만 모여진 배열로 만들면 된다.

    const array = ['A','A','B','C','D','E','D','A']
    
    const uniaue = new Set(array)
    // 결과: {"A","B","C","D","E"}
    
    const result1 = [...new Set(array)];
    // 결과: ["A","B","C","D","E"]
    
    const result2 = Array.from(new Set(array));
    // 결과: ["A","B","C","D","E"]

  • filter(), indexOf()
  • indexOf()는 특정 문자열을 찾고, 검색된 문자열이 '첫 번째' 로 나타나는 위치 index를 리턴 하는 함수로 문자와 동일 문자 중 '첫 번째' 로 나타나는 위치 index 와 일치하는 값만 filter() 함수를 통해 필터링 합니다.

    const array = ['A','A','B','C','D','E','D','A']
    
    const filter = array.filter((v, i) => {
      console.log(v, '/', i);	
    })
    
    /*
    A / 0
    A / 1
    B / 2
    C / 3
    D / 4
    E / 5
    D / 6
    A / 7
    */
    
    const result = array.filter((v, i) => array.indexOf(v) === i);
    // ["A","B","C","D","E"]

  • forEach(), includes()
  • array(중복이 있는 배열) 을 순회하면서 uniqueArray 에 유일한 값이 없다면uniqueArray 배열에 psuh하면 된다.

    const array = ['A','A','B','C','D','E','D','A']
    
    let uniqueArray = [];
    array.forEach((element) => {
      if(!uniqueArray.includes(element)){
        uniqueArray.push(element)
      }
    })
    
    //["A","B","C","D","E"]

  • reduce(), includes()
  • acc는 배열 새 []이고 내부에 cur이 있는지 찾는다. 만약 있으면 acc을 그대로 반환하고 없으면 acc에 cur를 포함하여 배열을 리턴한다.

    const array = ['A','A','B','C','D','E','D','A']
    
    const result= array.reduce((acc, cur) => {
      if (acc.includes(cur)) {
        return acc 
      } else {
        return [...acc, cur] 
      }
    }, []);
    
    const result = array.reduce((acc, cur) => acc.includes(cur) ? acc : [...acc,cur], []);