Angular 2 + TypeScript에서 배열 전체 복사
입력 인 객체 배열이 있습니다. 그것을 부르 자 content
.
깊은 복사를 시도 할 때 여전히 이전 배열에 대한 참조가 있습니다.
해당 입력 배열을 복제하고 복제 된 부분의 속성 하나를 변경해야합니다.
오랫동안 나는 성공하지 못한 다른 방법을 시도했습니다.
ES6 방법 :
public duplicateArray() {
arr = [...this.content]
arr.map((x) => {x.status = DEFAULT});
return this.content.concat(arr);
}
slice
방법 :
public duplicateArray() {
arr = this.content.slice(0);
arr.map((x) => {x.status = DEFAULT});
return this.content.concat(arr);
}
둘 다에서 배열 내부의 모든 객체에는 status: 'Default'
.
Angular 2에서 배열을 딥 복사하는 가장 좋은 방법은 무엇입니까?
이것을 확인하십시오 :
let cloned = source.map(x => Object.assign({}, x));
단순한:
let objCopy = JSON.parse(JSON.stringify(obj));
내가 찾은 유일한 해결책은 (질문을 게시 한 직후) 배열을 반복하고 사용하는 것입니다. Object.assign()
이렇게 :
public duplicateArray() {
let arr = [];
this.content.forEach((x) => {
arr.push(Object.assign({}, x));
})
arr.map((x) => {x.status = DEFAULT});
return this.content.concat(arr);
}
이것이 최적이 아니라는 것을 알고 있습니다. 그리고 더 나은 해결책이 있는지 궁금합니다.
이것은 나를 위해 일하고 있습니다.
this.listCopy = Object.assign([], this.list);
내부에 중첩 된 개체가있는 개체를 전체적으로 복사하는 깨끗한 방법은 lodash의 cloneDeep 메서드를 사용하는 것입니다.
Angular의 경우 다음과 같이 할 수 있습니다.
yarn add lodash
또는로 lodash를 설치합니다 npm install lodash
.
구성 요소에서 가져 와서 cloneDeep
사용하십시오.
import * as cloneDeep from 'lodash/cloneDeep';
...
clonedObject = cloneDeep(originalObject);
빌드에 18kb 만 추가되어 혜택을받을 가치가 있습니다.
lodash의 cloneDeep을 사용하는 이유에 대한 더 많은 통찰력이 필요한 경우 여기 에 기사를 작성했습니다 .
이것은 TypeScript 2.1Daria
부터 작동 하고 기본적으로 배열의 각 요소를 복제 하는 제안입니다 (질문에 대한 주석 참조) .
this.clonedArray = theArray.map(e => ({ ... e }));
여기 내 것이 있습니다. 복잡한 경우에는 작동하지 않지만 단순한 객체 배열에는 충분합니다.
deepClone(oldArray: Object[]) {
let newArray: any = [];
oldArray.forEach((item) => {
newArray.push(Object.assign({}, item));
});
return newArray;
}
let newArr = arr.slice();
이것은 JS 배열이 복사되는 방법입니다. 새로운 것을 생각할 필요가 없습니다!
let originalArray :string[] = ['one', 'two', 'Sc-fi'];
let cloneArray :string[] = originalArray.concat([]);
Alternatively, you can use the GitHub project ts-deepcopy, which is also available on npm, to clone your object, or just include the code snippet below.
/**
* Deep copy function for TypeScript.
* @param T Generic type of target/copied value.
* @param target Target value to be copied.
* @see Source project, ts-deepcopy https://github.com/ykdr2017/ts-deepcopy
* @see Code pen https://codepen.io/erikvullings/pen/ejyBYg
*/
export const deepCopy = <T>(target: T): T => {
if (target === null) {
return target;
}
if (target instanceof Date) {
return new Date(target.getTime()) as any;
}
if (target instanceof Array) {
const cp = [] as any[];
(target as any[]).forEach((v) => { cp.push(v); });
return cp.map((n: any) => deepCopy<any>(n)) as any;
}
if (typeof target === 'object' && target !== {}) {
const cp = { ...(target as { [key: string]: any }) } as { [key: string]: any };
Object.keys(cp).forEach(k => {
cp[k] = deepCopy<any>(cp[k]);
});
return cp as T;
}
return target;
};
you can use use JQuery for deep copying :
var arr =[['abc'],['xyz']];
var newArr = $.extend(true, [], arr);
newArr.shift().shift();
console.log(arr); //arr still has [['abc'],['xyz']]
참고URL : https://stackoverflow.com/questions/35504310/deep-copy-an-array-in-angular-2-typescript
'Programing' 카테고리의 다른 글
Linux 커널 소스 트리의 버전은 어디에서 찾을 수 있습니까? (0) | 2020.12.10 |
---|---|
개체에서 모든 속성 제거 (0) | 2020.12.10 |
OpenID를 사용하지 않는 이유는 무엇입니까? (0) | 2020.12.10 |
Netbeans에서 파일 검색 속도 향상 (0) | 2020.12.10 |
fullcalendar에 더 많은 텍스트 표시 (0) | 2020.12.10 |