javascript - Djupkopiera en array i Angular 2 + TypeScript

Jag har en array av objekt som är en ingång. Låt oss kalla den content.

När man försöker göra en djup kopia av det, har det fortfarande en referens till den föregående arrayen.

Jag behöver duplicera den input-arrayen och ändra en egenskap hos den duplicerade delen.

Så länge har jag försökt olika metoder som inte var framgångsrika.

ES6-sätt:

public duplicateArray() {
  arr = [...this.content]
  arr.map((x) => {x.status = DEFAULT});
  return this.content.concat(arr);
}

Sättet med slice:

public duplicateArray() {
  arr = this.content.slice(0);
  arr.map((x) => {x.status = DEFAULT});
  return this.content.concat(arr);
}

I båda har alla objekt i arrayen status: 'Default'.

Vad är det bästa sättet att göra en djup kopia av arrayen i Angular 2?

Svar #1

Kolla detta:

  let cloned = source.map(x => Object.assign({}, x));

Svar #2

Enkel :

let objCopy  = JSON.parse(JSON.stringify(obj));

Detta fungerar också (endast för arrayer)

let objCopy2 = obj.slice()

Svar #3

Detta är Daria's förslag (se kommentaren på frågan) som fungerar från och med TypeScript 2.1 och i princip klonar varje element från arrayen:

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

Svar #4

Detta fungerar för mig:

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

Svar #5

Den enda lösningen jag har hittat (nästan omedelbart efter att ha ställt frågan) är att loopa igenom arrayen och använda Object.assign()

Så här:

public duplicateArray() {
  let arr = [];
  this.content.forEach((x) => {
    arr.push(Object.assign({}, x));
  })
  arr.map((x) => {x.status = DEFAULT});
  return this.content.concat(arr);
}

Jag vet att detta inte är optimalt. Och jag undrar om det finns några bättre lösningar.

Svar #6

Ett rent sätt att djupkopiera objekt som har inbäddade objekt inuti är att använda lodashes cloneDeep-metod.

För Angular kan du göra det så här:

Installera lodash med yarn add lodash eller npm install lodash.

I din komponent, importera cloneDeep och använd det:

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

Det är bara 18 kb som läggs till din build, väl värt fördelarna.

Jag har också skrivit en artikel här, om du behöver mer insikt om varför man använder lodashes cloneDeep.