数组切割5-4-5-4分组

74 阅读1分钟

工作中遇到一个页面

样式页面都还好,主要难点是数据是动态的,需要循环渲染出来,于是想到把数组重新转化成对应的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)
		         

输出的结果:

  1. Array(6)

  2. 0: (5) [1, 2, 3, 4, 5]

  3. 1: (4) [6, 7, 8, 9]

  4. 2: (5) [10, 11, 12, 13, 14]

  5. 3: (4) [15, 16, 17, 18]

  6. 4: (5) [19, 20, 21, 22, 23]

  7. 5: [24]

这样就方便渲染出效果了。