JavaScript: How to Duplicate Multidimensional Arrays

Question

JavaScript: How to Duplicate Multidimensional Arrays

I am looking to create a duplicate of a multidimensional array in order to experiment with the cloned array without impacting the original array.

Here is the function I am currently using for this purpose:

Array.prototype.clone = function () { 
   var newArray = new Array(this.length);
     for(var i=0; i < this.length; i++ ){
        newArray[i] = this[i];
   }
   return newArray;
};

The issue with this approach is that it clones all arrays due to its usage of the array prototype. Can anyone suggest a better way to achieve this?

javascript arrays

Answer 1

Answer №1

vsync is absolutely correct, my initial response did not account for the scenario var a = [[1,2],[3,4]];
With that in mind, here is an enhanced and revised solution

var a = [[1,2],[3,4]];
Array.prototype.clone = function() {
    var arr = this.slice(0);
    for( var i = 0; i < this.length; i++ ) {
        if( this[i].clone ) {
            //recursive process
            arr[i] = this[i].clone();
        }
    }
    return arr;
}

var b = a.clone()

console.log(a);
console.log(b);

b[1][0] = 'a';

console.log(a);
console.log(b);

//[[1, 2], [3, 4]]
//[[1, 2], [3, 4]]
//[[1, 2], [3, 4]]
//[[1, 2], ["a", 4]]

Answer 2

vsync is absolutely correct, my initial response did not account for the scenario var a = [[1,2],[3,4]];
With that in mind, here is an enhanced and revised solution

var a = [[1,2],[3,4]];
Array.prototype.clone = function() {
    var arr = this.slice(0);
    for( var i = 0; i < this.length; i++ ) {
        if( this[i].clone ) {
            //recursive process
            arr[i] = this[i].clone();
        }
    }
    return arr;
}

var b = a.clone()

console.log(a);
console.log(b);

b[1][0] = 'a';

console.log(a);
console.log(b);

//[[1, 2], [3, 4]]
//[[1, 2], [3, 4]]
//[[1, 2], [3, 4]]
//[[1, 2], ["a", 4]]

Answer 3

Answer №2

To solve this problem, implementing recursion is essential

let numbers = [1, 2, [3, 4, [5, 6]]];

Array.prototype.copy = function() {
    let newArray = [];
    for(let j = 0; j < this.length; j++) {
        if(this[j].copy) {
            //recursive call
            newArray[j] = this[j].copy();
            break;
        }
        newArray[j] = this[j];
    }
    return newArray;
}

let copiedNumbers = numbers.copy();

console.log(numbers);
console.log(copiedNumbers);

copiedNumbers[2][0] = 'a';

console.log(numbers);
console.log(copiedNumbers);

/*
[1, 2, [3, 4, [5, 6]]]
[1, 2, [3, 4, [5, 6]]]
[1, 2, [3, 4, [5, 6]]]
[1, 2, ["a", 4, [5, 6]]]
*/

However, keep in mind that any other objects within the original array will be duplicated by reference

Answer 4

To solve this problem, implementing recursion is essential

let numbers = [1, 2, [3, 4, [5, 6]]];

Array.prototype.copy = function() {
    let newArray = [];
    for(let j = 0; j < this.length; j++) {
        if(this[j].copy) {
            //recursive call
            newArray[j] = this[j].copy();
            break;
        }
        newArray[j] = this[j];
    }
    return newArray;
}

let copiedNumbers = numbers.copy();

console.log(numbers);
console.log(copiedNumbers);

copiedNumbers[2][0] = 'a';

console.log(numbers);
console.log(copiedNumbers);

/*
[1, 2, [3, 4, [5, 6]]]
[1, 2, [3, 4, [5, 6]]]
[1, 2, [3, 4, [5, 6]]]
[1, 2, ["a", 4, [5, 6]]]
*/

However, keep in mind that any other objects within the original array will be duplicated by reference

Answer 5

Answer №3

I have discovered an alternative approach that outperforms meouw's method:

var source = [
  [1, 2, {c:1}],
  [3, 4, [5, 'a']]
];

// Extending "Array" primitive prototype with a new method:
Array.prototype.clone = function() {
  function isArr(elm) {
    return String(elm.constructor).match(/array/i) ? true : false;
  }

  function cloner(arr) {
    var arr2 = arr.slice(0),
        len = arr2.length;

    for (var i = 0; i < len; i++)
      if (isArr(arr2[i]))
        arr2[i] = cloner(arr2[i]);

    return arr2;
  }
  return cloner(this);
}

// Cloning the array
var copy = source.clone();

// Modifying the copied array
copy[0][0] = 999;

console.dir(source);
console.dir('**************');
console.dir(copy);

Another method that is capable of working exclusively with datasets containing primitive values (`String`, `Numbers`, `Objects`):

var source = [
  [1,2, {a:1}],
  ["a", "b", ["c", 1]]
];

// Cloning the "source" Array
var copy = JSON.parse(JSON.stringify(source));

// Modifying the copied array
copy[0][0] = 999;

// Displaying both arrays
console.dir(copy)
console.log('***********')
console.dir(source)

Answer 6

I have discovered an alternative approach that outperforms meouw's method:

var source = [
  [1, 2, {c:1}],
  [3, 4, [5, 'a']]
];

// Extending "Array" primitive prototype with a new method:
Array.prototype.clone = function() {
  function isArr(elm) {
    return String(elm.constructor).match(/array/i) ? true : false;
  }

  function cloner(arr) {
    var arr2 = arr.slice(0),
        len = arr2.length;

    for (var i = 0; i < len; i++)
      if (isArr(arr2[i]))
        arr2[i] = cloner(arr2[i]);

    return arr2;
  }
  return cloner(this);
}

// Cloning the array
var copy = source.clone();

// Modifying the copied array
copy[0][0] = 999;

console.dir(source);
console.dir('**************');
console.dir(copy);

Another method that is capable of working exclusively with datasets containing primitive values (`String`, `Numbers`, `Objects`):

var source = [
  [1,2, {a:1}],
  ["a", "b", ["c", 1]]
];

// Cloning the "source" Array
var copy = JSON.parse(JSON.stringify(source));

// Modifying the copied array
copy[0][0] = 999;

// Displaying both arrays
console.dir(copy)
console.log('***********')
console.dir(source)

JavaScript: How to Duplicate Multidimensional Arrays

Here is the function I am currently using for this purpose:

Answer №1

Answer №2

Answer №3

Another method that is capable of working exclusively with datasets containing primitive values (`String`, `Numbers`, `Objects`):

Similar questions

Include a fresh attribute to a current JSON within a FOR loop

Exploring the potential of Framework7 in Single Page Applications: optimizing performance by preloading

Executing a nested function as an Onclick event in an HTML document

Tips for updating the chosen value with jquery or javascript

Cannot access elements of a value type [String] using an NSNumber index?

Using Node.js and TypeScript to define custom data types has become a common practice among developers

Execute a Jquery function on every field

What are the recommended guidelines for using TypeScript effectively?

Using the forEach method, we can create multiple buttons in ReactJS and also access the onClick handler

Ways to efficiently populate HTML elements with JSON data

Ways to verify if the scroll bar of a user is not visible

Error: Attempting to assign a value to property 'x' of an undefined object has resulted in a TypeError

Encountering an issue while attempting to input a URL into the Iframe Src in Angular 2

Passing variable values from .post response to PHP: A guide

What is the process for creating a 3D scene using an SVG image?

How to keep text always locked to the front layer in fabric.js without constantly bringing it to the front

"Enhance Your Website with Dynamic List Item Animations in

Deleting a record in MongoDB based on a specific value present in a column

What is the best way to incorporate a .json configuration into the environment.ts file and access an API with Angular

manipulating arrays in Python

JavaScript: How to Duplicate Multidimensional Arrays

Here is the function I am currently using for this purpose:

Answer №1

Answer №2

Answer №3

Another method that is capable of working exclusively with datasets containing primitive values (String, Numbers, Objects):

Similar questions

Include a fresh attribute to a current JSON within a FOR loop

Exploring the potential of Framework7 in Single Page Applications: optimizing performance by preloading

Executing a nested function as an Onclick event in an HTML document

Tips for updating the chosen value with jquery or javascript

Cannot access elements of a value type [String] using an NSNumber index?

Using Node.js and TypeScript to define custom data types has become a common practice among developers

Execute a Jquery function on every field

What are the recommended guidelines for using TypeScript effectively?

Using the forEach method, we can create multiple buttons in ReactJS and also access the onClick handler

Ways to efficiently populate HTML elements with JSON data

Ways to verify if the scroll bar of a user is not visible

Error: Attempting to assign a value to property 'x' of an undefined object has resulted in a TypeError

Encountering an issue while attempting to input a URL into the Iframe Src in Angular 2

Passing variable values from .post response to PHP: A guide

What is the process for creating a 3D scene using an SVG image?

How to keep text always locked to the front layer in fabric.js without constantly bringing it to the front

"Enhance Your Website with Dynamic List Item Animations in

Deleting a record in MongoDB based on a specific value present in a column

What is the best way to incorporate a .json configuration into the environment.ts file and access an API with Angular

manipulating arrays in Python

Another method that is capable of working exclusively with datasets containing primitive values (`String`, `Numbers`, `Objects`):