齿轮 toothed gear

array/circularArray

介绍

应用场景：轮播图，无限滚动的场景下需要对不确定长度的数据进行分组，分组后的数据需要循环展示。

例如数据有 50 条，那么恰好可以分成 10 组，每组 5 条数据。

但是倘若数据有 51 条，那么就需要分成 11 组，前 10 组 5 条，最后一组 1 条。

这个时候产品的需求是，每组 5 条数据，不足 5 条的数据需要补全，补全的数据是从头开始的。

这个时候就需要用到 circularArray 了。

circularArray 会返回一个函数，这个函数接收两个参数，第一个参数是需要分组的数据，第二个参数是每组的长度。

类似一个小齿轮拨动大齿轮一样，你需要的一屏就是大齿轮，所有的数据则是小齿轮，你只需要关心你的一屏数据，而不需要关心数据的总长度。

使用需知

该函数不会改变原数组，只会读取对应的数组的索引值

案例

const array = [0, 1, 2, 3, 4, 5, 6, 7, 8];
// 将上面的数据处理成每页五条

数据就会被处理成这个样子

| | 屏幕第一条数据 | 屏幕第二条数据 | 屏幕第三条数据 | 屏幕第四条数据 | 屏幕第五条数据 | | ------------ | -------------- | -------------- | -------------- | -------------- | -------------- | | | 8 | 0 | 1 | 2 | 3 | | 上翻 | 4 | 5 | 6 | 7 | 8 | | 页面展示数据 | 0 | 1 | 2 | 3 | 4 | | 下翻 | 5 | 6 | 7 | 8 | 0 | | | 1 | 2 | 3 | 4 | 5 | | | 6 | 7 | 8 | 0 | 1 |