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);
-----------------------------------------------------------------------小二给我来二两轮子!