Transposing a 2D-array in JavaScript

Question

I ve got an array of arrays  something like          1 2 3        1 2 3        1 2 3       I would like to transpose it to get the following array          1 1 1        2 2 2        3 3 3       It s not difficult to programmatically do so using loops   function transposeArray array  arrayLength       var newArray           for var i   0  i  lt  array length  i             newArray push                  for var i   0  i  lt  array length  i             for var j   0  j  lt  arrayLength  j                 newArray j  push array i  j                           return newArray      This  however  seems bulky  and I feel like there should be an easier way to do it  Is there

User · Answer

Since nobody so far mentioned a functional recursive approach here is my take. An adaptation of Haskell's Data.List.transpose.

_x000D_

var transpose = as => as.length ? as[0].length ? [as.reduce((rs, a) => a.length ? (rs.push(a[0]), rs) :
    rs, []
  ), ...transpose(as.map(a => a.slice(1)))] :
  transpose(as.slice(1)) :
  [],
  mtx = [
    [1],
    [1, 2],
    [1, 2, 3]
  ];

console.log(transpose(mtx))

_x000D_

.as-console-wrapper {
  max-height: 100% !important
}

_x000D_

User · Answer

You can do it in in-place by doing only one pass    function transpose arr arrLen      for  var i   0  i  lt  arrLen  i          for  var j   0  j  lt i  j              swap element i j  and element j i        var temp   arr i  j         arr i  j    arr j  i         arr j  i    temp

User · Answer

x000D   x000D  const transpose   array   gt  array 0  map  r  i    gt  array map c   gt  c i     x000D  console log transpose   2  3  4    5  6  7      x000D   x000D   x000D

User · Answer

One-liner that does not change given array   a 0  map  col  i    gt  a map      row     gt  row i

User · Answer

reverseValues values            let maxLength   values reduce  acc  val    gt  Math max val length  acc   0           return     Array maxLength   map  val  index    gt  values map  v    gt  v index

User · Answer

I found the above answers either hard to read or too verbose  so I write one myself  And I think this is most intuitive way to implement transpose in linear algebra  you don t do value exchange  but just insert each element into the right place in the new matrix   function transpose matrix      const rows   matrix length   const cols   matrix 0  length    let grid        for  let col   0  col  lt  cols  col          grid col             for  let row   0  row  lt  rows  row          for  let col   0  col  lt  cols  col            grid col  row    matrix row  col              return grid

User · Answer

function invertArray array arrayWidth arrayHeight      var newArray         for  x 0 x lt arrayWidth x          newArray x            for  y 0 y lt arrayHeight y              newArray x  y    array y  x               return newArray

User · Answer

Many good answers here  I consolidated them into one answer and updated some of the code for a more modern syntax   One-liners inspired by Fawad Ghafoor and   scar G  mez Alca  iz  function transpose matrix      return matrix 0  map  col  i    gt  matrix map row   gt  row i        function transpose matrix      return matrix 0  map  col  c    gt  matrix map  row  r    gt  matrix r  c         Functional approach style with reduce by Andrew Tatomyr  function transpose matrix      return matrix reduce  prev  next    gt  next map  item  i    gt       prev i         concat next i                 Lodash Underscore by marcel  function tranpose matrix      return   zip    matrix         Without spread operator  function transpose matrix      return   zip apply      1 2 3    1 2 3    1 2 3        Vanilla approach  function transpose matrix      const rows   matrix length  cols   matrix 0  length    const grid         for  let j   0  j  lt  cols  j          grid j    Array rows         for  let i   0  i  lt  rows  i          for  let j   0  j  lt  cols  j            grid j  i    matrix i  j               return grid      Vanilla in-place ES6 approach inspired by Emanuel Saringan  function transpose matrix      for  var i   0  i  lt  matrix length  i          for  var j   0  j  lt  i  j            const temp   matrix i  j         matrix i  j    matrix j  i         matrix j  i    temp                  Using destructing function transpose matrix      for  var i   0  i  lt  matrix length  i          for  var j   0  j  lt  i  j             matrix i  j   matrix j  i      matrix j  i   matrix i  j

User · Answer

here is my implementation in modern browser  without dependency    transpose   m   gt  m 0  map  x i    gt  m map x   gt  x i

User · Answer

You could use underscore js    zip apply      1 2 3    1 2 3    1 2 3

User · Answer

A library-free implementation in TypeScript that works for any matrix shape that won t truncate your arrays   const rotate2dArray    lt T gt  array2d  T        gt        const rotated2d  T               return array2d reduce  acc  array1d  index2d    gt            array1d forEach  value  index1d    gt                if   acc index1d   acc index1d                    acc index1d  index2d    value                     return acc        rotated2d

User · Answer

Another approach by iterating the array from outside to inside and reduce the matrix by mapping inner values    x000D   x000D  const x000D      transpose   array   gt  array reduce  r  a    gt  a map  v  i    gt       r i          v         x000D      matrix     1  2  3    1  2  3    1  2  3    x000D   x000D  console log transpose matrix    x000D   x000D   x000D

User · Answer

I didn t find an answer that satisfied me  so I wrote one myself  I think it is easy to understand and implement and suitable for all situations       transposeArray  function  mat            let newMat               for  let j   0  j  lt  mat 0  length  j          j are columns             let temp                   for  let i   0  i  lt  mat length  i          i are rows                 temp push mat i  j        so temp will be the j th  column in mat                           newMat push temp       then just push every column in newMat                   return newMat

User · Answer

ES6 1liners as    let invert   a   gt  a 0  map  col  c    gt  a map  row  r    gt  a r  c      so same as   scar s  but as would you rather rotate it clockwise     let rotate   a   gt  a 0  map  col  c    gt  a map  row  r    gt  a r  c   reverse

User · Answer

Neat and pure     0  1    2  3    4  5   reduce  prev  next    gt  next map  item  i    gt       prev i         concat next i                0  2  4    1  3  5     Previous solutions may lead to failure in case an empty array is provided   Here it is as a function   function transpose array        return array reduce  prev  next    gt  next map  item  i    gt           prev i         concat next i                  console log transpose   0  1    2  3    4  5        Update  It can be written even better with spread operator   const transpose   matrix   gt  matrix reduce          row    gt  row map     i    gt         i          row i

User · Answer

Just another variation using Array map  Using indexes allows to transpose matrices where M    N      Get just the first row to iterate columns first var t   matrix 0  map function  col  c           For each column  iterate all rows     return matrix map function  row  r             return matrix r  c                   All there is to transposing is mapping the elements column-first  and then by row

User · Answer

You can achieve this without loops by using the following    Array Array prototype map Array prototype reduce Array prototype join String prototype split   It looks very elegant and it does not require any dependencies such as jQuery of Underscore js   function transpose matrix          return zeroFill getMatrixWidth matrix   map function r  i            return zeroFill matrix length  map function c  j                return matrix j  i                          function getMatrixWidth matrix        return matrix reduce function  result  row            return Math max result  row length          0      function zeroFill n        return new Array n 1  join  0   split     map Number       Minified  function transpose m  return zeroFill m reduce function m r  return Math max m r length   0   map function r i  return zeroFill m length  map function c j  return m j  i      function zeroFill n  return new Array n 1  join  0   split     map Number       Here is a demo I threw together  Notice the lack of loops  -    x000D   x000D     Create a 5 row  by 9 column matrix  x000D  var m   CoordinateMatrix 5  9   x000D   x000D     Make the matrix an irregular shape  x000D  m 2    m 2  slice 0  5   x000D  m 4  pop    x000D   x000D     Transpose and print the matrix  x000D  println formatMatrix transpose m     x000D   x000D  function Matrix rows  cols  defaultVal    x000D      return AbstractMatrix rows  cols  function r  i    x000D          return arrayFill cols  defaultVal   x000D          x000D    x000D  function ZeroMatrix rows  cols    x000D      return AbstractMatrix rows  cols  function r  i    x000D          return zeroFill cols   x000D          x000D    x000D  function CoordinateMatrix rows  cols    x000D      return AbstractMatrix rows  cols  function r  i    x000D          return zeroFill cols  map function c  j    x000D              return  i  j   x000D              x000D          x000D    x000D  function AbstractMatrix rows  cols  rowFn    x000D      return zeroFill rows  map function r  i    x000D          return rowFn r  i   x000D          x000D    x000D      Matrix functions     x000D  function formatMatrix matrix    x000D      return matrix reduce function  result  row    x000D          return result   row join   t       n   x000D              x000D    x000D  function copy matrix      x000D      return zeroFill matrix length  map function r  i    x000D          return zeroFill getMatrixWidth matrix   map function c  j    x000D              return matrix i  j   x000D              x000D          x000D    x000D  function transpose matrix      x000D      return zeroFill getMatrixWidth matrix   map function r  i    x000D          return zeroFill matrix length  map function c  j    x000D              return matrix j  i   x000D              x000D          x000D    x000D  function getMatrixWidth matrix    x000D      return matrix reduce function  result  row    x000D          return Math max result  row length   x000D         0   x000D    x000D      Array fill functions     x000D  function zeroFill n    x000D    return new Array n 1  join  0   split     map Number   x000D    x000D  function arrayFill n  defaultValue    x000D      return zeroFill n  map function value    x000D          return defaultValue    value  x000D          x000D    x000D      Print functions     x000D  function print str    x000D      str   Array isArray str    str join        str  x000D      return document getElementById  out   innerHTML    str        x000D    x000D  function println str    x000D      print call null     slice call arguments  0  concat    lt br   gt       x000D    x000D   out   x000D      white-space  pre  x000D    x000D   lt div id  out  gt  lt  div gt  x000D   x000D   x000D

User · Answer

I think this is slightly more readable  It uses Array from and logic is identical to using nested loops    x000D   x000D  var arr     x000D     1  2  3  4   x000D     1  2  3  4   x000D     1  2  3  4  x000D     x000D   x000D     x000D     arr 0  length   4   number of result rows x000D     arr length   3   number of result cols x000D      x000D   x000D  var result   Array from   length  arr 0  length    function x  row    x000D    return Array from   length  arr length    function x  col    x000D      return arr col  row   x000D        x000D      x000D   x000D  console log result   x000D   x000D   x000D    If you are dealing with arrays of unequal length you need to replace arr 0  length with something else    x000D   x000D  var arr     x000D     1  2   x000D     1  2  3   x000D     1  2  3  4  x000D     x000D   x000D     x000D     arr 0  length   4   number of result rows x000D     arr length   3   number of result cols x000D      x000D   x000D  var result   Array from   length  arr reduce function max  item    return item length  gt  max   item length   max     0     function x  row    x000D    return Array from   length  arr length    function x  col    x000D      return arr col  row   x000D        x000D      x000D   x000D  console log result   x000D   x000D   x000D

User · Answer

shortest way with lodash underscore and es6     zip    matrix    where matrix could be   const matrix     1 2 3    1 2 3    1 2 3

User · Answer

Edit  This answer would not transpose the matrix  but rotate it  I didn t read the question carefully in the first place  D  clockwise and counterclockwise rotation       function rotateCounterClockwise a           var n a length          for  var i 0  i lt n 2  i                  for  var j i  j lt n-i-1  j                      var tmp a i  j                   a i  j  a j  n-i-1                   a j  n-i-1  a n-i-1  n-j-1                   a n-i-1  n-j-1  a n-j-1  i                   a n-j-1  i  tmp                                  return a             function rotateClockwise a            var n a length          for  var i 0  i lt n 2  i                  for  var j i  j lt n-i-1  j                      var tmp a i  j                   a i  j  a n-j-1  i                   a n-j-1  i  a n-i-1  n-j-1                   a n-i-1  n-j-1  a j  n-i-1                   a j  n-i-1  tmp                                  return a

User · Answer

array 0  map     colIndex    gt  array map row   gt  row colIndex          map calls a provided callback function once for each element in an array  in order  and constructs a new array from the results  callback is invoked only for indexes of the array which have assigned values  it is not invoked for indexes which have been deleted or which have never been assigned values       callback is invoked with three arguments  the value of the element  the index of the element  and the Array object being traversed   source

User · Answer

If using RamdaJS is an option  this can be achieved in one line   R transpose myArray

User · Answer

If you have an option of using Ramda JS and ES6 syntax  then here s another way to do it    x000D   x000D  const transpose   a   gt  R map c   gt  R map r   gt  r c   a   R keys a 0     x000D   x000D  console log transpose   x000D     1  2  3  4   x000D     5  6  7  8   x000D     9  10  11  12  x000D            gt     1 5 9   2 6 10   3 7 11   4 8 12   x000D   lt script src  https   cdnjs cloudflare com ajax libs ramda 0 22 1 ramda min js  gt  lt  script gt  x000D   x000D   x000D

[javascript] Transposing a 2D-array in JavaScript

Examples related to javascript

Examples related to arrays

Examples related to matrix

Examples related to transpose