javascript - 这种分页滚动加载如何处理？

Question

  假设 let group = [    {label:"a",count:25},    {label:"b",count:3},    {label:"c",count:4},  ]  现在有10条数据塞进来，那么这个时候结果为  let result = [    {label:"a",count:25,children:[]*10},  ]  当我再加10条数据进来，结果为  let result = [    {label:"a",count:25,children:[]*20},  ]  当我再加10条数据进来，这个时候超出了label:"a"的count(25)，那么结果为  let result = [    {label:"a",count:25,children:[]*25},    {label:"b",count:25,children:[]*3},    {label:"c",count:25,children:[]*2}  ]  再加2条进来  let result = [    {label:"a",count:25,children:[]*25},    {label:"b",count:25,children:[]*3},    {label:"c",count:25,children:[]*4}  ]

Answer 1

var group = [    {label:"a",count:25},    {label:"b",count:3},    {label:"c",count:4},];// 实现函数function addItemInGroup (group, data) {    data = [...data];    group.some(v => {        v.children = v.children || [];        if (v.children.length >= v.count) {            return;        }        let setData = data.splice(0, v.count - v.children.length);        v.children.push(...setData);        return !data.length;    });}// 仿真模拟let result = [1,2,3,4,5,6,7,8,9,10];let cloneDeep = (v) => JSON.parse(JSON.stringify(v));addItemInGroup(group, result);console.log("result after pushing 10 items:", cloneDeep(group));addItemInGroup(group, result);console.log("result after pushing another 10 items:", cloneDeep(group));addItemInGroup(group, result);console.log("result after pushing another 10 items:", cloneDeep(group));addItemInGroup(group, [1,2]);console.log("result after pushing another 2 items:", cloneDeep(group));

Answer 2

这个函数 addToResult 接受两个参数：要添加的数据数组 dataArray 和要添加的数据数量 dataCount。它会将数据填充到 group 数组的 children 数组中，保证数组的长度与 count 属性相符。在填充完成后，函数将返回填充好的结果数组。

let group = [  { label: "a", count: 25 },  { label: "b", count: 3 },  { label: "c", count: 4 },];function addToResult(dataArray, dataCount) {  let result = JSON.parse(JSON.stringify(group));  result.forEach((item) => {    item.children = [];  });  let totalDataToAdd = dataCount;  let index = 0;  while (totalDataToAdd > 0) {    if (index >= result.length) {      index = 0;    }    let availableSpace = result[index].count - result[index].children.length;    if (availableSpace > 0) {      let dataToAdd = Math.min(availableSpace, totalDataToAdd);      totalDataToAdd -= dataToAdd;      for (let i = 0; i < dataToAdd; i++) {        result[index].children.push(dataArray.shift());      }    }    index++;  }  return result;}const dataToPush = new Array(10).fill("data");let result = addToResult(dataToPush, 10);console.log("result after pushing 10 items:", result);result = addToResult(dataToPush, 10);console.log("result after pushing another 10 items:", result);result = addToResult(dataToPush, 10);console.log("result after pushing another 10 items:", result);result = addToResult(dataToPush, 2);console.log("result after pushing another 2 items:", result);