Javascript Map Array Last Item
JavascriptArraysMultidimensional ArrayJavascript Problem Overview
I have this:
map = ranks.map((row, r) => (
row.map((rank, i) => {
return [element(r, i, state, rank, toggled, onClick)];
})
));
It maps through a 2-dimentional array.
After each row, I'd like to insert <div class="clearfix"></div>
.
I think, if I could somehow get the last index for each row, so I will be able to use it in the row map callback. Can someone show me how to do it?
Javascript Solutions
Solution 1 - Javascript
Try something like:
row.map((rank, i, row) => {
if (i + 1 === row.length) {
// Last one.
} else {
// Not last one.
}
})
Old answer:
const rowLen = row.length;
row.map((rank, i) => {
if (rowLen === i + 1) {
// last one
} else {
// not last one
}
})
Solution 2 - Javascript
As LeoYuan answered, this is the correct answer, but it can be a bit improved.
map
accepts a function with a third parameter, which is the iterated array itself.
row.map((rank, i, arr) => {
if (arr.length - 1 === i) {
// last one
} else {
// not last one
}
});
or in a bit shorter version, using an object destructuring (thanks Jose from the comments):
row.map((rank, i, {length}) => {
if (length - 1 === i) {
// last one
} else {
// not last one
}
});
Using an arr.length
instead of row.length
is a better and correct approach for several reasons:
-
When you mix scopes, it may lead for an unexpected bugs, especially in a poorly written or poorly designed code. In general, it is always a good way to avoid mixing between scopes when possible.
-
When you like to provide an explicit array, it will work as well. E.g.
[1,2,3,4].map((rank, i, arr) => { if (arr.length - 1 === i) { // last one } else { // not last one } });
-
If you like to move the callback outside of the
map
scope (mainly for a better performance), it will be wrong to userow.length
as it is out of scope. E.g. in the OP case: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)));
Solution 3 - Javascript
Fewer lines of code with the same results
row.map((rank, i, {length}) => (
//last element
if(i + 1 === length){
}
));
Solution 4 - Javascript
A slight improvement on the accepted answer:
const lastIndex = row.length - 1;
row.map((rank, i) => {
if (i === lastIndex) {
// last one
} else {
// not last one
}
})
This removes the arithmetic from inside the loop.
Solution 5 - Javascript
simplify answer above
const array = ['apple','orange','banana'];
array.map((element, index) => (index === array.length - 1) ? \`${element}.\` : \`${element},\`);
Solution 6 - Javascript
A shorter method would be to use .map combined with ternary operator, like this.
const positions = ["first", "second", "third", "fourth"]
positions.map((x, index, array) => {
index === array.length -1
? console.log("this is the last item in the array")
: console.log( x)
}
//////////// explanation
x ### returns the current element .map is looping through
index ### returns the index(location of item in an array) of the current element.
array ### return the same element we are looping through so if we use sth like this
["first", "second", "third", "fourth"].map...
we'll still get the array we're looping through
array.length - 1 ### gives us the length of the array and - 1 gives us the index of the last element in the array.
Solution 7 - Javascript
you can check last index with your array's length. here is a logic
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);
this is also works in dynamic arry changes.. it is a too simple technique which i use .. :-)
Solution 8 - Javascript
const array = ['apple','orange','banana'];
array.map((element, index) => {
//Last element
if (index === array.length - 1) {
return `${element}.`;
}
//Another elements
return `${element}, `;
})}
Will return apple, orange, banana.
Solution 9 - Javascript
Perhaps the most concise way (although a little "dirty" – you can get some ESLint errors and TypeScript also might not be happy about that) to access the length
property in array.map()
is to pull it out (by destructuring) of the third callback argument (which is the array we are mapping over) and then assign a new property e. g. lastIndex
, which value is being derived from that previously pulled out length
:
let list = ["Alice", "Bob", "Cedrick", "David", "Emily"]
let mapped = list.map((item, i, {length, lastIndex = length - 1}) => {
return i === lastIndex ? "lastitem: " + item : item
})
console.log(mapped)