각도2: 객체를 다른 객체로 복사하는 방법
각도 2를 이용해서 다른 물체에 복사하기 위해서 나를 도와줘.
각도에서, 나는 angule.copy()를 사용하여 오래된 물체의 느슨한 참조에 물체를 복사했다.하지만 각도 2에서 같은 것을 사용했을 때 오차 이하로 떨어졌을 때:
오류: 각도가 정의되지 않음.
해결책
Angul2는 TypeScript나 ES6와 같은 현대 기술을 기반으로 개발되었다.
그러니 그냥 하면 된다.let copy = Object.assign({}, myObject)
.
객체 할당 - 좋은 예.
중첩된 객체의 경우:let copy = JSON.parse(JSON.stringify(myObject))
let copy = Object.assign({}, myObject). as mentioned above
중첩된 개체에서는 작동하지 않을 겁니다.그래서 대안이 될 것이다.
let copy =JSON.parse(JSON.stringify(myObject))
앞에서 제시했듯이, 내부에 중첩된 물체가 있는 물체를 딥 카피하는 깨끗한 방법은 lodash의 클론Deep 방법을 사용하는 것이다.
Angul의 경우 다음과 같이 할 수 있다.
로다시를 설치하십시오.yarn add lodash
또는npm install lodash
.
구성 요소에서 가져오기cloneDeep
사용:
import * as cloneDeep from 'lodash/cloneDeep';
...
clonedObject = cloneDeep(originalObject);
18kb밖에 추가되지 않아 이점은 충분히 누릴 가치가 있다.
나는 또한 여기에 기사를 썼다. 만약 당신이 왜 lodash의 클론 Deep을 사용하는지에 대한 더 많은 통찰이 필요하다면.
스프레드 연산자를 사용하여 ECMAScript6의 각도에서 이 작업을 수행할 수 있다.
let copy = {...myObject};
let course = {
name: 'Angular',
};
let newCourse= Object.assign({}, course);
newCourse.name= 'React';
console.log(course.name); // writes Angular
console.log(newCourse.name); // writes React
중첩된 개체의 경우 타사 라이브러리를 사용하여 개체를 완전 복사하십시오.lodash의 경우 _.clone Deep()을 사용한다.
let newCourse= _.cloneDeep(course);
이거 먹어봐.
배열 복사 :
const myCopiedArray = Object.assign([], myArray);
개체 복사:
const myCopiedObject = Object.assign({}, myObject);
Loadsh는 객체 딥카피에 대처하기 위한 보편적인 표준 라이브러리다.재귀 알고리즘이야그것은 모든 것을 확인하고 주어진 물건에 대해 복사하는 것이다.이런 종류의 알고리즘을 쓰는 것은 더 오랜 시간이 걸릴 것이다.같은 것을 활용하는 것이 좋다.
object.assign은 단일 수준의 객체 참조에서만 작동한다.
모든 깊이에서 복사를 수행하려면 다음과 같이 사용하십시오.
let x = {'a':'a','b':{'c':'c'}};
let y = JSON.parse(JSON.stringify(x));
대신 라이브러리를 사용하려면loadash.js
도서관의
위에서부터 사이프에게 감사한다.나는 그의 제안을 시도해 보았는데, 내 코드를 작동시키기 위해 3일 동안 노력한 결과 그것이 매력적으로 작용했다.
this.sElectionFinal.subscribe((election) => {
const electionCopy = Object.assign({},election)
this.electionsFinal.push(electionCopy)})
참조URL: https://stackoverflow.com/questions/39506619/angular2-how-to-copy-object-into-another-object
'Programing' 카테고리의 다른 글
react native를 사용하여 장치 토큰 가져오기 (0) | 2022.04.05 |
---|---|
Vuex 작업에서 약속 반환 (0) | 2022.04.05 |
반응 구성 요소 방법을 유닛 테스트하는 방법 (0) | 2022.04.05 |
Python의 원시_input 함수 (0) | 2022.04.05 |
파일 업로드(vuetify) (0) | 2022.04.05 |