数组去重实际运用

最新推荐文章于 2022-03-28 17:02:11 发布

百味苦

最新推荐文章于 2022-03-28 17:02:11 发布

阅读量221

点赞数

分类专栏： html 文章标签：数组去重运用

本文链接：https://blog.csdn.net/qq_38026437/article/details/84320843

版权

html 专栏收录该内容

26 篇文章 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了。

后台返回的数据不可能这么简单，但是无论怎么复杂，只要思路没问题，不要被蒙蔽眼睛，那么完全没问题。万变不离其宗。

百味苦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数组去重实际运用

做了一个数组去重的demo；假如是一个需要展示的数组，然后又一个点击加载更多，或者下拉加载更多，但是每次都会调用数据库的数据，为了减少后台的负荷，我们可以把数据存在缓存里面，这里就涉及到JSON.stringify();和JSON.parse();。我也不知道为什么，缓存的数组读出来的时候都是obj类型的，无法获取到里面的数据，所以需要将其转换成json字符串存储，用到的时候在json解析，然...
复制链接

扫一扫

专栏目录