2016-07-04 18 views
11

ho questo:Javascript Mappa Array Ultimo Articolo

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

Esso mappa attraverso una matrice 2-dimensionale. Dopo ogni riga, vorrei inserire <div class="clearfix"></div>.

Penso, se potessi in qualche modo ottenere l'ultimo indice per ogni riga, quindi potrò usarlo nel callback della mappa di riga. Qualcuno può mostrarmi come si fa?

+1

Cosa vuoi veramente ottenere? – kazenorin

risposta

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

Grazie, ha funzionato perfettamente. – cocacrave

5

come risposta LeoYuan 袁力皓, questa è la risposta giusta, ma può essere un po 'migliorata.
map accetta una funzione con un terzo parametro, che è la matrice iterata stessa.

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

Utilizzando un arr.length invece di row.length è un approccio migliore e corretta per diversi motivi:

  1. Quando si mescolano gli ambiti, può portare a un bug inaspettati, soprattutto in un codice scritto male. In generale, è sempre un buon modo per evitare il mix tra gli ambiti quando possibile.
  2. Quando si desidera fornire un array esplicito, funzionerà anche. Per esempio.

    [1,2,3,4].map((rank, i, arr) => { 
        if (arr.length - 1 === i) { 
         // last one 
        } else { 
         // not last one 
        } 
    }); 
    
  3. Se vi piace di spostare il richiamo di fuori del campo di applicazione map (soprattutto per una migliore performance), sarà sbagliato usare row.length in quanto è fuori portata. Per esempio. nel 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))); 
    
+1

Perché si aggiunge 'arr' invece di usare' row.length'? – Sanderfish

+0

@Sanderfish Tre motivi: 1. In generale, non mi piace mescolare gli ambiti, in questo modo rende la soluzione più pulita, specialmente quando questo codice fa parte di un'applicazione enorme; 2. Questa soluzione funziona anche per array esplicitamente definiti, ad es. '[1,2,3] .map ((rank, i, arr) => {...})'; 3. Se per qualsiasi motivo (ad esempio in un ciclo) si decide di spostare la richiamata al di fuori dell'ambito, facendo 'row.length' semplicemente non funzionerà. Aggiornerò la mia risposta per chiarire. –

+3

Puoi anche fare '.map ((rank, i, {length}) => {...})' –

1

Un lieve miglioramento rispetto al risposta accettata:

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

Questo rimuove l'aritmetica dal all'interno del ciclo.