数组去重实际运用 不念不忘少年蓝@ 2022-04-15 04:19 182阅读 0赞 做了一个数组去重的demo; 假如是一个需要展示的数组,然后又一个点击加载更多,或者下拉加载更多,但是每次都会调用数据库的数据,为了减少后台的负荷,我们可以把数据存在缓存里面,这里就涉及到JSON.stringify();和JSON.parse();。我也不知道为什么,缓存的数组读出来的时候都是obj类型的,无法获取到里面的数据,所以需要将其转换成json字符串存储,用到的时候在json解析,然后处理,在转成json'字符串存到缓存里面,所有的数据,只要是需要修改,就要解析 =>转字符串 => 然后缓存。 当然,如果你有更好的办法,当我没说。 demo比较简洁。没那么高大上的样式 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>数组去重</title> <style type="text/css"> table{ width: 100%; text-align: center; } #foot{ width: 100%; text-align: center; } #foot button{ width: 100px; height: 50px; line-height: 50px; text-align: center; border-radius: 10px; border: 1px solid #ccc; font-size: 18px; } .but{ padding: 2px; border: 1px solid #ccc; border-radius: 2px; } </style> </head> <body> <table border="0" cellspacing="5" cellpadding="5" id="tab"> </table> <div id="foot"> <button onclick="addlist()"> 加载更多</button> <button onclick="qclist()"> 去重</button> </div> </body> <script type="text/javascript"> window.onload = function () { sethtml(); }; //设置html function sethtml(){ let jsonst, list = []; if(sessionStorage.getItem("list")){ let arrlist = sessionStorage.getItem("list"); console.log("sethtml",arrlist); console.log("sethtml",typeof arrlist); if(null != arrlist || ""!= arrlist || '' != arrlist){ list = JSON.parse(arrlist); console.log("sethtml",list); } console.log("sethtml",list); let str = "<tr><th>序号</th><th>ID</th><th>名字</th><th>内容</th><th>操作</th></tr>"; for (let i = 0; i < list.length; i++) { str += "<tr>" + "<td>" + (i+1) + "</td>" + "<td>" + list[i].id + "</td>" + "<td>" + list[i].name + "</td>" + "<td>" + list[i].content + "</td>" + "<td ><button class='but' onclick='sc("+ i +")'> 删除</button></td>" + "</tr>"; } $("tab").innerHTML = str; } } //去重的数据处理 function qclist(){ let jsonst, list = [],list2 = []; jsonst = sessionStorage.getItem("list"); console.log("qclist",jsonst); list = JSON.parse(jsonst); list = qc(list); console.log("去重后的list",list); list = JSON.stringify(list); sessionStorage.setItem("list",list); sethtml(); } //去重的专用函数 function qc(array) { let r = []; for(let i = 0, l = array.length; i < l; i++) { for(let j = i + 1; j < l; j++) if(array[i].id === array[j].id) j = ++i; r.push(array[i]); } return r; } //删除函数 function sc(i){ let jsonst, list = [],list2 = []; jsonst = sessionStorage.getItem("list"); console.log("qclist",jsonst); list = JSON.parse(jsonst); list.splice(i,1); list = JSON.stringify(list); sessionStorage.setItem("list",list); sethtml(); } //添加函数 function addlist(){ let jsonst, list = [],list2 = [],list3 = []; if(sessionStorage.getItem("list")){ jsonst = sessionStorage.getItem("list"); console.log("addlist jsonst",jsonst); list = JSON.parse(jsonst); console.log("addlist list",list); list3 = setlist(); console.log("addlist list3",list3); for (let i = 0; i < list3.length; i++ ) { list.push(list3[i]) } console.log("最终 list",list); list = JSON.stringify(list); sessionStorage.setItem("list",list); sethtml(); }else{ list2 = setlist(); console.log("addlist2 list2",list2); for (let i = 0; i < list2.length; i++ ) { list.push(list2[i]) } list = JSON.stringify(list); sessionStorage.setItem("list",list); sethtml(); } } //获取id函数 function $(id){ return document.getElementById(id); } //假如是一个ajax function setlist(){ let list = [ {id:1,name:"你好",stat:1,show:false,content:"就好丰富的地方"}, {id:2,name:"苦",stat:1,show:false,content:"的好机会"}, {id:3,name:"没看",stat:1,show:false,content:"都很纠结就"}, {id:4,name:"用户",stat:1,show:false,content:"大税务师"}, {id:5,name:"儿童",stat:1,show:false,content:"法发顺丰"}, {id:6,name:"同意",stat:1,show:false,content:"好几十翁"}, {id:7,name:"传",stat:1,show:false,content:"采光好和然后"}, {id:8,name:"支付",stat:1,show:false,content:"让人一日游"}, {id:9,name:"企鹅",stat:1,show:false,content:"如风达的"}, {id:10,name:"破",stat:1,show:false,content:"水电费费"}, ] return list; } </script> </html> 以上就是写的demo了。 后台返回的数据不可能这么简单,但是无论怎么复杂,只要思路没问题,不要被蒙蔽眼睛,那么完全没问题。万变不离其宗。
还没有评论,来说两句吧...