Guide to converting a two-dimensional square matrix stored as a one-dimensional array in JavaScript

Question

Guide to converting a two-dimensional square matrix stored as a one-dimensional array in JavaScript

My inquiry is similar to the one linked below, however, I am seeking a solution using JavaScript

How to Transpose 2D Matrix Stored as C 1D Array

In essence, I have a square matrix in two dimensions

1 2 3
4 5 6
7 8 9

This matrix is stored like this

let anArray = [1 ,2, 3, 4, 5, 6, 7, 8, 9]

Is there a way to transpose this matrix so that the order of elements in my source array changes according to the following pattern?

let newArray = [1, 4, 7, 2, 5, 8, 3, 6, 9]

javascript arrays

Answer 1

Answer №1

To create a new array based on the dimension of an existing array, you can map items to specific indexes.

var originalArray = [1 ,2, 3, 4, 5, 6, 7, 8, 9],
    length = Math.sqrt(originalArray.length),
    newArray = originalArray.map((_, index, arr) => arr[(index % length) * length + Math.floor(index / length)]);
    
console.log(newArray.join(' '));

Answer 2

To create a new array based on the dimension of an existing array, you can map items to specific indexes.

var originalArray = [1 ,2, 3, 4, 5, 6, 7, 8, 9],
    length = Math.sqrt(originalArray.length),
    newArray = originalArray.map((_, index, arr) => arr[(index % length) * length + Math.floor(index / length)]);
    
console.log(newArray.join(' '));

Answer 3

Answer №2

The technique mentioned in the provided answer can also be applied successfully in JavaScript.

For a 3 x 3 matrix:

const numberArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];

let newMatrix = [];
for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    newMatrix[3 * i + j] = numberArray[3 * j + i];
  }
}

console.log(newMatrix);

For an N x N matrix, simply replace the occurrences of 3 with N.

This approach eliminates the need for division and integer division, and it is expected to perform well with a decent optimizer. Initializing the new array with

let newMatrix = new Array(9);

or

let newMatrix = new Array(N * N);

can be considered, but it is recommended to profile the code before implementing such "optimizations."

Answer 4

The technique mentioned in the provided answer can also be applied successfully in JavaScript.

For a 3 x 3 matrix:

const numberArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];

let newMatrix = [];
for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    newMatrix[3 * i + j] = numberArray[3 * j + i];
  }
}

console.log(newMatrix);

For an N x N matrix, simply replace the occurrences of 3 with N.

This approach eliminates the need for division and integer division, and it is expected to perform well with a decent optimizer. Initializing the new array with

let newMatrix = new Array(9);

or

let newMatrix = new Array(N * N);

can be considered, but it is recommended to profile the code before implementing such "optimizations."

Answer 5

Answer №3

let newArray1 = [];
let newArray2 = [];

for(let a=0; a<matrix.length; a++) {
    for(let b=0; b<matrix[a].length; b++) {
        newArray1.push(matrix[a][b]);
    }
}

for(let b=0; b<matrix[a].length; b++) {
    for(let a=0; a<matrix.length; a++) {
        newArray2.push(matrix[a][b]);
    }
}

Answer 6

let newArray1 = [];
let newArray2 = [];

for(let a=0; a<matrix.length; a++) {
    for(let b=0; b<matrix[a].length; b++) {
        newArray1.push(matrix[a][b]);
    }
}

for(let b=0; b<matrix[a].length; b++) {
    for(let a=0; a<matrix.length; a++) {
        newArray2.push(matrix[a][b]);
    }
}

Answer 7

Answer №4

To optimize your matrix, set a maximum "width" and organize it into a new array sequentially with an offset of 1 for each iteration.

function transformMatrix(data, width) {
  if (width === void 0) {
    width = 1;
  }
  var t = 0;
  var transformedArray = [];
  while (t < width) {
    for (var index = t; index < data.length; index += width) {
      transformedArray.push(data[index]);
    }
    t++;
  }
  return transformedArray;
}
//TEST
var originalArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var transformedResult = transformMatrix(originalArray, 3);
console.log(originalArray.join());
console.log(transformedResult.join());

Answer 8

To optimize your matrix, set a maximum "width" and organize it into a new array sequentially with an offset of 1 for each iteration.

function transformMatrix(data, width) {
  if (width === void 0) {
    width = 1;
  }
  var t = 0;
  var transformedArray = [];
  while (t < width) {
    for (var index = t; index < data.length; index += width) {
      transformedArray.push(data[index]);
    }
    t++;
  }
  return transformedArray;
}
//TEST
var originalArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var transformedResult = transformMatrix(originalArray, 3);
console.log(originalArray.join());
console.log(transformedResult.join());

Guide to converting a two-dimensional square matrix stored as a one-dimensional array in JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Executing gruntfile from the devDependencies module

Is it possible to translate the content of the page into English and French simply by clicking on the designated buttons?

encountering a problem while trying to run `npm install react-native-modal-datetime-picker` in the terminal

Python Error: Array Index Mismatch causing ValueError

When referencing an object in AngularJS that is defined within the $scope, it is important to

Can you explain the different types of dynamic page props available in a Next.js application?

Cypress - Mastering negative lookaheads in Regular Expressions

Automatically update div content using AJAX in a different approach

Allow Vue to handle the registration of the datepicker event

Error: The dynamic selection function is experiencing an issue where it is unable to read the "map" property of an undefined

Filling form fields with array data (AngularJS)

Syntax error: Unexpected character encountered in JavaScript code

{ Node.js and Express - Preventing Duplicate Requests } How to fix the issue of sending client-side requests twice

Executing a post request after redirection in a node.js application

How to use jQuery to change the background color of HTML table cells based on their content value

Retrieving full data from the database using Backbone.js

Implement an AJAX function to prompt a save dialog before initiating the download process

Issue with Axios in my React Application: Unidentified SyntaxError

Using React to pass a link into a reusable component

The response from a Fetch API POST request comes back as a blank text