二维数组上的 Javascript 映射

Question

I have this array:

rows = [ [ 89, 18, 9 ], [ 1903, 3, 4 ], [ 3, 1, 800 ] ];

It should look like this:

[ [ 89, 1903, 3 ], [ 18, 3, 1 ], [ 9, 4, 800 ] ]

And the code, that is working, looks like this:

rows[0].map((_, columnIndex) => rows.map(
            row => row[columnIndex])
        );

How does this work?

Answer 1

I'll assume you are simply not accustomed to the particular language features being used here, hence why you can't follow what is going on, so here goes:

• Your structure is a nested Array . Hence the nested Array.map s.

• Both map callbacks make use of implicit return .

which unfolds to this:

rows[0].map((row, index) => {
  return rows.map((column) => {
    return column[index]
  })
})

The 2 arguments passed to the map callback are the following:

• element : The currently iterated Array element; In your first map this is the row argument.
• i : The current iteration number, starting from 0; In your first map this is the index argument.

That's all there is to it. From then on you just follow the iterations and the values of each argument at each iteration.

Answer 2

                  +--- The outter function map gets the first array to loop through the rows
[ 89,   18, 9   ] |
[ 1903, 3,  4   ] |
[ 3,    1,  800 ] v
  +--->
  |
  +- The nested function map is looping through the columns.
     The key here is the fixed column using index (column[index])
     from the outter function map, so every iteration from the outter
     function map will fix the access to that column, i.e -
     index = 0 will access the array as follow: array[j][0], array[j+1, 0], ... array[n, 0]
                                                         ^              ^                ^

This is an approach to illustrate what's happening using direct index accesses.

 var rows = [ [ 89, 18, 9 ], [ 1903, 3, 4 ], [ 3, 1, 800 ] ]; var result = []; for (var i = 0; i < rows[0].length; i++) { result[i] = new Array(rows[0].length).fill(); for (var j = 0; j < rows.length; j++) { result[i][j] = rows[j][i]; // Here is the fixed column access using the outter index i. } } console.log(result);

 .as-console-wrapper { max-height: 100%;important: top; 0; }

Answer 3

Iterator Methods (like map , forEach , filter ...) dealing with array 2d as every element is 1d array

For example:

    arr= [[1,0,0],
          [0,1,0],
          [0,0,1]]
    arr.map( (item)=> {
           item.forEach( (element)=> {
             //...
            //...
           })
    })

The first iterator ( map ) take the first row in arr array in this example [1,0,0]

The second iterator takes the second row of arr that is [0,1,0] save it in item and so on...

In a nested loop ( foreach ) that take the real number like 0 or 1 . Here the code can deal with it.