javascript如何处理很多数据，类似分页切换

Posted 2020-09-19 九转功成

需求：一个用户列表数据，如果对应列表数据大于10个，就每10个保存到二维数组，后面不足10个的依然放在二维数组尾部

用处：模拟分页，或者局部刷新

var obj=[
        {
            "list":[
                {a:1},{a:2},{a:3},{a:4},{a:5},{a:6},
                {a:7},{a:8},{a:9}
            ]
        },
        {
            "list":[
                {a:1},{a:2},{a:3},{a:4},{a:5},{a:6},
                {a:7},{a:8},{a:9},{a:10},{a:11},{a:12},
                {a:13},{a:14},{a:15},{a:16},{a:17},
                {a:18},{a:19},{a:20},{a:21}
            ]
        },
        {
            "list":[
                {a:1},{a:2},{a:3},{a:4},{a:5},{a:6},
                {a:7},{a:8},{a:9},{a:10},{a:11},{a:12},
                {a:13},{a:14},{a:15},{a:16},{a:17},
                {a:18},{a:19},{a:20},{a:21},{a:22},
                {a:23},{a:24},{a:25},{a:26},{a:27},
                {a:28},{a:29},{a:30},{a:31}
            ]
        },
        {
            "list":[
                {a:1},{a:2},{a:3},{a:4},{a:5},{a:6},
                {a:7},{a:8},{a:9},{a:10},{a:11},{a:12},
                {a:13},{a:14},{a:15},{a:16},{a:17},
                {a:18},{a:19},{a:20},{a:21},{a:22},
                {a:23},{a:24},{a:25}
            ]
        },
        {
            "list":[
                {a:1},{a:2},{a:3},{a:4},{a:5},{a:6},
                {a:7},{a:8},{a:9},{a:10},{a:11},{a:12},
                {a:13},{a:14},{a:15},{a:16},{a:17},
                {a:18},{a:19},{a:20},{a:21},{a:22},
                {a:23},{a:24},{a:25}
            ]
        }
    ];
    //每个list的长度可能为0，无上限 
    //如果对应的list.length>10,就把对应的list每10个放在二维数组内，不足10个放在二维数组的尾部，
    //例如第三个有31个，把第三个list替换为：
    //  [
    //    [{a:1},{a:2}..{a:10}],
    //    [{a:11},{a:12}...{a:20}],
    //    [{a:21}..{30}],[{a:31}]
    //  ]
    //
    //该如何一次性获得所有的二维数组？
    function resetDate(arr,num){
        //1整个数组的长度
        var leng=arr.length;
        for(var i=0;i<leng;i++){
            //2 每个列表
            var innerList=arr[i].list;
            // console.log(arr);
            //3 每个列表的个数，即lenth
            var innerLength=innerList.length;
            //如果大于10个
            if(innerLength!=0&&innerLength>num){
                //如果大于10个的，二维数组外层数组的长度：max,需要上取整
                var outerMaxLen=Math.ceil(innerLength/num);
                // 定义在每个对象上的二维数组外层
                // arr[i].outer=Array(outerMaxLen);
                arr[i].outer=[];
                var sliceNum = 0, resIndex = 0;
                // console.log(result)
                while (sliceNum < innerLength) {
                    arr[i].outer[resIndex++] = innerList.slice(sliceNum, sliceNum += num);
                }
                // 需要用到arr.slice(start,end);
                console.log(arr[i].outer);
            }

        }
    }
    resetDate(obj,10);

// 法二、，小于10个有点BUG(表示没看懂)，来自：巴神
function adapter(data){
  function _splice(list,i){
    i = i || 1;
    list.push(list.splice(0,10));
    list.length>10 ? _splice(list,++i):list.push(list.splice(0,list.length-i));
  }
  data.forEach(function(v){
    _splice(v.list);
  });
}

adapter(obj);
console.log(obj);