iterating - javascript read multidimensional array

Javascript Map Array último artículo

Question

Tengo esto:

map = ranks.map((row, r) => (
  row.map((rank, i) => {
    return [element(r, i, state, rank, toggled, onClick)];
  })
));

Se mapea a través de una matriz bidimensional. Después de cada fila, me gustaría insertar <div class="clearfix"></div> .

Creo que, si pudiera obtener el último índice de cada fila, así podré usarlo en la devolución de llamada del mapa de la fila. ¿Alguien me puede mostrar cómo hacerlo?

Answer 1

Como respondió Leo Yuan,, esta es la respuesta correcta, pero se puede mejorar un poco.
map acepta una función con un tercer parámetro, que es la propia matriz iterada.

row.map((rank, i, arr) => {
    if (arr.length - 1 === i) {
        // last one
    } else {
        // not last one
    }
});

El uso de arr.length lugar de row.length es un enfoque mejor y correcto por varias razones:

1. Cuando mezcla ámbitos, puede provocar errores inesperados, especialmente en un código mal escrito. En general, siempre es una buena manera de evitar la mezcla entre ámbitos cuando sea posible.

2. Cuando te gusta proporcionar una matriz explícita, funcionará también. P.ej

   [1,2,3,4].map((rank, i, arr) => {
       if (arr.length - 1 === i) {
           // last one
       } else {
           // not last one
       }
   });

3. Si desea mover la devolución de llamada fuera del alcance del map (principalmente para un mejor rendimiento), será incorrecto usar row.length ya que está fuera del alcance. Por ejemplo, en el caso OP:

   const mapElement = (rowIndex, state, toggled, onClick) => {
       return (rank, i, arr) => {
           let lastIndex = arr.length - 1;
           return [element(rowIndex, i, state, rank, toggled, onClick, lastIndex)];
       };
   };
   
   map = ranks.map((row, r) => row.map(mapElement(r, state, toggled, onClick)));

Answer 2

Una ligera mejora en la respuesta aceptada:

const lastIndex = row.length - 1;
row.map((rank, i) => {
  if (i === lastIndex) {
    // last one
  } else {
    // not last one
  }
})

Esto elimina la aritmética del interior del bucle.

Answer 3

const rowLen = row.length;
row.map((rank, i) => {
  if (rowLen === i + 1) {
    // last one
  } else {
    // not last one
  }
})