當(dāng)前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript如何处理很多数据,类似分页切换
生活随笔
收集整理的這篇文章主要介紹了
javascript如何处理很多数据,类似分页切换
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
需求:一個用戶列表數(shù)據(jù),如果對應(yīng)列表數(shù)據(jù)大于10個,就每10個保存到二維數(shù)組,后面不足10個的依然放在二維數(shù)組尾部
用處:模擬分頁,或者局部刷新
在線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,無上限 //如果對應(yīng)的list.length>10,就把對應(yīng)的list每10個放在二維數(shù)組內(nèi),不足10個放在二維數(shù)組的尾部,//例如第三個有31個,把第三個list替換為:// [// [{a:1},{a:2}..{a:10}],// [{a:11},{a:12}...{a:20}],// [{a:21}..{30}],[{a:31}]// ]// //該如何一次性獲得所有的二維數(shù)組?function resetDate(arr,num){//1整個數(shù)組的長度var leng=arr.length;for(var i=0;i<leng;i++){//2 每個列表var innerList=arr[i].list;// console.log(arr);//3 每個列表的個數(shù),即lenthvar innerLength=innerList.length;//如果大于10個if(innerLength!=0&&innerLength>num){//如果大于10個的,二維數(shù)組外層數(shù)組的長度:max,需要上取整var outerMaxLen=Math.ceil(innerLength/num);// 定義在每個對象上的二維數(shù)組外層// 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個有點(diǎn)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已結(jié)正常,過多數(shù)據(jù)的話未測
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);?
轉(zhuǎn)載于:https://www.cnblogs.com/-walker/p/6879888.html
總結(jié)
以上是生活随笔為你收集整理的javascript如何处理很多数据,类似分页切换的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: MYSQL性能优化详解(二)
- 下一篇: 翻译连载 | 附录 A:Transduc