자바 스크립트에서 객체를 병합하는 방법

This is a series of #250DaysOfJSQuestions that I had started on twitter where I share one JavaScript interview question daily, follow me on twitter for web dev and interview related content.

질문 1. javascript에서 둘 이상objects을 병합하는 방법을 알아보세요.

javascript의 거의 모든 것이 객체이지만 여전히 두 개 이상의 서로 다른 객체를 병합하는 좋은 방법이 없습니다.

ES6 이후에는 javascript에서 개체를 병합하는 데 사용할 수 있는 새 메서드가 추가되었습니다.

개체에서 수행할 수 있는 두 가지 유형의 병합이 있습니다.

1). 얕은 병합
2). 깊은 병합

얕은 병합 개체

얕은 병합에서는 개체가 소유한 속성만 병합되고 확장된 속성이나 메서드는 병합되지 않습니다.

... 스프레드 연산자 사용

... 스프레드 연산자는 객체의 모든 속성을 다른 객체로 복사합니다.

let obj1 = {
  name: 'prashant',
  age: 23,
}

let obj2 = {
  qualification: 'BSC CS',
  loves: 'Javascript'
}

let merge = {...obj1, ...obj2};

console.log(merge);

/*
Object {
  age: 23,
  loves: "Javascript",
  name: "prashant",
  qualification: "BSC CS"
}
*/

Object.assign() 메서드 사용

Object.assign(target, source1, soure2, ...) 메소드는 소스 객체의 열거 가능한 모든 자체 속성을 대상 객체에 복사하고 대상 객체를 반환합니다.

let obj1 = {
  name: 'prashant',
  age: 23,
}

let obj2 = {
  qualification: 'BSC CS',
  loves: 'Javascript'
}

let merge = Object.assign({}, obj1, obj2);

console.log(merge);

/*
Object {
  age: 23,
  loves: "Javascript",
  name: "prashant",
  qualification: "BSC CS"
}
*/

빈 개체{}를 대상으로 사용했고 대상에 병합해야 하는 소스 개체를 전달했습니다.

사용자 지정 기능을 사용하여 개체 병합

둘 이상의 개체를 병합하는 사용자 지정 함수를 만들 수도 있습니다.

let merge = (...arguments) => {

  // Create a new object
  let target = {};

  // Merge the object into the target object
  let merger = (obj) => {
     for (let prop in obj) {
    if (obj.hasOwnProperty(prop)) {
    // Push each value from 'obj' into 'target'
     target[prop] = obj[prop];
    }
     }
  };

  // Loop through each object and conduct a merge
  for (let i = 0; i < arguments.length; i++) {
    merger(arguments[i]);
  }

  return target;
}

let obj1 = {
  name: 'prashant',
  age: 23,
}

let obj2 = {
  qualification: 'BSC CS',
  loves: 'Javascript'
}

let merged = merge(obj1, obj2);;

console.log(merged);

/*
Object {
  age: 23,
  loves: "Javascript",
  name: "prashant",
  qualification: "BSC CS"
}
*/

객체 완전 병합

개체를 완전히 병합하려면 자체 속성과 확장 속성도 복사해야 합니다. 그렇게 하는 가장 좋은 방법은 사용자 지정 함수를 만드는 것입니다.

let merge = (...arguments) => {

  // Variables
  let target = {};

  // Merge the object into the target object
  let merger = (obj) => {
      for (let prop in obj) {
     if (obj.hasOwnProperty(prop)) {
         if (Object.prototype.toString.call(obj[prop]) === '[object Object]') {
        // If we're doing a deep merge and the property is an object
        target[prop] = merge(target[prop], obj[prop]);
         } else {
        // Otherwise, do a regular merge
        target[prop] = obj[prop];
         }
     }
      }
  };

 //Loop through each object and conduct a merge
 for (let i = 0; i < arguments.length; i++) {
     merger(arguments[i]);
 }

 return target;
};

let obj1 = {
  name: 'prashant',
  age: 23,
  nature: {
    "helping": true,
    "shy": false
  }
}

let obj2 = {
  qualification: 'BSC CS',
  loves: 'Javascript',
  nature: {
    "angry": false,
    "shy": true
  }
}

console.log(merge(obj1, obj2));

/*
Object {
  age: 23,
  loves: "Javascript",
  name: "prashant",
  nature: Object {
    angry: false,
    helping: true,
    shy: true
  },
  qualification: "BSC CS"
}
*/

얕은 복사와 깊은 복사를 위한 함수를 함께 결합하여 전달된 인수를 기반으로 병합을 수행하는 단일 함수를 만들 수 있습니다.

첫 번째 인수로 true를 전달하면 심층 병합을 수행하고 그렇지 않으면 얕은 병합을 수행합니다.

let merge = (...arguments) => {

   // Variables
   let target = {};
   let deep = false;
   let i = 0;

   // Check if a deep merge
   if (typeof (arguments[0]) === 'boolean') {
      deep = arguments[0];
      i++;
   }

   // Merge the object into the target object
   let merger = (obj) => {
    for (let prop in obj) {
        if (obj.hasOwnProperty(prop)) {
            if (deep && Object.prototype.toString.call(obj[prop]) === '[object Object]') {
                // If we're doing a deep merge and the property is an object
                target[prop] = merge(target[prop], obj[prop]);
            } else {
                // Otherwise, do a regular merge
                target[prop] = obj[prop];
            }
        }
    }
   };

   //Loop through each object and conduct a merge
   for (; i < arguments.length; i++) {
    merger(arguments[i]);
   }

   return target;
};

let obj1 = {
  name: 'prashant',
  age: 23,
  nature: {
    "helping": true,
    "shy": false
  }
}

let obj2 = {
  qualification: 'BSC CS',
  loves: 'Javascript',
  nature: {
    "angry": false,
    "shy": true
  }
}

//Shallow merge
console.log(merge(obj1, obj2));

/*
Object {
  age: 23,
  loves: "Javascript",
  name: "prashant",
  nature: Object {
    angry: false,
    shy: true
  },
  qualification: "BSC CS"
}
*/

//Deep merge
console.log(merge(true, obj1, obj2));

/*
Object {
  age: 23,
  loves: "Javascript",
  name: "prashant",
  nature: Object {
    angry: false,
    helping: true,
    shy: true
  },
  qualification: "BSC CS"
}
*/

다음과 같은 두 개체를 병합하는 데 사용할 수 있는 다른 라이브러리가 있습니다.

Jquery의 $.extend() 메소드

$.extend(deep, copyTo, copyFrom)를 사용하여 javascript에서 모든 배열 또는 개체의 완전한 전체 복사본을 만들 수 있습니다.

Lodash merge() 메소드

재귀적으로 깊은 병합을 수행하여 객체와 배열을 병합합니다.