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

Program / 글쓴이

주어진 객체 :

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)

스 니펫 확장