Array of arrays being mutated with slice, spread, and map

Question

This question has been asked here and more importantly here. I tried all the answers and none solved my issue. It's very basic.

I have the following array. My various attempts at copying do not persist after splicing, or performing any destructive action. Even the copies are mutated. How can I copy this so the original version persists?

var arrs = [ [ 3 ], [ 7, 4 ], [ 2, 4, 6 ], [ 8, 5, 9, 3 ] ]

var arrsCopy1 = arrs.slice()

var arrsCopy2 = arrs.map(arr => {
  return arr
})

var arrsCopy3 = [...arrs]


//test one of the copies
arrsCopy3.forEach(arr => {
  return arr.splice(0, arr.length)
})
arrs, arrsCopy1, arrsCopy2, arrsCopy3 => [[],[],[],[]]

Here is a fiddle that demos my problem (using reverse() instead of splice)

Calling out myself for duplication https://stackoverflow.com/questions/41786946/splice-doesnt-copy-array-of-objects?noredirect=1&lq=1 — Mote Zart, Feb 28 '19 at 23:46

score 2 · Answer 1 · answered Feb 28 '19 at 23:51

You could do it recursively

const copyArr = (element) => {
    //If the element is a primitive
    if (element !== Object(element)) {
        return element;
    //The element is an array
    } else {
        return element.map(subelement => copyArr(subelement));
    }
}

score 0 · Accepted Answer · answered Feb 28 '19 at 23:44

0

Try using JSON methods:

var arrCopy = JSON.parse(JSON.stringify(arr));

answered Feb 28 '19 at 23:44

Jack Bashford

43,180
11
50
79

score 0 · Answer 3 · answered Feb 28 '19 at 23:45

0

I just found this and it seems to solve the issue.

I was thrown off my the JSON.parse.

var clonedArray = JSON.parse(JSON.stringify(originalArray));

answered Feb 28 '19 at 23:45

Mote Zart

861
3
17
33

1

Yes, serialize/deserialize should recreate all objects. – PM 77-1 Feb 28 '19 at 23:45

Array of arrays being mutated with slice, spread, and map

3 Answers3