陣列去重實際運用
阿新 • • 發佈：2018-12-16
做了一個數組去重的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了。
後臺返回的資料不可能這麼簡單，但是無論怎麼複雜，只要思路沒問題，不要被矇蔽眼睛，那麼完全沒問題。萬變不離其宗。