두 개의 자바스크립트 배열을 병합하고 중복 항목을 제거하는 방법

2024-04-18

두 개의 자바스크립트 배열을 병합하고 중복 항목을 제거하는 방법

concat() 함수 사용:

const array1 = [1, 2, 3, 4, 5];
const array2 = [3, 4, 5, 6, 7];

const mergedArray = array1.concat(array2);

// 중복 항목 제거
const uniqueMergedArray = [...new Set(mergedArray)];

console.log(uniqueMergedArray); // [1, 2, 3, 4, 5, 6, 7]

설명:

  • concat() 함수는 두 개 이상의 배열을 연결하여 새로운 배열을 만듭니다.
  • new Set() 객체는 배열의 요소를 고유한 값으로만 포함하는 새로운 Set 객체를 만듭니다.
  • ... 연산자는 Set 객체를 배열로 spread합니다.

reduce() 함수 사용:

const array1 = [1, 2, 3, 4, 5];
const array2 = [3, 4, 5, 6, 7];

const mergedArray = array1.reduce((acc, cur) => {
  if (!acc.includes(cur)) {
    acc.push(cur);
  }
  return acc;
}, []);

array2.forEach(el => {
  if (!mergedArray.includes(el)) {
    mergedArray.push(el);
  }
});

console.log(mergedArray); // [1, 2, 3, 4, 5, 6, 7]
  • reduce() 함수는 배열의 요소를 하나씩 처리하여 누적 값을 반환합니다.
  • 첫 번째 reduce() 호출은 array1을 처리하여 중복되지 않은 요소를 포함하는 새로운 배열을 만듭니다.
  • forEach() 루프는 array2의 요소를 처리하여 mergedArray에 중복되지 않은 요소를 추가합니다.

filter() 함수 사용:

const array1 = [1, 2, 3, 4, 5];
const array2 = [3, 4, 5, 6, 7];

const mergedArray = array1.concat(array2).filter((el, index) => {
  return mergedArray.indexOf(el) === index;
});

console.log(mergedArray); // [1, 2, 3, 4, 5, 6, 7]
  • filter() 함수는 배열의 요소를 하나씩 처리하여 조건에 맞는 요소만 포함하는 새로운 배열을 반환합니다.
  • indexOf() 메서드는 배열에서 특정 값의 첫 번째 인덱스를 반환합니다.
  • mergedArray.indexOf(el) === index 조건은 배열에서 현재 요소의 첫 번째 인덱스가 현재 처리하는 인덱스와 같은지 확인합니다. 즉, 해당 요소가 이전에 포함되지 않았는지 확인합니다.

주의 사항:

  • 위의 코드는 기본적인 예시이며, 실제 상황에 따라 다양한 방법으로 구현될 수 있습니다.
  • 배열의 요소가 객체인 경우 객체의 속성을 기준으로 중복을 제거해야 할 수도 있습니다.
  • 성능이 중요한 경우, 가장 효율적인 알고리즘을 선택하는 것이 중요합니다.

추가 정보:




예제 코드: 두 개의 JavaScript 배열을 병합하고 중복 항목을 제거하는 방법

const array1 = [1, 2, 3, 4, 5];
const array2 = [3, 4, 5, 6, 7];

const mergedArray = array1.concat(array2);

// 중복 항목 제거
const uniqueMergedArray = [...new Set(mergedArray)];

console.log(uniqueMergedArray); // [1, 2, 3, 4, 5, 6, 7]
const array1 = [1, 2, 3, 4, 5];
const array2 = [3, 4, 5, 6, 7];

const mergedArray = array1.reduce((acc, cur) => {
  if (!acc.includes(cur)) {
    acc.push(cur);
  }
  return acc;
}, []);

array2.forEach(el => {
  if (!mergedArray.includes(el)) {
    mergedArray.push(el);
  }
});

console.log(mergedArray); // [1, 2, 3, 4, 5, 6, 7]
const array1 = [1, 2, 3, 4, 5];
const array2 = [3, 4, 5, 6, 7];

const mergedArray = array1.concat(array2).filter((el, index) => {
  return mergedArray.indexOf(el) === index;
});

console.log(mergedArray); // [1, 2, 3, 4, 5, 6, 7]

이 코드 예시가 도움이 되었기를 바랍니다. 궁금한 점이 있으면 언제든지 물어보세요.




두 개의 JavaScript 배열을 병합하고 중복 항목을 제거하는 방법: 대체 방법

ES6 Array.from() 함수 사용:

const array1 = [1, 2, 3, 4, 5];
const array2 = [3, 4, 5, 6, 7];

const mergedArray = Array.from(new Set([...array1, ...array2]));

console.log(mergedArray); // [1, 2, 3, 4, 5, 6, 7]
  • Array.from() 함수는 이터레이터 가능한 객체를 새로운 배열로 변환합니다.

for 루프와 객체 사용:

const array1 = [1, 2, 3, 4, 5];
const array2 = [3, 4, 5, 6, 7];

const mergedArray = [];
const obj = {};

for (const el of array1) {
  if (!obj[el]) {
    obj[el] = true;
    mergedArray.push(el);
  }
}

for (const el of array2) {
  if (!obj[el]) {
    obj[el] = true;
    mergedArray.push(el);
  }
}

console.log(mergedArray); // [1, 2, 3, 4, 5, 6, 7]
  • obj 객체는 방문한 요소를 추적하는 데 사용됩니다.
  • array1array2의 각 요소에 대해 obj 객체에 해당 요소가 없는지 확인합니다.
  • 요소가 obj 객체에 없으면 해당 요소를 mergedArray에 추가하고 obj 객체에 해당 요소를 추가합니다.

라이브러리 사용:

  • Underscore.js와 같은 라이브러리에는 _.uniq() 함수와 같은 배열에서 중복 항목을 제거하는 데 도움이 되는 유용한 함수가 포함되어 있습니다.
const array1 = [1, 2, 3, 4, 5];
const array2 = [3, 4, 5, 6, 7];

const mergedArray = _.uniq([...array1, ...array2]);

console.log(mergedArray); // [1, 2, 3, 4, 5, 6, 7]

javascript arrays merge


jQuery를 사용하여 Ajax 요청 중단

abort() 함수 사용:abort() 함수는 jQuery Ajax 객체의 메서드 중 하나이며, 실행 중인 Ajax 요청을 취소합니다.다음 코드는 버튼 클릭 시 Ajax 요청을 중단하는 예시입니다.$.ajaxSetup() 사용:...


{props.name}

1) 객체 리터럴 스프레드위 코드에서 MyComponent 컴포넌트는 name과 age 속성을 필요로 합니다. App 컴포넌트에서 props 객체를 스프레드하여 MyComponent 컴포넌트에 전달합니다. 스프레드 문법을 사용하면 객체 리터럴을 직접 복사하지 않고 속성을 쉽게 전달할 수 있습니다...


자바스크립트, Node.js 및 비동기에서 async/await 함수를 병렬로 호출하는 방법

Async/await은 자바스크립트에서 비동기 프로그래밍을 쉽게 만드는 강력한 기능입니다. 이 기능을 사용하면 코드를 동기적으로 작성하면서도 비동기 작업을 처리할 수 있습니다.병렬 처리를 통해 여러 비동기 작업을 동시에 실행하여 성능을 향상시킬 수 있습니다...


Angular 2에서 조건부 속성을 추가하는 방법

ngIf를 사용하여 속성 템플릿에 추가ngIf 지시문을 사용하여 속성이 템플릿에 포함될지 여부를 결정할 수 있습니다. 예를 들어 다음과 같이 쓸 수 있습니다.이 코드는 condition 값이 true이면 disabled 속성을 추가하고 false이면 추가하지 않습니다...


javascript arrays merge