I know 10 different ways to clone an Array in Javascript, but none of them works as I want… Let me explain :
This is my array : const a = [1, new Date(), false, { date: new Date(), name: "John Doe" }]
Old For loop
const b = [];
for(let i = 0, len = a.length; i < len; i++) b[i] = a[i];
console.log(b); --> [ 1, Date Wed Jul 19 2023 10:35:21 GMT+0200 (heure d’été d’Europe centrale), false, { date: Date Wed Jul 19 2023 10:35:21 GMT+0200 (heure d’été d’Europe centrale), name: "John Doe" } ]
b[3].date = null;
console.log(a[3]); --> { date: null, name: "John Doe" }
So as you can see, it cloned well the Array, but when I manipulate the object inside the array, it changes the value in the initial array too
All other methods
All the other methods I know gave me the exact same problem
- Map method :
const b = a.map(x => x) - From method :
const b = Array.from(a) - From + map method :
const b = Array.from(a, x => x) - Slice method :
const b = a.slice() - Spread operator method :
const b = [ ...a ] - Concat method :
const b = a.concat([]) - Of method :
const b = Array.of(...a) - Object Assign method :
const b = Object.assign([], a)
JSON method
Fortunately there is one way to clone it loosing the refs which is :
const b = JSON.parse(JSON.stringify(a))
b[3].date = null
console.log(a[3]) --> { date: Date Wed Jul 19 2023 10:35:21 GMT+0200 (heure d’été d’Europe centrale), name: "John Doe" }
console.log(b) --> [ 1, "2023-07-19T08:35:21.419Z", false, { date: null, name: "John Doe" } ]
BUT as you can see, the problem is that my old Date type is now a String and I can’t manipulate it as a Date … So it’s not identical …
So what ?
Do you know any other method doing the job or should I write my own recursive method to clone an array and their object ?
Thanks a lot for your time and your help !
>Solution :
Actually, there is one function that can do the trick for you:
structuredClone
const a = [1, new Date(), false, { date: new Date(), name: "John Doe" }];
const b = structuredClone(a);
console.log(a === b) // false
b[3] = null;
console.log(a)
// [
// 1,
// "2023-07-19T08:46:59.195Z",
// false,
// {
// "date": "2023-07-19T08:46:59.195Z",
// "name": "John Doe"
// }
// ]
console.log(b)
// [
// 1,
// "2023-07-19T08:46:59.195Z",
// false,
// null
// ]