Javascript映射数组最后一项
Javascript Map Array Last Item
我有这个:
map = ranks.map((row, r) => (
row.map((rank, i) => {
return [element(r, i, state, rank, toggled, onClick)];
})
));
它通过二维数组进行映射。在每一行之后,我想插入<div class="clearfix"></div>
。
我想,如果我能以某种方式获得每一行的最后一个索引,那么我就可以在行映射回调中使用它。有人能教我怎么做吗?
尝试以下操作:
row.map((rank, i, row) => {
if (i + 1 === row.length) {
// Last one.
} else {
// Not last one.
}
})
旧答案:
const rowLen = row.length;
row.map((rank, i) => {
if (rowLen === i + 1) {
// last one
} else {
// not last one
}
})
正如LeoYuan所回答的,这是正确的答案,但它可以改进一点map
接受具有第三个参数的函数,该参数是迭代数组本身。
row.map((rank, i, arr) => {
if (arr.length - 1 === i) {
// last one
} else {
// not last one
}
});
或者在一个简短的版本中,使用对象析构函数(感谢Jose的评论(:
row.map((rank, i, {length}) => {
if (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)));
具有相同结果的代码行更少
row.map((rank, i, {length}) => (
//last element
if(i + 1 === length){
}
));
一个较短的方法是将.map与三元运算符结合使用,如下所示。
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)
}
////////////解释
x###返回当前元素。map正在中循环
index###返回当前元素的索引(数组中项目的位置(。
数组###返回我们正在循环的相同元素,所以如果我们使用类似的东西
["first", "second", "third", "fourth"].map...
我们仍然可以通过获得循环的数组
array.length-1###给出数组的长度,-1给出数组中最后一个元素的索引。
在公认答案上略有改进
const lastIndex = row.length - 1;
row.map((rank, i) => {
if (i === lastIndex) {
// last one
} else {
// not last one
}
})
这将删除循环内部的算术运算。
简化上的答案
const array = ['apple','orange','banana'];
array.map((element, index) => (index === array.length - 1) ? '`${element}.'` : '`${element},'`);
您可以使用数组的长度检查最后一个索引。这是一个逻辑
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);
这也适用于动态arry更改。。这是一个太简单的技术,我使用..:-(
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.
访问array.map()
中的length
属性的最简洁的方法(尽管有点"脏"——你可能会得到一些ESLint错误,TypeScript也可能对此不满意(可能是从第三个回调参数(即我们正在映射的数组(中取出(通过析构函数(,然后分配一个新属性,例如lastIndex
,该值是从先前拉出的CCD_ 11:导出的
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)
- 如何从对象数组中获取最后一项
- 为什么只有最后一项显示,而不是全部显示
- 删除最后一项jquery
- $q.all当输入数组中的一项不是promise时,Typescript检查器失败
- 为什么我的“for”循环只获取 html 中的最后一项
- 我无法将下拉列表的默认值设置为最后一项
- 流星批量插入仅插入最后一项
- 我怎么能知道元素是最后一项
- 如何删除WinJS组绑定列表的最后一项
- 在immutable.js中更改列表中的一项
- 使用handlers.js模板以数组中的最后一项为条件
- empty().append()追加循环中的最后一项
- jQuery只附加最后一项
- 将属性添加到 for 循环中的最后一项
- 我的应用仅显示一项检索到的数据
- 如何在 visjs 时间轴中按时间顺序获取 getVisibleItems(或如何获取上一项)
- 滑动视图 - 显示下一项的预览/片段
- 检查单词是否具有相同的字母 - 错过一项测试
- 如何按排序键顺序获取对象中的最后一项
- Javascript映射数组最后一项