Angular 2 + TypeScript로 배열을 복사합니다.

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));

이 기능(어레이에만 해당)

let objCopy2 = obj.slice()

이것은DariaTypeScript 2.1부터 작동하며 기본적으로 배열에서 각 요소를 복제하는 의 제안(질문에 대한 코멘트 참조):

this.clonedArray = theArray.map(e => ({ ... e }));

이것이 저에게 효과가 있습니다.

this.listCopy = Object.assign([], this.list);

질문을 올린 직후에 찾은 유일한 해결책은 배열을 반복해서 사용하는 것입니다.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);
}

이것이 최적이 아니라는 것을 압니다.그리고 더 좋은 해결책이 있는지 궁금합니다.

내부에 중첩된 객체가 있는 객체를 복제하는 깨끗한 방법은 lodash의 cloneDeep 메서드를 사용하는 것입니다.

Angular의 경우 다음과 같이 작업할 수 있습니다.

로대시 설치yarn add lodash아니면npm install lodash.

구성 요소에서 가져오기cloneDeep사용:

import * as cloneDeep from 'lodash/cloneDeep';
...
clonedObject = cloneDeep(originalObject);

당신의 빌드에 18kb가 추가된 것에 불과하므로 이점을 누릴 가치가 있습니다.

lodash의 클론 Deep을 사용하는 이유에 대해 더 많은 통찰력이 필요하다면 여기에 기사도 작성했습니다.

앵글 데브킷에서 딥 카피 방법을 찾았어요 아주 정상적이에요 그래서...당신은 그냥 당신 자신을 구현하거나 그것을 사용할 수도 있습니다.

저는 loadash를 사용하는 것을 선호합니다. 사용할 수 있는 객체와 배열 운영 방법이 많습니다.

import { deepCopy } from '@angular-devkit/core/src/utils/object';

export class AppComponent {
  source = {
    ....
  }
  constructor() {
     const newObject = deepCopy(this.source);
  }
}

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.8
@angular-devkit/build-angular     0.1000.8
@angular-devkit/build-optimizer   0.1000.8
@angular-devkit/build-webpack     0.1000.8
@angular-devkit/core              10.0.8
@angular-devkit/schematics        10.0.8
@angular/cli                      10.0.8
@ngtools/webpack                  10.0.8
@schematics/angular               10.0.8
@schematics/update                0.1000.8
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

이것은 제 것입니다.복잡한 경우에는 작동하지 않지만 단순한 개체 배열의 경우에는 충분합니다.

  deepClone(oldArray: Object[]) {
    let newArray: any = [];
    oldArray.forEach((item) => {
      newArray.push(Object.assign({}, item));
    });
    return newArray;
  }

또는 npm에서도 사용할 수 있는 GitHub project ts-deepcopy를 사용하여 개체를 복제하거나 아래의 코드 스니펫만 포함할 수 있습니다.

/**
 * 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;
};

JQuery를 사용하여 딥 복사를 수행할 수 있습니다.

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