web-dev-qa-db-fra.com

Javascript Map Array Dernier élément

J'ai ceci:

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

Il cartographie à travers un tableau à 2 dimensions. Après chaque ligne, j'aimerais insérer <div class="clearfix"></div>.

Je pense que si je pouvais obtenir le dernier index pour chaque ligne, je pourrai donc l’utiliser dans le rappel de mappage de lignes. Quelqu'un peut-il me montrer comment le faire?

javascriptarraysmultidimensional-array
36
cocacrave
const rowLen = row.length;
row.map((rank, i) => {
  if (rowLen === i + 1) {
    // last one
  } else {
    // not last one
  }
})
64
LeoYuan 袁力皓

Comme LeoYuan 袁力皓 a répondu, c'est la bonne réponse, mais cela peut être un peu amélioré.
map accepte une fonction avec un troisième paramètre, qui est le tableau itéré lui-même.

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

Utiliser un arr.length au lieu de row.length est une approche meilleure et correcte pour plusieurs raisons:

  1. Lorsque vous mélangez des portées, cela peut entraîner des bugs inattendus, en particulier dans un code mal écrit. En général, c'est toujours un bon moyen d'éviter le mélange entre les portées lorsque cela est possible.

  2. Lorsque vous souhaitez fournir un tableau explicite, cela fonctionnera également. Par exemple.

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

  3. Si vous souhaitez déplacer le rappel en dehors de la portée map (principalement pour de meilleures performances), il sera faux d'utiliser row.length comme il est hors de portée. Par exemple. dans le cas de l'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)));
43
Slavik Meltser

Une légère amélioration par rapport à la réponse acceptée:

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

Cela supprime l'arithmétique de l'intérieur de la boucle.

3
tpower

vous pouvez vérifier le dernier index avec la longueur de votre tableau. voici une logique

var randomnumber = Math.floor(Math.random() * (100 - 10 + 1)) + 10

console.log("your last index is dynamic, ehich is ",randomnumber-1);
let arry = [];
for (i=1;i<randomnumber;i++){
    arry.Push(i)
}

    arry.map((data,index)=>{
          if(index == arry.length-1 ){
            console.log("last index data  ",data)
          }
          else{
          console.log("remain data ",data)
          
          }

    })

    console.log("your last index is dynamic, which is ",randomnumber-1);
1
manan5439
const array = ['Apple','orange','banana'];

array.map((element, index) => {
  //Last element
  if (index === array.length - 1) {
    return `${element}.`;
  }
  //Another elements
  return `${element}, `;
})}

Retournera Apple, orange, banana.

0
Hadnazzar