ES6+에서 두 개의 자바스크립트 객체를 함께 병합하려면 어떻게 해야 합니까?

ES6+에서 두 개의 자바스크립트 객체를 함께 병합하려면 어떻게 해야 합니까?

나는 항상 이런 코드를 쓰는 것에 진절머리가 납니다.

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(대상, 출처);

어디서...sources는 source 개체를 나타냅니다.

예:

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 merging을 합니다.

/**
 * 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] } } }

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};

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

아직 ES6 시안에는 없지만, 찬성이 많은 것 같아 조만간 시안에 나올 것 같습니다.

아마도 ES5 방법이 그 일을 해낼 수 있을까요?

예.

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

언급URL : https://stackoverflow.com/questions/13852852/how-do-i-merge-two-javascript-objects-together-in-es6