I tried this approach:
this.plans = [];
this.plansCopy = [...this.plans];
Seems it does not work cause returns duplictions.
Asked
Active
Viewed 2.2k times
10
-
2What do you mean it returns duplications? – Explosion Pills Dec 12 '17 at 16:03
2 Answers
26
The spread operator returns the individual items of the array. If these are already objects, then it's returning the references to those objects. It's the [] part that is creating a new array. Thus you have a new array, but it will still contain the same object references, so this.plans[0].oper() will call this.plansCopy[0].oper() at the same time as well.
Instead you need to clone each individual object. There are a lot of different ways to do this (create deep copy of the array or individual objects). If you only need one level of cloning you can do:
this.plansCopy = this.plans.map(obj => ({...obj}));
This will create a new array where each element is a copy of each object.
Explosion Pills
- 188,624
- 52
- 326
- 405
-
-
What does it mean? `map(obj => ({...obj}));`? you mean? map(obj => ({ return obj})); ? – Alice Dec 12 '17 at 16:12
-
@Alice what do you mean I missed main? Can you update your question with an example of duplications that are returned? – Explosion Pills Dec 12 '17 at 16:12
-
@Alice `.map(obj => ({...obj}))` is the same as `.map(obj => { return {...obj}; })` – Explosion Pills Dec 12 '17 at 16:13
-
-
"..." is a [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) – spinalfrontier Jun 25 '19 at 08:15
10
This is well answered here. The main problem is that you can have the issue of copying a reference, rather than duplicating it, at deeper levels of the array. If you know you only have simple objects, you can also use
const newArray = Array.from(oldArray);
which I find clearer than the spread operator.
However, if you don't know how deep the complexity of your array goes (i.e. how deeply nested you might have a non-simple type) the generic answer seems to be
this.backupData = JSON.parse(JSON.stringify(genericItems));
As this will go all the way down the array's objects, and build them back up -- cloning for the general case.
