在 JavaScript 中转置二维数组

Question

我有一个数组数组，类似于：

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

我想转置得到如下数组：

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

使用循环以编程方式做到这一点并不难：

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

然而，这似乎很笨重，我觉得应该有一种更简单的方法来做到这一点。有吗？

Answer 1

array[0].map((_, colIndex) => array.map(row => row[colIndex]));

map 按顺序为数组中的每个元素调用一次提供的callback 函数，并根据结果构造一个新数组。 callback 仅对具有赋值的数组索引调用；它不会为已删除或从未被赋值的索引调用。

callback 使用三个参数调用：元素的值、元素的索引和被遍历的 Array 对象。 [source]

Answer 2

这是我在现代浏览器中的实现（不依赖）：

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

Answer 3

这里有很多好的答案！我将它们合并为一个答案，并更新了一些代码以获得更现代的语法：

受Fawad Ghafoor 和Ó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]));
}

带有reduce by Andrew Tatomyr的函数式方法风格

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

Lodash/下划线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]])
}

Vigrant 提供的更简单的 Lodash/Underscore 解决方案

_.unzip(matrix);

普通方法

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

受Emanuel Saringan启发的原版原位ES6方法

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]];
    }
  }
}

Answer 4

你可以使用underscore.js

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

Answer 5

lodash/underscore 和 es6 的最短路径：

_.zip(...matrix)

matrix 可能在哪里：

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

Answer 6

干净整洁：

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

如果提供了一个空数组，以前的解决方案可能会导致失败。

这是一个函数：

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]]));

更新。 使用扩展运算符可以写得更好：

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

Answer 7

你可以通过只做一次就地完成：

function transpose(arr,arrLen) {
  for (var i = 0; i < arrLen; i++) {
    for (var j = 0; j <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;
    }
  }
}

Answer 8

使用Array.map 的另一种变体。使用索引可以转置矩阵，其中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]; 
    }); 
});

所有的转置都是先映射元素列，然后按行。

Answer 9

另一种方法是从外到内迭代数组并通过映射内部值来减少矩阵。

const
    transpose = array => array.reduce((r, a) => a.map((v, i) => [...(r[i] || []), v]), []),
    matrix = [[1, 2, 3], [1, 2, 3], [1, 2, 3]];

console.log(transpose(matrix));

Answer 10

如果您可以选择使用 Ramda JS 和 ES6 语法，那么这里有另一种方法：

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]]

<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.22.1/ramda.min.js"></script>

Answer 11

如果使用RamdaJS 是一个选项，这可以在一行中实现：R.transpose(myArray)

Answer 12

您可以通过以下方式在不使用循环的情况下实现此目的。

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

它看起来非常优雅，并且不需要任何依赖，例如jQuery 或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);
}

缩小

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

---

这是我拼凑的一个演示。注意缺少循环:-)

// 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(['<br />']));
}

#out {
    white-space: pre;
}

<div id="out"></div>

Answer 13

ES6 1liner 为：

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

和 Óscar 的一样，但你宁愿顺时针旋转它：

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

Answer 14

我发现上面的答案要么难以阅读，要么太冗长，所以我自己写了一个。而且我认为这是在线性代数中实现转置的最直观的方式，你不做值交换，而只是将每个元素插入到新矩阵中的正确位置：

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
}

Answer 15

编辑：这个答案不会转置矩阵，而是旋转它。我一开始没有仔细阅读这个问题：D

顺时针和逆时针旋转：

    function rotateCounterClockwise(a){
        var n=a.length;
        for (var i=0; i<n/2; i++) {
            for (var j=i; j<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<n/2; i++) {
            for (var j=i; j<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;
    }

Answer 16

const transpose = array => array[0].map((r, i) => array.map(c => c[i]));
console.log(transpose([[2, 3, 4], [5, 6, 7]]));

Answer 17

Spread 语法不应用作 push 的替代品，仅应在您不想改变现有数组时使用。

算法： 对于每一列，只需检查该列是否在结果矩阵中有一行，如果已经有一行，则只需 push 元素，否则创建一个新行数组，然后 push。

因此，与上述许多其他解决方案不同，此解决方案不会一次又一次地创建新数组，而是推送到同一个数组上。

另外，请花点时间欣赏Nullish Coalescing Operator 的使用。

const 
  transpose = arr => arr.reduce((m, r) => (r.forEach((v, i) => (m[i] ??= [], m[i].push(v))), m), []),
  matrix = [[1, 2, 3], [1, 2, 3], [1, 2, 3]]

console.log(transpose(matrix))

Answer 18

我认为这更具可读性。它使用Array.from，逻辑与使用嵌套循环相同：

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

如果您正在处理长度不等的数组，则需要将 arr[0].length 替换为其他内容：

var arr = [
  [1, 2],
  [1, 2, 3],
  [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.reduce(function(max, item) { return item.length > max ? item.length : max; }, 0) }, function(x, row) {
  return Array.from({ length: arr.length }, function(x, col) {
    return arr[col][row];
  });
});

console.log(result);

Answer 19

由于到目前为止没有人提到函数式递归方法，所以我认为这是我的看法。改编自 Haskell 的 Data.List.transpose。

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

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

Answer 20

不改变给定数组的单线。

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

Answer 21

我没有找到一个让我满意的答案，所以我自己写了一个，我认为它易于理解和实施，适合所有情况。

    transposeArray: function (mat) {
        let newMat = [];
        for (let j = 0; j < mat[0].length; j++) {  // j are columns
            let temp = [];
            for (let i = 0; i < 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;
    }

Answer 22

这个，不仅是一个超级高效的解决方案，而且是一个非常短的解决方案。

算法时间复杂度：O(n log n)

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

matrix.every((r, i, a) => (
   r.every((_, j) => (
      j = a.length-j-1,
      [ r[j], a[j][i] ] = [ a[j][i], r[j] ],
      i < j-1
   )), 
   i < length-2
));

console.log(matrix);
/*
Prints:
[
   [1,2,3,4],
   [1,2,3,4],
   [1,2,3,4],
   [1,2,3,4]
]
*/

上面的示例将只进行 6 次迭代。
对于更大的矩阵，比如 100x100，它将进行 4,900 次迭代，这比此处提供的任何其他解决方案快 51%。

原理很简单，你只迭代矩阵的上对角线，因为对角线永远不会改变，下对角线与上半线一起切换，所以没有理由迭代它以及。这样，您可以节省大量运行时间，尤其是在大型矩阵中。

Answer 23

在此处添加 TS 版本。

const transpose = <T>(m: Array<Array<T>>): Array<Array<T>> => m[0].map((_, i) => m.map(x => x[i]));

Answer 24

function invertArray(array,arrayWidth,arrayHeight) {
  var newArray = [];
  for (x=0;x<arrayWidth;x++) {
    newArray[x] = [];
    for (y=0;y<arrayHeight;y++) {
        newArray[x][y] = array[y][x];
    }
  }
  return newArray;
}

Answer 25

reverseValues(values) {
        let maxLength = values.reduce((acc, val) => Math.max(val.length, acc), 0);
        return [...Array(maxLength)].map((val, index) => values.map((v) => v[index]));
}