source

참조가 아닌 새로운 변수로 자바스크립트 객체를 복사하는 방법은 무엇입니까?

lovecheck 2023. 7. 26. 22:10
반응형

참조가 아닌 새로운 변수로 자바스크립트 객체를 복사하는 방법은 무엇입니까?

여기에 작은 JSON 개체를 새 변수로 전달하고 원래 변수(새 변수가 아님)의 데이터를 수정하는 빠른 jsfidle을 작성했지만 새 변수의 데이터도 업데이트됩니다.이것은 JSON 객체가 참조를 통해 전달되었다는 것을 의미하는 것이 틀림없죠?

내 빠른 코드는 다음과 같습니다.

var json_original = {one:'one', two:'two'}

var json_new = json_original;

console.log(json_original); //one, two
console.log(json_new); //one, two

json_original.one = 'two';
json_original.two = 'one';

console.log(json_original); //two, one
console.log(json_new); //two, one

원래 변수를 수정해도 새 변수가 수정되지 않도록 JSON 개체의 딥 카피를 만드는 방법이 있습니까?

편집: 이 대답은 2014년에 만들어졌으며, 현재 개체를 딥 클로닝하는나은 방법이 있습니다.


jQuery를 사용하지 않고 단순 개체 복제에만 관심이 있다면 다음과 같은 기능이 있다는 것을 알게 되었습니다(댓글 참조).

JSON.parse(JSON.stringify(json_original));

문서화

유일한 방법은 개체를 복제하는 것입니다.

이를 달성하는 방법에 대한 이 스택 오버플로 질문을 참조하십시오.

간단한 JSON 객체의 경우 가장 간단한 방법은 다음과 같습니다.

var newObject = JSON.parse(JSON.stringify(oldObject));

jQuery를 사용하는 경우 다음을 사용할 수 있습니다.

// Shallow copy
var newObject = jQuery.extend({}, oldObject);

// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);

업데이트 2017: 이것은 인기 있는 답변이기 때문에 이제 새로운 버전의 Javascript를 사용하여 이를 달성할 수 있는 더 나은 방법이 있음을 언급해야 합니다.

ES6 또는 TypeScript(2.1+)의 경우:

var shallowCopy = { ...oldObject };

var shallowCopyWithExtraProp = { ...oldObject, extraProp: "abc" };

참고: 만약extraProp또한 oldObject의 속성입니다. 이 값은 다음과 같은 이유로 사용되지 않습니다.extraProp : "abc"식의 뒷부분에 지정되어 있으므로 기본적으로 재정의합니다.물론 oldObject는 수정되지 않습니다.

언급URL : https://stackoverflow.com/questions/18359093/how-to-copy-javascript-object-to-new-variable-not-by-reference

반응형