JavaScript 객체 병합: Reduce 와 Concat 활용

Beginner

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

소개

이 랩에서는 JavaScript 에서 객체를 병합하는 과정을 살펴봅니다. 이 랩은 두 개 이상의 객체를 결합하여 새로운 객체를 생성하는 단계를 안내합니다. Array.prototype.reduce() 와 Object.keys() 를 사용하여 객체와 키를 반복하는 방법, Object.prototype.hasOwnProperty() 와 Array.prototype.concat() 을 사용하여 기존 키의 값을 병합하는 방법을 배우게 됩니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

객체 병합 함수

두 개 이상의 객체를 병합하려면 다음 단계를 따르세요.

  1. 터미널/SSH 를 열고 node를 입력하여 코딩을 시작합니다.
  2. Array.prototype.reduce()Object.keys()를 함께 사용하여 모든 객체와 키를 반복합니다.
  3. Object.prototype.hasOwnProperty()Array.prototype.concat()을 사용하여 여러 객체에 존재하는 키의 값을 추가합니다.
  4. 주어진 코드 조각을 사용하여 두 개 이상의 객체를 결합하여 새로운 객체를 생성합니다.
const merge = (...objs) =>
  [...objs].reduce(
    (acc, obj) =>
      Object.keys(obj).reduce((a, k) => {
        acc[k] = acc.hasOwnProperty(k)
          ? [].concat(acc[k]).concat(obj[k])
          : obj[k];
        return acc;
      }, {}),
    {}
  );

예를 들어, 다음 객체를 고려해 보세요.

const object = {
  a: [{ x: 2 }, { y: 4 }],
  b: 1
};
const other = {
  a: { z: 3 },
  b: [2, 3],
  c: "foo"
};

merge() 함수를 사용하여 이 두 객체를 병합하면 다음과 같은 결과가 나타납니다.

merge(object, other);
// { a: [ { x: 2 }, { y: 4 }, { z: 3 } ], b: [ 1, 2, 3 ], c: 'foo' }

요약

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