Programing

Angular 2 + TypeScript에서 배열 전체 복사

lottogame 2020. 12. 10. 08:25
반응형

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

반응형