다른 객체에서 객체 속성을 복제하는 방법?

주어진 객체 :

var firstObject = {
    key1 : 'value1',
    key2 : 'value2'
};

어떻게 다른 객체 ( secondObject) 안에 속성을 복사 할 수 있습니까?

var secondObject = {
    key1 : 'value1',
    key2 : 'value2',
    key3 : 'value3',
    key4 : 'value4'
};

에 대한 참조를 사용하여 firstObject? 이 같은:

var secondObject = {
    firstObject,
    key3 : 'value3',
    key4 : 'value4'
};

(이것은 작동하지 않습니다 ... 코드를 어떻게 구성하고 싶습니까?

JavaScript 프레임 워크 를 사용하지 않고도 솔루션이 가능 합니까?

for(var k in firstObject) secondObject[k]=firstObject[k];

@ Bardzuśny의 대답에서 힌트를 얻은 ES6는 기본 솔루션 인 Object.assign()기능을 제공했습니다.

사용법은 간단합니다.

Object.assign(secondObject, firstObject);

그게 다야!

현재의 지원은 분명히 좋지 않습니다. Firefox (34+) 만 기본적으로 지원하며 Chrome (45+) 및 Opera (32+)에는 '실험용 플래그'를 설정해야합니다.

최신 버전의 Chrome, Firefox, Opera, Safari 및 Edge를 지원하여 지원이 향상되고 있습니다 (IE는 지원하지 않습니다). Babel 및 Traceur와 같은 트랜스 파일러도 사용할 수 있습니다. 자세한 내용은 여기 를 참조하십시오.

ES6 당 -확산 구문 :

간단하게 사용할 수 있습니다 :

const thirdObject = {
   ...firstObject,
   ...secondObject   
}

이를 통해 이러한 객체를 참조로 전달할 때 발생하는 문제를 피할 수 있습니다.

또한 중첩이 깊은 개체를 처리합니다.

첫 번째 객체의 속성을 반복하여 다음과 같이 두 번째 객체에 할당합니다.

var firstObject = {
    key1 : 'value1',
    key2 : 'value2'
};

var secondObject = {
    key3 : 'value3',
    key4 : 'value4'
};

for (var prop in firstObject) {
    if (firstObject.hasOwnProperty(prop)) {
        secondObject[prop] = firstObject[prop];
    }
}

for- in루프는 충분하지 않다; 당신은 필요합니다 hasOwnProperty. 이유에 대한 자세한 설명은 http://bonsaiden.github.com/JavaScript-Garden/#object.forinloop 를 참조하십시오 .

ES5가 우리를 가져 왔기 때문에 네크로맨서를 연주하면 Object.keys()이 모든 .hasOwnProperty()수표 에서 우리를 구할 수 있습니다.

Object.keys(firstObject).forEach(function(key) {
  secondObject[key] = firstObject[key];
});

또는 함수로 묶기 (lodash의 "복사"로 제한 _.assign()) :

function assign(object, source) {
  Object.keys(source).forEach(function(key) {
    object[key] = source[key];
  });
}

assign(secondObject, firstObject); // assign firstObject properties to secondObject

Object.keys()IE <9에서는 사용할 수없는 비교적 새로운 방법입니다. 실제로는 .forEach()규칙 방법 대신 사용한 배열 방법도 마찬가지 입니다.for 루프 합니다.

운 좋게도 es5-shim이 있습니다 이 고대 브라우저에서 사용할 수있는 있으며,이 브라우저는 많은 ES5 기능 (그 둘을 포함하여)을 채울 것입니다.

(멋지고 새로운 언어 기능을 사용하는 것을 막는 것이 아니라 폴리 필을 사용하는 것이 전부입니다.)

사람들은 hasOwnProperty와 실제 객체 검사를 통해 깊은 복사 방법을 찾을 수 있습니다.

var extend = function (original, context, key) {
  for (key in context)
    if (context.hasOwnProperty(key))
      if (Object.prototype.toString.call(context[key]) === '[object Object]')
        original[key] = extend(original[key] || {}, context[key]);
      else
        original[key] = context[key];
  return original;
};

Object.assign 을 사용할 수 있습니다 을 하여 객체를 결합 . 공통 속성을 오른쪽에서 왼쪽으로 결합하고 재정의합니다. 즉 왼쪽의 동일한 속성이 오른쪽으로 재정의됩니다.

그리고는 중요한 소스 오브젝트를 돌연변이 피하기 위해 먼저 빈 객체를 제공 할 수 있습니다. 소스 객체는 다음과 같이 깨끗하게 유지해야합니다Object.assign() 자체는 새 객체를 반환하므로 합니다.

도움이 되었기를 바랍니다!

var firstObject = {
    key1 : 'value1',
    key2 : 'value2'
};

var secondObject = {
    key3 : 'value3',
    key4 : 'value4'
};

var finalObject = Object.assign({}, firstObject, secondObject)

console.log(finalObject)

kingPuppy 아이디어 및 OP 아이디어 개선 (얕은 복사) -OP "example"에 3 개의 점만 추가합니다. :)

var secondObject = {
    ...firstObject,
    key3 : 'value3',
    key4 : 'value4'
};

var firstObject = {
    key1 : 'value1',
    key2 : 'value2'
};

var secondObject = {
    ...firstObject,
    key3 : 'value3',
    key4 : 'value4'
};

console.log(secondObject);

이것은 여기 에서 테스트되고 작동 합니다 .

var secondObject = {
    firstObject: JSON.parse(JSON.stringify(firstObject)),
    key3 : 'value3',
    key4 : 'value4'
};

참고 :이 방법은 firstObject
참고 2의 방법을 복사하지 않습니다 . 이전 브라우저에서 사용하려면 json 파서 가 필요합니다.
주 3 : 참조로 할당하는 것은 특히 옵션이 firstObject포함되어있는 경우에 실행 가능한 옵션 입니다. 주어진 jsfiddle 예제를 적절히 조정했습니다.

불행히도, 그런 객체에 변수에 대한 참조를 넣을 수는 없습니다. 그러나 객체 값을 다른 객체로 복사하는 기능을 만들 수 있습니다.

function extend( obj1, obj2 ) {
    for ( var i in obj2 ) {
        obj1[i] = obj2[i];
    }
    return obj1;
}

var firstObject = {
    key1: "value1",
    key2: "value2"
};

var secondObject = extend({
    key3: "value3",
    key4: "value4"
}, firstObject );

당신이 잡아 원하는 경우 에만 두 번째 개체에 존재하는 속성을, 당신이 사용할 수있는 Object.keys두 가지 방법을 할 수있는 첫 번째 개체의 속성을 잡아 :

A.) map 부작용을 사용하여 첫 번째 개체의 속성을 두 번째 개체에 할당합니다.

var a = {a:100, b:9000, c:300};
var b = {b:-1};

Object.keys(a).map(function(key, index) {
    if (typeof b[key] !== 'undefined') {
        console.log(key);
        b[key] = a[key];    
    }
});

B.) 또는 reduce새 개체를 만들어 두 번째 개체에 할당합니다. 이 메소드 는 첫 번째 오브젝트와 일치하지 않는 두 번째 오브젝트가 가질 수있는 다른 특성을 대체 합니다.

var a = {a:100, b:9000, c:300};
var b = {b:-1, d:-1}; // d will be gone

b = Object.keys(a).reduce(function(result, current) {
    if (typeof b[current] !== 'undefined') {
        result[current] = a[current];   
    }
    return result;
}, {});

속성 스프레드 표기법을 사용하십시오. ES2018에 추가되었으며 (배열 / 이터 블에 대한 확산은 이전, ES2015) {... firstObject}는 모든 열거 가능한 속성을 개별 속성으로 분산시킵니다.

let secondObject = {
      ...firstObject,
      key3 : 'value3',
      key4 : 'value4'
    }

오히려 firstObject를 secondObject의 프로토 타입으로 사용하고 속성 설명자를 추가합니다.

var secondObject = Object.create(firstObject, {
      key3: {value: "value3", writable: true, configurable: true, enumerable: true},
      key4: {value: "value4", writable: true, configurable: true, enumerable: true}
      });

확실히 하나의 라이너는 아니지만 더 많은 제어 기능을 제공합니다. 속성 설명자에 관심이 있으시면 http://patrickdelancy.com/2012/09/property-descriptors-in-javascript/#comment-2062 및 MDN 페이지 https : //developer.mozilla 를 읽어보십시오 . org / en-US / docs / Web / JavaScript / Reference / Global_Objects / Object / create

값을 할당하고 설명자를 생략하고 조금 더 짧게 만들 수도 있습니다.

var secondObject = Object.create(firstObject, {
      key3: {value: "value3"}
      key4: {value: "value4"}
  });

호환성 : ECMAScript 5, IE9 +

var firstObject = {
     key1: "value1",
     key2: "value2"
};

var secondObject = {
     key3: "value3",
     key4: "value4"
     copy: function(firstObject){
           this.key1 = firstObject.key1;
           this.key2 = firstObject.key2;
     }
 };

다음 방법을 사용하면 속성이 복사됩니다.

secondObject.copy(firstObject)

나는 자바 스크립트를 처음 접했지만이 작업을 발견했습니다. 조금 너무 오래 추측하지만 작동합니다.