Transpondo um array 2D em JavaScript

Eu tenho uma matriz de matrizes, algo como:

[ [1,2,3], [1,2,3], [1,2,3], ] 

Eu gostaria de transpor para obter o seguinte array:

 [ [1,1,1], [2,2,2], [3,3,3], ] 

Não é difícil fazer programaticamente usando loops:

 function transposeArray(array, arrayLength){ var newArray = []; for(var i = 0; i < array.length; i++){ newArray.push([]); }; for(var i = 0; i < array.length; i++){ for(var j = 0; j < arrayLength; j++){ newArray[j].push(array[i][j]); }; }; return newArray; } 

Isso, no entanto, parece volumoso, e eu sinto que deveria haver uma maneira mais fácil de fazê-lo. Existe?

     array[0].map((col, i) => array.map(row => row[i])); 

    map chama uma function de callback fornecida uma vez para cada elemento em uma matriz, em ordem, e constrói uma nova matriz a partir dos resultados. callback é chamado apenas para índices da matriz que possui valores atribuídos; ele não é chamado para índices que foram excluídos ou que nunca receberam valores atribuídos.

    callback é invocado com três argumentos: o valor do elemento, o índice do elemento e o object Array sendo percorrido. [fonte]

    Você poderia usar underscore.js

     _.zip.apply(_, [[1,2,3], [1,2,3], [1,2,3]]) 

    aqui está minha implementação no navegador moderno (sem dependência):

     transpose = m => m[0].map((x,i) => m.map(x => x[i])) 

    caminho mais curto com lodash / underscore e es6 :

     _.zip(...matrix) 

    onde matrix poderia ser:

     const matrix = [[1,2,3], [1,2,3], [1,2,3]]; 

    Você pode fazer isso no local fazendo apenas uma passagem:

     function transpose(arr,arrLen) { for (var i = 0; i < arrLen; i++) { for (var j = 0; j  

    Puro e puro:

     [[0, 1], [2, 3], [4, 5]].reduce((prev, next) => next.map((item, i) => (prev[i] || []).concat(next[i]) ), []); // [[0, 2, 4], [1, 3, 5]] 

    As soluções anteriores podem levar a falhas no caso de uma matriz vazia ser fornecida.

    Aqui é como uma function:

     function transpose(array) { return array.reduce((prev, next) => next.map((item, i) => (prev[i] || []).concat(next[i]) ), []); } console.log(transpose([[0, 1], [2, 3], [4, 5]])); 

    Atualizar. Pode ser escrito ainda melhor com o operador de spread:

     const transpose = matrix => matrix.reduce(($, row) => row.map((_, i) => [...($[i] || []), row[i]]), [] ) 

    Apenas outra variação usando o Array.map . Usando índices permite transpor matrizes onde 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]; }); }); 

    Tudo o que há para transpor é mapear os elementos column-first e depois por row.

    Muitas boas respostas aqui! Eu os consolidei em uma resposta e atualizei alguns dos códigos para uma syntax mais moderna:

    One-liners inspirados por Fawad Ghafoor e Óscar Gómez Alcañiz

     function transpose(matrix) { return matrix[0].map((col, i) => matrix.map(row => row[i])); } function transpose(matrix) { return matrix[0].map((col, c) => matrix.map((row, r) => matrix[r][c])); } 

    Estilo de abordagem funcional com reduzir por Andrew Tatomyr

     function transpose(matrix) { return matrix.reduce((prev, next) => next.map((item, i) => (prev[i] || []).concat(next[i]) ), []); } 

    Lodash / sublinhado por 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]]) } 

    Abordagem de baunilha

     function transpose(matrix) { const rows = matrix.length, cols = matrix[0].length; const grid = []; for (let j = 0; j < cols; j++) { grid[j] = Array(rows); } for (let i = 0; i < rows; i++) { for (let j = 0; j < cols; j++) { grid[j][i] = matrix[i][j]; } } return grid; } 

    Abordagem Vanilla in-place ES6 inspirada por Emanuel Saringan

     function transpose(matrix) { for (var i = 0; i < matrix.length; i++) { for (var j = 0; j < 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 < matrix.length; i++) { for (var j = 0; j < i; j++) { [matrix[i][j], matrix[j][i]] = [matrix[j][i], matrix[i][j]]; } } } 

    Se você tem uma opção de usar a syntax Ramda JS e ES6, então aqui está outra maneira de fazer isso:

     const transpose = a => R.map(c => R.map(r => r[c], a), R.keys(a[0])); console.log(transpose([ [1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12] ])); // => [[1,5,9],[2,6,10],[3,7,11],[4,8,12]] 
      

    Edit: Esta resposta não iria transpor a matriz, mas girá-lo. Eu não li a pergunta cuidadosamente em primeiro lugar: D

    rotação no sentido horário e anti-horário:

      function rotateCounterClockwise(a){ var n=a.length; for (var i=0; i 

    Se usar o RamdaJS é uma opção, isso pode ser alcançado em uma linha: R.transpose(myArray)

    Você pode conseguir isso sem loops usando o seguinte.

    • Array
    • Array.prototype.map
    • Array.prototype.reduce
    • Array.prototype.join
    • String.prototype.split

    Parece muito elegante e não requer nenhuma dependência, como 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); } 

    Minificado

     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)} 

    Aqui está uma demonstração que eu joguei juntos. Observe a falta de loops 🙂

     // Create a 5 row, by 9 column matrix. var m = CoordinateMatrix(5, 9); // Make the matrix an irregular shape. m[2] = m[2].slice(0, 5); m[4].pop(); // Transpose and print the matrix. println(formatMatrix(transpose(m))); function Matrix(rows, cols, defaultVal) { return AbstractMatrix(rows, cols, function(r, i) { return arrayFill(cols, defaultVal); }); } function ZeroMatrix(rows, cols) { return AbstractMatrix(rows, cols, function(r, i) { return zeroFill(cols); }); } function CoordinateMatrix(rows, cols) { return AbstractMatrix(rows, cols, function(r, i) { return zeroFill(cols).map(function(c, j) { return [i, j]; }); }); } function AbstractMatrix(rows, cols, rowFn) { return zeroFill(rows).map(function(r, i) { return rowFn(r, i); }); } /** Matrix functions. */ function formatMatrix(matrix) { return matrix.reduce(function (result, row) { return result + row.join('\t') + '\n'; }, ''); } function copy(matrix) { return zeroFill(matrix.length).map(function(r, i) { return zeroFill(getMatrixWidth(matrix)).map(function(c, j) { return matrix[i][j]; }); }); } 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); } /** Array fill functions. */ function zeroFill(n) { return new Array(n+1).join('0').split('').map(Number); } function arrayFill(n, defaultValue) { return zeroFill(n).map(function(value) { return defaultValue || value; }); } /** Print functions. */ function print(str) { str = Array.isArray(str) ? str.join(' ') : str; return document.getElementById('out').innerHTML += str || ''; } function println(str) { print.call(null, [].slice.call(arguments, 0).concat(['
    '])); }
     #out { white-space: pre; } 
     

    ES6 1liners como:

     let invert = a => a[0].map((col, c) => a.map((row, r) => a[r][c])) 

    assim como o de Óscar, mas como você preferiria girá-lo no sentido horário:

     let rotate = a => a[0].map((col, c) => a.map((row, r) => a[r][c]).reverse()) 

    Eu achei as respostas acima difíceis de ler ou muito detalhadas, então eu mesmo escrevo uma. E acho que essa é a maneira mais intuitiva de implementar a transposição na álgebra linear, você não faz a troca de valores , mas apenas insere cada elemento no lugar certo na nova matriz:

     function transpose(matrix) { const rows = matrix.length const cols = matrix[0].length let grid = [] for (let col = 0; col < cols; col++) { grid[col] = [] } for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { grid[col][row] = matrix[row][col] } } return grid } 
     function invertArray(array,arrayWidth,arrayHeight) { var newArray = []; for (x=0;x 

    Eu acho que isso é um pouco mais legível. Ele usa Array.from e logic é idêntico ao uso de loops nesteds:

     var arr = [ [1, 2, 3, 4], [1, 2, 3, 4], [1, 2, 3, 4] ]; /* * arr[0].length = 4 = number of result rows * arr.length = 3 = number of result cols */ var result = Array.from({ length: arr[0].length }, function(x, row) { return Array.from({ length: arr.length }, function(x, col) { return arr[col][row]; }); }); console.log(result);