将一维数组按指定长度转为二维数组

将一维数组按指定长度转为二维数组

function pages(arr, len) {
	const pages = [];
	arr.forEach((item, index) => {
		const page = Math.floor(index / len);
		if (!pages[page]) {
			pages[page] = [];
		}
		pages[page].push(item);
	});
	return pages;
}

// 使用
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(pages(arr, 3)); // [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
console.log(pages(arr, 8)); // [[1, 2, 3, 4, 5, 6, 7, 8], [9]]

应用场景示例

如图，按需求，图标模块中的图标个数是不确定的，每页最多显示 8 个，超出 8 个的显示到第二页，实现向左滑动翻页。提供的数据是一个一维数组，这时就可以使用上面的代码按长度为 8 转为二维数组，再分页渲染到页面。

<template>
	<swiper>
		<swiper-slide v-for="(page, index) of pages" :key="index">
			<div class="icon" v-for="item of page" :key="item.id">
				<div class="icon-img">
					<img :src="item.imgUrl" />
				</div>
				<p>{{item.desc}}</p>
			</div>
		</swiper-slide>
	</swiper>
	<template>
		<script>
			...
			data () {
			  return {
			    iconList: [] // 图标数据
			  }
			},
			computed: {
			  pages () {
			    const pages = []
			    this.iconList.forEach((item, index) => {
			      const page = Math.floor(index / 8)
			      if (!pages[page]) {
			        pages[page] = []
			      }
			      pages[page].push(item)
			    })
			    return pages
			  }
			}
		</script></template
	></template
>