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 每个列表的个数,即lenthvar 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);

 

转载于:https://www.cnblogs.com/-walker/p/6879888.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/488305.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vscode红色波浪不见了_vscode c++ 编译可以通过 但是有红色波浪线的问题

作者&#xff1a;送外卖转行计算机来源&#xff1a;SegmentFault 思否1.command p, 然后输入 >C/C选择 编辑配置(JSON)然后在工作区会出现一个.vscode文件夹, 其中会有一个.json文件的配置2.打开命令行 输入gcc -v -E -x c -会有以下的信息 ignoring nonexistent director…

云计算军事运用有啥特点

来源&#xff1a;军语研究院云计算技术被视为继大型计算机、个人计算机、互联网之后的第四次信息技术产业革命。云计算是一种围绕分布式共享计算资源的创新应用模式&#xff0c;资源提供者可以方便而快速地提供计算资源&#xff0c;而无处不在的资源需求者可以便利地使用共享的…

基于STM32的DS1302实时时钟模块应用

DS1302是一款低功耗的实时时钟芯片&#xff0c;被广泛应用于各种电子产品中。它具有准确计时、多种时间格式表示、定时报警等功能&#xff0c;适用于记录时间、日期和闹钟。在本文中&#xff0c;我们将介绍如何在基于STM32的开发环境中使用DS1302实时时钟模块&#xff0c;并给出…

内存屏障linux,Linux内存屏障

简介现代处理器在执行指令时&#xff0c;使用多种技术&#xff0c;提高指令的执行效率&#xff0c;例如多级cache&#xff0c;流水线&#xff0c;多发射&#xff0c;乱序执行等。这些技术的引入&#xff0c;导致对主存的访问顺序并不一定是编码时的顺序&#xff0c;也就是说&am…

在Windows 7上安装Team Foundation Server(TFS)的代理服务器(Agent)

自2009年微软发布Windows 7以来&#xff0c;经过8年的市场验证&#xff0c;Windows 7已经成为史上应用最为广泛的操作系统。但是面对技术变化的日新月异&#xff0c;2015年微软正式停止了对Windows 7的主流支持&#xff0c;并将于2020年正式结束对Windows 7的所有技术支持。这一…

python中的魔法方法__new___python魔法方法,详解__new__()和__init__()

魔法方法__new__()和__init__()真是困扰了我好久。其实就是对__new__()一直不是很理解。今天做一个小小的总结吧&#xff0c;在这个知识点上真是花了太久的时间了。首先回顾一下类与对象python中一切皆为对象&#xff0c;python类本身也是一种对象&#xff0c;我们可以称其为类…

王喜文:图解新基建,细说新机遇(100图)

来源&#xff1a;智造智库去年8月22日&#xff0c;华为创始人任正非签发总裁办邮件&#xff0c;大力推荐技术大神王喜文博士的5G科普PPT《认识5G&#xff0c;发展5G》&#xff0c;并报送董事会成员、监事会成员&#xff0c;主送全体员工&#xff0c;要求华为全员学习。任正非的…

基于OpenGL编写一个简易的2D渲染框架-07 鼠标事件和键盘事件

这次为程序添加鼠标事件和键盘事件 当检测到鼠标事件和键盘事件的信息时&#xff0c;捕获其信息并将信息传送到需要信息的对象处理。为此&#xff0c;需要一个可以分派信息的对象&#xff0c;这个对象能够正确的把信息交到正确的对象。 实现思路&#xff1a; 要实现以上的功能&…

重新定义Wi-Fi功能,Wi-Fi 6为什么要分两步?

来源&#xff1a;传感器技术Wi-Fi 6重新定义Wi-Fi&#xff0c;先是双频并发&#xff0c;然后才是6GHz下的160MHz。Wi-Fi是什么&#xff1f;它是一个基于IEEE 802.11标准的无线局域网技术。如今&#xff0c;Wi-Fi已经覆盖了绝大部分的室内场景&#xff0c;你的手机、电脑、智能音…

python爬虫系统实验报告问题的分析_Python爬虫总结——常见的报错、问题及解决方案...

在爬虫开发时&#xff0c;我们时常会遇到各种BUG各种问题&#xff0c;下面是我初步汇总的一些报错和解决方案。在以后的学习中&#xff0c;如果遇到其他问题&#xff0c;我也会在这里进行更新。各位如有什么补充&#xff0c;欢迎评论区留言~~~问题&#xff1a;IP被封&#xff0…

linux qt检测u盘热插拔,【QT】动态监测U盘插拔

前言在项目中&#xff0c;遇到一个需求&#xff1a;需要动态监测U盘插入&#xff0c;自动读取U盘文件并打开。为了实现这个功能&#xff0c;我们可以使用RegisterDeviceNotification注册设备事件的通知&#xff0c;然后在程序中处理WM_DEVICECHANGE消息来实现步骤RegisterDevic…

童年乐趣

每个人在童年的时候&#xff0c;都无比天真~那时候的我们感情丰富&#xff0c;热血无敌&#xff0c;想跟着四驱兄弟去赛车&#xff1b;想陪着海尔兄弟去冒险&#xff1b;会在孙悟空被误会时流下热泪&#xff1b;也会在哪吒被冤枉时义愤填膺…… 虽然现在看起来有点智障&#xf…

《科学》:中德解析新冠主要蛋白酶晶体结构,有助抑制剂研发

来源&#xff1a;澎湃新闻自新型冠状病毒引起的疫情暴发以来&#xff0c;科学家们一直在努力寻找有效的病毒抑制剂。当地时间3月20日&#xff0c;顶级学术期刊《科学》在线发表了一篇题为“Crystal structure of SARS-CoV-2 main protease provides a basis for design of impr…

render_notebook()结果没有图_来自百度的良心产品!百度iOS截长图App

我们知道百度是国内最大的搜索引擎&#xff0c;但你知道它也会出品一些和搜索无关的精品工具&#xff1f;例如在最近&#xff0c;百度就推出了一款iOS平台上的滚动截长图App&#xff0c;要知道iOS系统一直以来就不支持系统级别的截长图&#xff0c;百度这工具可谓是非常实用了&…

linux emmc vfs错误,Hi3519a EMMC挂载EXT4文件系统失败

环境&#xff1a;hi3519AV100 Hi3519A V100R001C02SPC010问题&#xff1a;使用Hitool5.0.46烧写EMMC&#xff0c;成功烧写uboot、Image和EXT4文件系统&#xff0c;uboot和内核都可以正常启动&#xff0c;报错加载不了文件系统参考文档启动参数设置如下&#xff1a;setenv boota…

2017前端资源汇总

来源于:https://zhuanlan.zhihu.com/p/25229274 Any software that can be written in JavaScript will eventually be written in JavaScript. 下面的项目都列出了github的星数和npmjs上最近一个月的下载数例如 github 106.5k/stars npmjs 93.3k/lm 指有10万6千个github星&…

2020年度国家科学技术奖提名项目公示丨附全名单

来源&#xff1a;科学技术部3月24日&#xff0c;科学技术部发布了《国家科学技术奖励工作办公室公告第95号》文件。该文件称&#xff0c;2020年度国家科学技术奖提名工作已结束&#xff0c;并对2020年度国家自然科学奖、国家技术发明奖通用项目、国家科学技术进步奖通用项目受理…

linux实验试题 cp,cp命令实验,cp命令

cp命令实验&#xff0c;cp命令创建条件[rootlocalhost ~]#mkdir /source[rootlocalhost~]#mkdir /target[rootlocalhost~]#cp /etc/l*.conf /source[rootlocalhost~]#ll /sourcetotal20-rw-r--r--. 1 root root 28 Aug 10 09:24 ld.so.conf-rw-r-----. 1 root root 191 Aug 10 …

codevs 1052:地鼠游戏

http://codevs.cn/problem/1052/ 题目描述 Description 王钢是一名学习成绩优异的学生&#xff0c;在平时的学习中&#xff0c;他总能利用一切时间认真高效地学习&#xff0c;他不但学习刻苦&#xff0c;而且善于经常总结、完善自己的学习方法&#xff0c;所以他总能在每次考试…

机载雷达发展简史:从蝙蝠到机载相控阵

来源&#xff1a;军事高科技在线 从地基起步蝙蝠&#xff0c;虽然像人一样拥有双眼&#xff0c;但它看起东西来&#xff0c;用到的却不是眼睛。蝙蝠从鼻子里发出的超声波在传输过程中遇到物体后会立刻反弹&#xff0c;根据声波发射和回波接收之间的…