js 根據指定個數切割數組

Part.1 問題

寫項目時，遇到需要前端做 假分頁 的問題：后端會將數據全部返回，前端自己做分頁

Part.2 思路

拿到后端全部返回的數據后，按照 產品需求  進行分頁，如每頁顯示 10 條數據為例，則需要將全部數據 按照每 10 條一個小數組進行分割，然后合並為一個大數組，然后根據索引取值

Part.3 例如

我們假設這是后端返回的全部數據

arr: [
               {name: '小明', age: 20},
               {name: '小紅', age: 21},
               {name: '小軍', age: 22},
               {name: '小王', age: 23},
               {name: '小朱', age: 24},
               {name: '小劉', age: 25},
               {name: '小張', age: 26},
               {name: '小龐', age: 27},
               {name: '小米', age: 28},
               {name: '小華', age: 29},
               {name: '小鄭', age: 30},
               {name: '小藍', age: 31},
               {name: '小綠', age: 32},
               {name: '小青', age: 33},
               {name: '小白', age: 34},
               {name: '小黑', age: 35},
               {name: '小橙', age: 36},
               {name: '小紫', age: 37},
               {name: '小山', age: 38},
               {name: '小一', age: 39},
               {name: '小鵬', age: 40},
               {name: '小叢', age: 41},
               {name: '小魚', age: 42},
               {name: '小李', age: 43},
               {name: '小英', age: 44},
               {name: '小傑', age: 45},
               {name: '小金', age: 46},
               {name: '小窗', age: 47},
               {name: '小葉', age: 48},
               {name: '小文', age: 49},
               {name: '小龍', age: 50},
               {name: '小純', age: 51},
               {name: '小偉', age: 52},
               {name: '小佳', age: 53},
               {name: '小吳', age: 54},
               {name: '小枚', age: 55},
               {name: '小原', age: 56},
               {name: '小書', age: 57},
               {name: '小江', age: 58},
               {name: '小硯', age: 59},
               {name: '小然', age: 60}
],

首先創建一個空數組，用於接收分割完成的小數組

 newArr: []

然后根據每頁 10 條進行分割

 dataHandling: function() {
       let arrLength = this.arr.length; // 數組長度
       let num = 10;  // 每頁顯示 10 條
       let index = 0;
       for (let i = 0; i < arrLength; i++) {
            if (i % num === 0 && i !== 0) { // 可以被 10 整除
                 this.newArr.push(this.arr.slice(index, i));
                 index = i;
             };
             if ((i + 1) === arrLength) {
                  this.newArr.push(this.arr.slice(index, (i + 1)));
             }
       };
  }

結果如下：

將數據分割成了 5 個小數組，每個小數組為 10條 數據，然后根據分頁操作取 大數組(newArr)的索引 就可以完成取值，實現假分頁操作了！~~~