JavaScript 배열에서 중복 값 제거: 추가 방법 및 고려 사항

2024-04-23

JavaScript 배열에서 고유 값 가져오기 (중복 제거)

Set 객체 사용:

Set 객체는 고유 값만 저장하는 자료구조입니다. 배열을 Set 객체로 변환한 후 다시 배열로 변환하면 중복 값이 제거됩니다. 다음은 코드 예시입니다.

const originalArray = [1, 2, 3, 2, 4, 3];

const uniqueSet = new Set(originalArray);
const uniqueArray = [...uniqueSet];

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

filter 함수를 사용하여 배열을 순환하며 각 요소가 이미 고유 값 배열에 존재하는지 확인합니다. 존재하지 않으면 고유 값 배열에 추가합니다. 다음은 코드 예시입니다.

const originalArray = [1, 2, 3, 2, 4, 3];

const uniqueArray = originalArray.filter((value, index, array) => {
  return array.indexOf(value) === index;
});

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

ES6 도입 새로운 함수 사용:

ES6에서는 새로운 Array.from 함수와 함께 사용하면 중복 값을 제거하는 기능을 제공합니다. 다음은 코드 예시입니다.

const originalArray = [1, 2, 3, 2, 4, 3];

const uniqueArray = Array.from(new Set(originalArray));

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

forEach와 indexOf 사용:

const originalArray = [1, 2, 3, 2, 4, 3];

const uniqueArray = [];

originalArray.forEach(value => {
  if (uniqueArray.indexOf(value) === -1) {
    uniqueArray.push(value);
  }
});

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

reduce 함수를 사용하여 배열을 순환하며 고유 값 배열을 축적합니다. 다음은 코드 예시입니다.

const originalArray = [1, 2, 3, 2, 4, 3];

const uniqueArray = originalArray.reduce((uniqueArray, value) => {
  if (!uniqueArray.includes(value)) {
    uniqueArray.push(value);
  }
  return uniqueArray;
}, []);

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

위에서 소개된 방법 외에도 다양한 방법으로 JavaScript 배열에서 중복 값을 제거하고 고유 값만 추출할 수 있습니다. 상황에 맞는 가장 적합한 방법을 선택하여 사용하십시오.

참고:

  • ES6 버전 이상을 사용하는 경우 Array.from, Set 객체와 같은 새로운 기능을 사용하는 것이 좋습니다.
  • 배열의 요소가 객체인 경우 객체의 속성을 기준으로 중복 값을 제거하려면 추가적인 처리가 필요할 수 있습니다.
  • 성능이 중요한 경우 사용하는 방법에 따라 속도 차이가 있을 수 있으므로 여러 방법을 테스트하여 최적의 방법을 선택하는 것이 좋습니다.



JavaScript 배열에서 고유 값 가져오기 (중복 제거) 예제 코드

const originalArray = [1, 2, 3, 2, 4, 3];

const uniqueSet = new Set(originalArray);
const uniqueArray = [...uniqueSet];

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

filter 함수 사용:

const originalArray = [1, 2, 3, 2, 4, 3];

const uniqueArray = originalArray.filter((value, index, array) => {
  return array.indexOf(value) === index;
});

console.log(uniqueArray); // [1, 2, 3, 4]
const originalArray = [1, 2, 3, 2, 4, 3];

const uniqueArray = Array.from(new Set(originalArray));

console.log(uniqueArray); // [1, 2, 3, 4]
const originalArray = [1, 2, 3, 2, 4, 3];

const uniqueArray = [];

originalArray.forEach(value => {
  if (uniqueArray.indexOf(value) === -1) {
    uniqueArray.push(value);
  }
});

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

reduce 함수 사용:

const originalArray = [1, 2, 3, 2, 4, 3];

const uniqueArray = originalArray.reduce((uniqueArray, value) => {
  if (!uniqueArray.includes(value)) {
    uniqueArray.push(value);
  }
  return uniqueArray;
}, []);

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

설명:

  • 위 코드들은 모두 originalArray라는 배열에 중복 값이 포함되어 있는 경우를 가정합니다.
  • 각 코드는 중복 값을 제거하고 고유 값만 포함하는 새로운 배열을 생성합니다.
  • 새로운 배열은 uniqueArray 변수에 저장됩니다.
  • 각 코드는 다르게 작동하지만 동일한 결과를 얻습니다.
  • 어떤 코드를 사용할지는 개인의 선호와 상황에 따라 다릅니다.

이 코드가 도움이 되었기를 바랍니다! 혹시 다른 질문이 있으면 알려주세요.




JavaScript 배열에서 고유 값 가져오기 (중복 제거) 대체 방법

객체의 속성 기준 중복 값 제거:

const originalArray = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 1, name: 'Charlie' },
  { id: 3, name: 'David' },
  { id: 2, name: 'Emily' },
];

const uniqueArray = originalArray.reduce((uniqueArray, item) => {
  const existingItem = uniqueArray.find(obj => obj.id === item.id);
  if (!existingItem) {
    uniqueArray.push(item);
  }
  return uniqueArray;
}, []);

console.log(uniqueArray);
// [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'David' }]
const originalArray = [1, 2, 3, 2, 4, 3];

const uniqueMap = new Map();
originalArray.forEach(value => {
  uniqueMap.set(value, value);
});

const uniqueArray = [...uniqueMap.values()];

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

sort 함수를 사용하여 배열을 정렬하고 indexOf 함수를 사용하여 중복 값을 찾아 제거할 수 있습니다. 다음은 코드 예시입니다.

const originalArray = [1, 2, 3, 2, 4, 3];

originalArray.sort((a, b) => a - b);

const uniqueArray = [];
let prevValue = null;

originalArray.forEach(value => {
  if (value !== prevValue) {
    uniqueArray.push(value);
  }
  prevValue = value;
});

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

라이브러리 활용:

lodash와 같은 JavaScript 라이브러리에는 중복 값 제거 기능을 제공하는 유틸리티 함수가 포함되어 있을 수 있습니다. 이러한 라이브러리를 사용하면 코드를 간결하게 작성할 수 있습니다.


javascript unique arrays


null 병합 연산자: 값 채우기

템플릿 리터럴 (Template Literals): 문자열 마법템플릿 리터럴은 백틱(`)을 사용하여 문자열을 정의합니다. 변수를 직접 삽입하고, 여러 줄 문자열을 쉽게 작성하며, 표현식을 평가하여 동적인 문자열을 만들 수 있습니다...


",", 공백, 특수문자... 어떤 문자라도 분리 가능! 자바스크립트 문자열 분할 꿀팁

예시:위 예시에서 splitStr 변수는 "안녕하세요"와 " JavaScript!" 두 개의 문자열로 구성된 배열을 저장합니다. , 문자가 분리 기준으로 사용되었습니다.여러 개의 분리 문자 처리split() 메서드는 여러 개의 문자열을 동시에 분리 기준으로 사용할 수 있습니다...


자바스크립트 객체에서 키가 있는지 확인하는 방법

hasOwnProperty() 메서드는 객체 자체의 속성만 확인하며, 프로토타입 체인에서 상속받은 속성은 확인하지 않습니다.in 연산자 사용:in 연산자는 객체 자체와 프로토타입 체인에서 상속받은 속성까지 모두 확인합니다...


JavaScript 클로저: 루프에서 사용하는 간단한 실용적인 예

다음 코드를 살펴보세요.이 코드는 3번 반복하며 각 반복마다 1초 후에 console. log(i)를 실행합니다. 하지만 예상과 달리 3번 모두 3이 출력됩니다. 그 이유는 각 콜백 함수가 실행될 때 i의 값이 이미 3으로 증가되었기 때문입니다...


프로그래밍 언어 비교: 자바스크립트 vs 파이썬

때때로 여러 다차원 배열을 하나의 평면 배열로 병합하거나 평면 배열을 다차원 배열로 변환해야 할 수 있습니다. 자바스크립트에서 이러한 작업을 수행하는 데 사용할 수 있는 몇 가지 방법이 있습니다.concat() 메서드는 두 개 이상의 배열을 하나의 배열로 결합하는 데 사용할 수 있습니다...


javascript unique arrays

자바스크립트 배열에서 중복된 값 제거하기: 효율적인 방법 비교

Set 객체 사용:Set 객체는 중복된 값을 자동으로 제거하는 데이터 구조입니다. 위 코드에서 new Set(originalArray)는 originalArray의 모든 요소를 포함하는 Set 객체를 생성합니다. ... 연산자는 Set 객체를 배열로 변환합니다