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)}} {{a.course}}</th>
</tr>
<tr>
<th>人数/比例</th>
<td v-for="(a, b) in item">{{a.num}}</td>
</tr>
</table>
欢迎指正
上一篇: linux批量创建用户,并设置密码
下一篇: 添加用户(数据库+servlet)