[javascript] ES6 +에서 두 개의 자바 스크립트 객체를 어떻게 병합합니까?

Program / 글쓴이

나는 항상 다음과 같은 코드를 작성해야한다는 것에 지쳤다.

function shallowExtend(obj1,obj2){
  var key;
  for ( key in obj2 ) {
    if ( obj2.hasOwnProperty(key) === false )  continue;
    obj1[key] = obj2[key]
  }
}

또는 코드를 직접 작성하지 않으려면 이미 코드를 작성하는 라이브러리를 구현하십시오. 확실히 ES6 +이의 구조에 오는 것은 같은 우리에게 제공 Object.prototype.extend(obj2...)또는Object.extend(obj1,obj2...)

ES6 +는 그러한 기능을 제공합니까? 아직없는 경우 그러한 기능이 계획되어 있습니까? 계획되지 않았다면 왜 안됩니까?

답변

Object.assign을 사용하여 ES6에서 얕은 병합 / 확장 / 할당을 수행 할 수 있습니다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

통사론:

Object.assign ( target , sources );

여기서 … sources 는 소스 객체를 나타냅니다.

예:

var obj1 = {name: 'Daisy', age: 30};
var obj2 = {name: 'Casey'};

Object.assign(obj1, obj2);

console.log(obj1.name === 'Casey' && obj1.age === 30);
// true

답변

이를 위해 오브젝트 스프레드 구문 을 사용할 수 있습니다 .

const merged = {...obj1, ...obj2}

배열의 경우 스프레드 연산자는 이미 ES6 (ES2015)의 일부이지만 객체의 경우 ES9 (ES2018)의 언어 사양에 추가되었습니다. Babel과 같은 도구에서 기본적으로 활성화 된 제안은 그 이전입니다.

답변

나는 이것이 오래된 문제라는 것을 알고 있지만 ES2015 / ES6에서 가장 쉬운 해결책은 실제로 Object.assign (),

잘하면 이것이 도움이 될 것입니다 .DEEP 병합도 수행합니다.

/**
 * Simple is object check.
 * @param item
 * @returns {boolean}
 */
export function isObject(item) {
  return (item && typeof item === 'object' && !Array.isArray(item) && item !== null);
}

/**
 * Deep merge two objects.
 * @param target
 * @param source
 */
export function mergeDeep(target, source) {
  if (isObject(target) && isObject(source)) {
    for (const key in source) {
      if (isObject(source[key])) {
        if (!target[key]) Object.assign(target, { [key]: {} });
        mergeDeep(target[key], source[key]);
      } else {
        Object.assign(target, { [key]: source[key] });
      }
    }
  }
  return target;
}

사용법 예 :

mergeDeep(this, { a: { b: { c: 123 } } });
// or
const merged = mergeDeep({a: 1}, { b : { c: { d: { e: 12345}}}});
console.dir(merged); // { a: 1, b: { c: { d: [Object] } } }

답변

추가 Object.mixin는 현재 요청하는 동작을 처리하기 위해 논의 중입니다.https://mail.mozilla.org/pipermail/es-discuss/2012-December/027037.html

아직 ES6 초안에는 없지만 많은 지원이 필요한 것 같으므로 곧 초안에 나타날 것입니다.

답변

ES6

Object.assign(o1,o2) ;
Object.assign({},o1,o2) ; //safe inheritance
var copy=Object.assign({},o1); // clone o1
//------Transform array of objects to one object---
var subjects_assess=[{maths:92},{phy:75},{sport:99}];
Object.assign(...subjects_assess); // {maths:92,phy:75,sport:99}

ES7 또는 바벨

{...o1,...o2} // inheritance
 var copy= {...o1};

답변

아마도 ES5 Object.defineProperties방법이 작동합니까?

예 : 

var a = {name:'fred'};
var b = {age: {value: 37, writeable: true}};

Object.defineProperties(a, b);

alert(a.age); // 37

MDN 설명서 : https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperties

답변