数组去重实际运用

不念不忘少年蓝@ 2022-04-15 04:19 179阅读 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了。

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