欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js中将数组按照指定个数切分,生成新的数组

程序员文章站 2022-07-14 20:03:25
...

在实际工作中,遇到一些奇怪的交互,一个table可以放下的数据,据说为了展示清晰,按照5个一组,分成若干小的table,于是就把所有表格的数据进行拆分

代码如下
// 原始数据
var data = [
	{"course": "物理","num": 1},
	{"course": "化学","num": 1},
	{"course": "生物","num": 1},
	{"course": "政治","num": 1},
	{"course": "历史","num": 1},
	{"course": "地理","num": 1},
	{"course": "语文","num": 1},
	{"course": "数学","num": 1},
	{"course": "英语","num": 1},
	{"course": "体育","num": 1}
]
var datanew = chunk(data, 5)
// 传进数组和指定个数,进行拆分
function chunk(array, size) {
   //获取数组的长度,如果你传入的不是数组,那么获取到的就是undefined
   const length = array.length
   //判断不是数组,或者size没有设置,size小于1,就返回空数组
   if (!length || !size || size < 1) {
     return []
   }
   //核心部分
   let index = 0 //用来表示切割元素的范围start
   let resIndex = 0 //用来递增表示输出数组的下标
 
   //根据length和size算出输出数组的长度,并且创建它。
   let result = new Array(Math.ceil(length / size))
   //进行循环
   while (index < length) {
     //循环过程中设置result[0]和result[1]的值。该值根据array.slice切割得到。
     result[resIndex++] = array.slice(index, (index += size))
   }
   //输出新数组
   return result
 }

// vue部分 渲染
<table v-for="(item, index) in datanew ">
	<tr>
	  <th>科目</th>
	  <th v-for="(a, b) in item">top{{(b+1) + (index * 5)}}&nbsp;&nbsp;{{a.course}}</th>
	</tr>
	<tr>
	  <th>人数/比例</th>
	  <td v-for="(a, b) in item">{{a.num}}</td>
	</tr>
</table>

欢迎指正

相关标签: 爬坑