做了一个数组去重的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了。
后台返回的数据不可能这么简单，但是无论怎么复杂，只要思路没问题，不要被蒙蔽眼睛，那么完全没问题。万变不离其宗。