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

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

用处:模拟分页,或者局部刷新

在线DEMO:戳这里

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);

 法二的跟新版本:小于10已结正常,过多数据的话未测

function adapter(data){
  function _splice(list,i){
    i = i || 1;
    list.push(list.splice(0,10));
    list.length>10 ? _splice(list,++i):(i>1 && list.push(list.splice(0,list.length-i)));
  }
  data.forEach(function(v){
    _splice(v.list);
  });
}

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

 

posted @ 2017-05-19 18:41  逗伴不是瓣  阅读(787)  评论(0编辑  收藏  举报