JavaScript에서 객체를 복제하는 3가지 방법

#JavaScript의 객체는 참조 값이므로 간단하게 = 을 사용하여 복사할 수 없습니다.하지만 걱정하지 마세요. 여기 세 가지 방법이 있어요. 대상을 복제할 수 있어요.👍

const food = { beef: '🥩', bacon: '🥓' }


// "Spread"
{ ...food }


// "Object.assign"
Object.assign({}, food)


// "JSON"
JSON.parse(JSON.stringify(food))

// RESULT:
// { beef: '🥩', bacon: '🥓' }

객체는 참조 유형입니다.

너의 첫 번째 문제는 아마도 whey를 사용할 수 없다는 것이다.우리가 이렇게 하면 무슨 일이 일어날지 봅시다.

const obj = {one: 1, two: 2};

const obj2 = obj;

console.log(
  obj,  // {one: 1, two: 2};
  obj2  // {one: 1, two: 2};
)

지금까지 두 대상은 같은 내용을 출력한 것 같다.그러니까 문제 없지, 그렇지?하지만 두 번째 객체를 편집하면 어떻게 되는지 살펴보겠습니다.

const obj2.three = 3;

console.log(obj2);
// {one: 1, two: 2, three: 3}; <-- ✅

console.log(obj);
// {one: 1, two: 2, three: 3}; <-- 😱

뭐?!내가 바뀌었어=. 그런데 왜obj2도 영향을 받았는지.객체가 참조 유형이기 때문입니다.따라서 obj 을 사용할 때 포인터를 메모리 공간에 복사합니다.인용 형식은 값을 포함하지 않습니다. 메모리의 값을 가리키는 바늘입니다.
이 분야에 대해 더 알고 싶으면 Gordon의 주 Watch and Code 과정을 보십시오.그것은 무료로 동영상을 등록하고 볼 수 있다.그는 아주 좋은 해석을 내놓았다.

전파 사용

spread를 사용하여 대상을 복제합니다.이것은 간단한 복사본이 될 것이니 주의하십시오.본 게시물까지 클론 객체의 확산 계산은 4단계입니다.그래서 아직 규범에 정식으로 나타나지 않았다.따라서 그것을 사용하려면 Babel (또는 유사한 것) 으로 컴파일해야 합니다.

const food = { beef: '🥩', bacon: '🥓' };

const cloneFood = { ...food };

console.log(cloneFood); 
// { beef: '🥩', bacon: '🥓' }

객체를 사용합니다.할당

또는 = 공식 발표된 버전에서도 대상의 얕은 복사본을 만들 수 있다.

const food = { beef: '🥩', bacon: '🥓' };

const cloneFood = Object.assign({}, food);

console.log(cloneFood);
// { beef: '🥩', bacon: '🥓' }

JSON 사용

마지막 방법은 깊이 있는 복제를 제공합니다.지금 내가 언급하고자 하는 것은 이것이 신속하고 더러운 깊이 있는 복제 대상의 방법이다.더 튼튼한 해결 방안에 대해 나는 lodash 같은 도구를 사용하는 것을 건의한다

const food = { beef: '🥩', bacon: '🥓' };

const cloneFood = JSON.parse(JSON.stringify(food))

console.log(cloneFood); 
// { beef: '🥩', bacon: '🥓' }

Lodash DeepClone vs JSON

다음은 지역 사회의 평론이다.네, 이전 게시물입니다How to Deep Clone an Array.그러나 이 생각은 여전히 물체에 적용된다.
: deepClone과 JSON 사이에 약간의 차이가 있음을 알아차렸으면 합니다.문자열화/해석.

JSON.stringify/parse는 함수나 기호 속성을 처리하지 않고 숫자, 문자열, 대상 문자만 처리합니다.

deepClone은 참조를 통해 기능과 기호를 복사하는 모든 유형에 적용됩니다.

예:

const lodashClonedeep = require("lodash.clonedeep");

const arrOfFunction = [() => 2, {
    test: () => 3,
}, Symbol('4')];

// deepClone copy by refence function and Symbol
console.log(lodashClonedeep(arrOfFunction));
// JSON replace function with null and function in object with undefined
console.log(JSON.parse(JSON.stringify(arrOfFunction)));

// function and symbol are copied by reference in deepClone
console.log(lodashClonedeep(arrOfFunction)[0] === lodashClonedeep(arrOfFunction)[0]);
console.log(lodashClonedeep(arrOfFunction)[2] === lodashClonedeep(arrOfFunction)[2]);

: JSON 방법은 순환 의존에 문제가 있습니다.또한 클론 객체의 속성 순서가 다를 수 있습니다.

얕은 클론 및 깊은 클론

spread를 사용할 때...대상을 복제하기 위해서 나는 단지 간단한 복사본을 하나 만들었다.만약 수조가 끼워 넣거나 다차원적이라면, 그것은 작용하지 않을 것이다.살펴보겠습니다.

const nestedObject = {
  country: '🇨🇦',
  {
    city: 'vancouver'
  }
};

const shallowClone = { ...nestedObject };

// Changed our cloned object
clonedNestedObject.country = '🇹🇼'
clonedNestedObject.country.city = 'taipei';

그래서 우리는 도시를 바꾸어 우리의 복제 대상을 바꾸었다.출력을 봅시다.

console.log(shallowClone);
// {country: '🇹🇼', {city: 'taipei'}} <-- ✅

console.log(nestedObject);
// {country: '🇨🇦', {city: 'taipei'}} <-- 😱

얕은 층 복제는 첫 번째 층을 복제하고 더 깊은 층을 인용하는 것을 의미한다.

깊이 복사

동일한 예를 들자면 JSON을 사용하여 깊이 복사본을 적용합니다.

const deepClone = JSON.parse(JSON.stringify(nestedObject));

console.log(deepClone);
// {country: '🇹🇼', {city: 'taipei'}} <-- ✅

console.log(nestedObject);
// {country: '🇨🇦', {city: 'vancouver'}} <-- ✅

보시다시피 깊이 복사본은 중첩된 객체의 실제 복사본입니다.일반적인 상황에서는 얕은 복사만으로도 충분하지만, 당신은 정말로 깊은 복사를 필요로 하지 않는다.이것은 마치 못총과 망치 같다.대부분의 경우 망치가 좋다.일부 소공예품에서 못총을 사용하는 것은 왕왕 과도한 살상력이므로 망치로 하면 된다.이것은 모두 정확한 일을 위해 정확한 도구를 사용하는 것에 관한 것이다🤓

공연

불행하게도, 나는 spread를 위해 테스트를 작성할 수 없다. 왜냐하면 그것은 아직 규범에 정식으로 나타나지 않았기 때문이다.그럼에도 불구하고, 나는 테스트에 그것을 포함했기 때문에, 당신은 장래에 그것을 실행할 수 있습니다.그러나 그 결과 Object.assign 보다 훨씬 빨랐다.
Performance Test

지역사회 투입

대상할당 및 정렬

: 중요한 것은 이 대상을 주의하는 것이다.assign은 대상 대상을 수정하고 되돌려주는 함수입니다.Samantha의 예시에서 다음과 같은 내용을 사용하면,

const cloneFood = Object.assign({}, food)

Object.assign 는 수정된 객체입니다.목표 대상은 이 점에서 어떠한 변수에도 인용되지 않았지만, JSON 목표 대상을 되돌려주기 때문에, 우리는 결과에 분배된 대상을 {} 변수에 저장할 수 있다.예제를 전환하고 다음을 사용할 수 있습니다.

const food = { beef: '🌽', bacon: '🥓' };

Object.assign(food, { beef: '🥩' });

console.log(food);
// { beef: '🥩', bacon: '🥓' }

분명히 음식 대상Object.assign의 값이 틀렸기 때문에 우리는 cloneFood 지정된 beef 의 정확한 값을 사용할 수 있다.실제로 우리는 함수의 반환값을 전혀 사용하지 않았지만, 우리가 상량beef으로 인용한 목표 대상을 수정하고 있다.
한편, Spread는 객체의 속성을 새 객체로 복사하는 작업자입니다.만약 우리가spread를 사용하여 변수Object.assign를 수정하고 싶다면, 상술한 예시를 복사합니다

const food = { beef: '🌽', bacon: '🥓' };

food = {
  ...food,
  beef: '🥩',
}
// TypeError: invalid assignment to const `food'

food 우리는 오류를 얻었다. 왜냐하면 우리는 새로운 대상을 만들 때spread를 사용했기 때문에 새로운 대상을 food...에 분배했다. 이 대상은 ...로 성명한 것이다. 이것은 불법이다.따라서 다음과 같이 새 객체를 저장할 새 변수를 선언할 수 있습니다.

const food = { beef: '🌽', bacon: '🥓' };

const newFood = {
  ...food,
  beef: '🥩',
}

console.log(newFood);
// { beef: '🥩', bacon: '🥓' }

또는 food 또는 const 성명 food 을 사용하면 새로운 대상을 할당할 수 있습니다.

let food = { beef: '🌽', bacon: '🥓' };

food = {
  ...food,
  beef: '🥩',
}

console.log(food);
// { beef: '🥩', bacon: '🥓' }

감사합니다.

외부 라이브러리를 사용하여 깊이 있는 클론 생성

: 개인적으로 나는 let 함수

를 가진 jquery를 사용한다

: 밑줄.js ~~var

: 내가 아는 유일한 방법은 Lodash 라이브러리 cloneDeep 방법을 사용하는 것이다.

JavaScript를 사용하는 추가 방법

: $.extend(); [얕은] 클론 개체.

💬 너는 또 어떻게 대상을 복제하는지 아니?댓글에 올려주세요.🙃

리소스

MDN Web Docs: Object.assign

Stack Overflow: What is the most efficient way to deep clone an object in JavaScript?

2ality: Rest/Spread Properties

Stack Overflow: Object spread vs. Object.assign

읽어주셔서 감사합니다.❤
인사! |Facebook | Blog | SamanthaMing.com