객체 배열 결합

Beginner

This tutorial is from open-source community. Access the source code

소개

이 랩에서는 지정된 속성을 기반으로 두 개의 객체 배열을 결합하는 JavaScript 프로그래밍 연습을 진행합니다. 이 연습의 목적은 JavaScript 를 사용하는 모든 개발자에게 필수적인 기술인 Array.prototype.reduce() 메서드와 객체 조작을 연습하는 데 도움을 주는 것입니다. 이 랩이 끝나면 속성을 기반으로 두 개의 객체 배열을 원활하게 결합하여 새로운 배열을 만들 수 있어야 합니다.

지정된 키를 기반으로 객체 배열을 결합하는 함수

특정 키를 기반으로 두 개의 객체 배열을 결합하려면 다음 단계를 따르세요.

  1. 터미널/SSH 를 열고 node를 입력하여 코딩 연습을 시작합니다.
  2. 주어진 prop을 기반으로 두 배열의 모든 객체를 결합하기 위해 객체 누산기 (accumulator) 와 함께 Array.prototype.reduce()를 사용합니다.
  3. 결과 객체를 배열로 변환하고 반환하기 위해 Object.values()를 사용합니다.

다음은 사용할 수 있는 함수입니다.

const combine = (a, b, prop) =>
  Object.values(
    [...a, ...b].reduce((acc, v) => {
      if (v[prop])
        acc[v[prop]] = acc[v[prop]] ? { ...acc[v[prop]], ...v } : { ...v };
      return acc;
    }, {})
  );

이 함수를 사용하는 방법의 예는 다음과 같습니다.

const x = [
  { id: 1, name: "John" },
  { id: 2, name: "Maria" }
];
const y = [{ id: 1, age: 28 }, { id: 3, age: 26 }, { age: 3 }];
combine(x, y, "id");
// [
//  { id: 1, name: 'John', age: 28 },
//  { id: 2, name: 'Maria' },
//  { id: 3, age: 26 }
// ]

요약

축하합니다! 객체 배열 결합 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.