JavaScript 개체의 복사본을 수정하면 원본 개체가 변경됩니다.

Question

objA를 objB

const objA = { prop: 1 },
const objB = objA;
objB.prop = 2;
console.log(objA.prop); // 1 대신 2를 기록합니다

배열에도 같은 문제가 있습니다

const arrA = [1, 2, 3],
const arrB = arrA;
arrB.push(4);
console.log(arrA.length); // `arrA`에는 3개가 아닌 4개의 요소가 있습니다.

Answer 1

요약하자면, JS 객체를 복사하는 방법에는 네 가지가 있습니다.

1. 일반 카피. 원본 개체의 속성을 변경하면 복사된 개체의 속성도 변경됩니다(그 반대의 경우도 마찬가지).

으아악

2. 얕은 카피. 원본 개체와 복사된 개체의 최상위 속성은 고유합니다. 그러나 중첩된 속성은 두 개체 간에 공유됩니다. 스프레드 연산자 ...{} 或 Object.assign()를 사용하세요.

으아악

3. 딥 카피. 모든 속성은 원본 객체와 복사된 객체에 고유하며 중첩된 속성도 마찬가지입니다. 전체 복사의 경우 객체를 JSON으로 직렬화하고 이를 다시 JS 객체로 구문 분석합니다.

으아악

4. 전체 딥 카피. 위의 기술을 사용하면 JSON의 잘못된 속성 값(예: 함수)이 삭제됩니다. 함수가 포함된 중첩 속성을 심층 복사하고 보존해야 한다면 lodash 과 같은 유틸리티 라이브러리를 살펴보는 것이 좋습니다.

으아악

5. 아래 Object.create()确实创建了一个新对象。这些属性在对象之间共享（更改其中一个也会更改另一个）。与普通副本的区别在于，属性被添加到新对象的原型 __proto__를 사용하세요. 원본 개체를 절대 변경하지 않을 때 얕은 복사본으로 사용할 수도 있지만, 이 동작이 특별히 필요한 경우가 아니면 위 방법 중 하나를 사용하는 것이 좋습니다.

Answer 2

분명히 당신은 var tempMyObj = myObj;문의 내용에 대해 약간의 오해를 갖고 있습니다.

JavaScript에서는 객체가 참조(보다 정확하게는 참조 값)로 전달되고 할당되므로 tempMyObj 和 myObj은 모두 동일한 객체에 대한 참조입니다.

여기에 무슨 일이 일어나고 있는지 시각화하는 데 도움이 되는 단순화된 그림이 있습니다

으아악

할당 후에 볼 수 있듯이 두 참조는 모두 동일한 개체를 가리킵니다.

하나는 수정하고 다른 하나는 수정하지 않으려면 사본을 생성해야 합니다.

으아악

이전 답변:

다음은 개체의 복사본을 만드는 몇 가지 다른 방법입니다

이미 jQuery를 사용하고 있으므로:

으아악

일반 JavaScript 사용

으아악

여기 및 여기

를 확인하세요.