工作中遇到一个页面
样式页面都还好,主要难点是数据是动态的,需要循环渲染出来,于是想到把数组重新转化成对应的5个元素一组4个元素一组生成出来。
具体逻辑如下:
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24];
let newArr = []
let temp = []
let flag = 5
for (var i = 0; i < arr.length; i++) {
temp.push(arr[i])
if (i === flag - 1) {
newArr.push(temp)
arr.splice(0, flag)
temp = []
flag = flag === 5 ? 4 : 5
i = -1
}
}
if (arr.length > 0) {
newArr.push(arr)
}
console.log(newArr)
输出的结果:
-
Array(6)
-
0: (5) [1, 2, 3, 4, 5]
-
1: (4) [6, 7, 8, 9]
-
2: (5) [10, 11, 12, 13, 14]
-
3: (4) [15, 16, 17, 18]
-
4: (5) [19, 20, 21, 22, 23]
-
5: [24]
这样就方便渲染出效果了。