将数组分割成多个固定长度的数组

数组分割成多个数组后即可在轮播图中分数组渲染数据

目录

前言

使用步骤

1.封装一个函数，使用slice方法

2.结果展示

3.渲染数据

---

前言

在angular项目移动端的制作时，遇到了使用ionic组件库中的slides轮播图，而此时后端返回的数据只是为一个数组，所以需要将数据渲染到轮播图上就必须将一个数组分割为多个数组

使用步骤

1.封装一个函数，使用slice方法

其中slice() 方法可拆分数组，可接受两个参数传的都为索引值，但不取第二个索引值的值

slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

注意： slice() 方法不会改变原始数组。

函数有两个参数，第一个参数为需要分割的数组，第二个参数为分割后的数组长度

代码如下（示例）：

let list=[]
 getNewArray(array, subGroupLength) {
        let index = 0;
        let newArray = [];
        while (index < array.length) {
            newArray.push(array.slice(index, (index += subGroupLength)));
        }
        return newArray;
    }
this.list=getNewArray([1,2,3,4,5],2) //调用函数 传入数组 并要求拆分后的数组长度为2

2.lodash包的chunk方法

发现lodash里面有个方法，可以实现同样的效果将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。 如果array 无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。

_.chunk(['1', '2', '3', '4'], 2);
// => [['1', '2'], ['3', '4']]
 
_.chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]

3.结果展示

代码如下（示例）：

[[1,2],[3,4] [5]]

---

4.渲染数据

将分割后的数组使用移动端的轮播图进行渲染，这里需要使用ionic中的slides组件