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

本文介绍: 将数组分割为固定长度的数组

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

前言

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

使用 步骤

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

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

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

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

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

代码如下（示例）：

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

2.lo dash包的`chunk方法`

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

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

3.结果 展示

代码如下（示例）：

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

4.渲染 数据

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

  <ion-slides pager="true" [options]="slideOpts" class="slides">
                <ng-container *ngFor="let item of list" >
                   <ion-slide class="data">
                        <ng-container *ngFor="let i of item">
                            <div class="item" >
                            </div>
                        </ng-container>
                    </ion-slide>
                 </ng-container>
   </ion-slides>