Transpose a two dimensional (2D) array in JavaScript
Given a 2D array (matrix) and the task is to get the transpose of the matrix using JavaScript.
Approach 1:
- Store a 2D array into a variable.
- Display the 2D array (matrix) content.
- Call map() method which provides a callback function single time for every element in an array, maintaining the order and returns a new array (transpose of the original array) from the results.
Example: This example uses the array.map() method to get the transpose of the array.
HTML
<body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h3> Transpose a two dimensional (2D) array </h3> <p id="GFG_UP" style="font-size: 16px; font-family: sans-serif; font-weight: bold;"> </p> <button onclick="gfg_Run()"> Click here </button> <p id="GFG_DOWN" style="color:green; font-size: 30px; font-weight: bold;"> </p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); var array = [ [1, 1, 1], [2, 2, 2], [3, 3, 3], ]; el_up.innerHTML = "[ [ " + array[0] + " ] ], [ [ " + array[1] + " ] ], [ [ " + array[2] + " ] ]"; function transpose(mat) { for (var i = 0; i < mat.length; i++) { for (var j = 0; j < i; j++) { const tmp = mat[i][j]; mat[i][j] = mat[j][i]; mat[j][i] = tmp; } } } function gfg_Run() { array = array[0].map((col, i) => array.map(row => row[i])); el_down.innerHTML = "[ [ " + array[0] + " ] ], [ [ " + array[1] + " ] ], [ [ " + array[2] + " ] ]"; } </script></body> |
Output:
Approach 2:
- Store a 2D array into a variable.
- Replace every element in the array with its mirror image with respect to the diagonal of the array.
Example: This example creates a function that replaces every element with its mirror image to get the transpose of the array.
HTML
<body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2>Transpose a 2D array</h2> <p id="GFG_UP" style="font-size: 16px; font-family: sans-serif; font-weight: bold;"> </p> <button onclick="gfg_Run()"> Click here </button> <p id="GFG_DOWN" style="color:green; font-size: 30px; font-weight: bold;"> </p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); var array = [ [1, 1, 1], [2, 2, 2], [3, 3, 3], ]; el_up.innerHTML = "[ [ " + array[0] + " ] ], [ [ " + array[1] + " ] ], [ [ " + array[2] + " ] ]"; function transpose(mat) { for (var i = 0; i < mat.length; i++) { for (var j = 0; j < i; j++) { const tmp = mat[i][j]; mat[i][j] = mat[j][i]; mat[j][i] = tmp; } } } function gfg_Run() { transpose(array); el_down.innerHTML = "[ [ " + array[0] + " ] ], [ [ " + array[1] + " ] ], [ [ " + array[2] + " ] ]"; } </script></body> |
Output:
Please Login to comment...