Javascript Map Array Последний элемент

У меня есть это:

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

Он отображает через 2-мерный массив. После каждой строки я хотел бы вставить <div class="clearfix"></div>.

Я думаю, если бы я мог каким-то образом получить последний индекс для каждой строки, поэтому я смогу использовать его в обратном вызове карты строк. Может ли кто-нибудь показать мне, как это сделать?

Ответы

Ответ 1

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

Ответ 2

Как ответил Лео Юань, это правильный ответ, но его можно немного улучшить.
map принимает функцию с третьим параметром, который является итеративным массивом.

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

Использование arr.length вместо row.length является лучшим и правильным подходом по нескольким причинам:

Когда вы смешиваете области видимости, это может привести к неожиданным ошибкам, особенно в плохо написанном коде. В общем, это всегда хороший способ избежать смешивания между областями, когда это возможно.

Если вы хотите указать явный массив, он также будет работать. Например

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

Если вы хотите переместить обратный вызов за пределы области видимости map (в основном для повышения производительности), будет неправильно использовать row.length поскольку оно выходит за пределы области видимости. Например, в случае 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)));
```

Ответ 3

Небольшое улучшение принятого ответа:

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

Это удаляет арифметику изнутри цикла.

Ответ 4

Вы можете проверить последний индекс по длине массива. вот логика

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

Ответ 5

const array = ['apple','orange','banana'];

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

Вернется apple, orange, banana.

Ответ 6

Упрощенный ответ выше

const array = ['apple','orange','banana'];

array.map((element, index) => (index === array.length - 1) ? \'${element}.\' : \'${element},\');