JS如何使用数组和 Map数据类型

朱雀 2021-09-25 05:26 345阅读 0赞

在开发的时候由于公司的项目用的是JSP,没有所谓的前后端分离.于是乎…

由于一个业务需求,需要一个使用JS的数组和Map数据类型.由于之前了解JS比较少,写的过程中百度了些许,所以业务完成后做个笔记让自己影响深一点.

1.  JS创建数组
2.  JS创建数组方式:

3. var arr = ["张三","李四"]; 	
    4. var arr = new Array("张三","李四"); 
    5. var arr = new Array();
     	arr[0] = "张三";
    	arr[0] = "李四";

1.  JS创建Map

const map = new Map();

1.  JS数据的使用  
    JS的数组跟Java的数组使用的方式差不多.  
    可以逐个赋值,也可以循环赋值

//赋值
     for(var i=0;i<10;i++){ 
     	arr[i] = i;
    	}
    //取值
    var value = arr[i];
    //存储map的数组
    for(var i=0;i<10;i++){ 
    	const map = new Map();
     	arr[i] = map;
    	}

1.  JSMap的使用

const map = new Map()
    map.set("key","value");
    value = map.get("key")

下面综合使用 ,先说下业务需求.  
需求1.页面有多个input框,每个框都有特定的id值,需要将所有的input框的值进行拼接.  
需求2.将拼接好的字符串进行分解.

需求1:一开始做法:一个个单独使用document.getElementById("")进行拿 然后分解也是,  
后面再新增一个的时候发现需要改的代码太多了,这种"垃圾"代码不能够通用.所有对代码进行了优化.  
思路:将所有Input的Id值存放到一个数组中  
然后通过循环该数组去获取每个input对应的value,然后存放到一个Map中.再通过循环Map去拼接字符串.  
(其实还可以继续改进 做到不用手动记录每个Input的Id)

var allParametersArr = ["showDiv","@startDate","@endDate","chartTitle","functionName","className","pageIndex","chartType",
    						"selectStr","seriesStr","groupStr","orderName","dicStr","departLimit","departChart","departCross",
    						"otherParameters","axisLabelRotate","departSort","axisTurn"];
    const map = new Map();
    var mapArr = new Array();
    function saveAllParameters(){ 
    		var functionParameters;
    		for(var i=0;i<allParametersArr.length;i++){ 
    			value = document.getElementById(allParametersArr[i]).value;
    			const map = new Map();
    			map.set(allParametersArr[i],value);
    			mapArr[i] = map;
    		}
    		for(var j=0;j<mapArr.length;j++){ 
    			if((allParametersArr[j]=="chartType" || 
    					allParametersArr[j]=="showDiv" ||
    					allParametersArr[j]=="chartTitle" ||
    					allParametersArr[j]=="className" ||
    					allParametersArr[j]=="functionName" ||
    					allParametersArr[j]=="seriesStr") && mapArr[j].get(allParametersArr[j])==""){ 
    				alert((allParametersArr[j])+"不能为空!");
    				return;
    			}else{ 
    				if(mapArr[j].get(allParametersArr[j])==""){ 
    					continue;
    				}else{ 
    					if(j==0){ 
    						functionParameters = allParametersArr[j]+"="+mapArr[j].get(allParametersArr[j]);
    					}else{ 
    						functionParameters = functionParameters+"&"+allParametersArr[j]+"="+mapArr[j].get(allParametersArr[j]);
    					}
    				}
    			}
    		}
    		document.getElementById("allParameters").value = functionParameters;
    	}

需求2.将拼接好的字符串进行分解.  
由于已经将所有ID存到数组中了,所以可以直接截取字符串然后跟数组里面的id进行一一对应

function breakUpParameters(){ 
    		var parameters = document.getElementById("allParameters").value;
    		var parametersArr = parameters.split("&");
    		for(i=0;i<parametersArr.length;i++){ 
    			var index = parametersArr[i].indexOf("=");
    			var key = parametersArr[i].substring(0, index);
    			var value = parametersArr[i].substring(index+1,parametersArr[i].length);
    			
    			if(allParametersArr.indexOf(key)!=-1){ 
    				document.getElementById(key).value = value;
    			}else{ 
    				if(document.getElementById("otherParameters").value.length != 0){ 
    					document.getElementById("otherParameters").value = document.getElementById("otherParameters").value+"&"+key+"="+value;
    				}else{ 
    					document.getElementById("otherParameters").value = "&"+key+"="+value;
    				}
    			}
    			
    			
    		}
    	}

发表评论取消回复

表情：

评论列表（有 0 条评论，345人围观）

还没有评论，来说两句吧...

相关阅读

相关 Spring注入简单数据类型数组和复杂类型数组-----Spring框架

> <?xml version="1.0" encoding="UTF-8"?> > <beans xmlns="http://www.springframew

偏执的太偏执、/ 2024年03月23日 18:10/ 0 赞/ 28 阅读

相关如何判断数组和对象

一当调用 Object.prototype.toString.call(someObject) 时，实际上会调用 Object.prototype.toString 方

忘是亡心i/ 2024年03月22日 21:02/ 0 赞/ 92 阅读

相关【JavaScript】JS——Map数据类型

【JavaScript】JS——Map数据类型什么是Map? 特性 Map与Object的比较

末蓝、/ 2024年02月05日 07:25/ 0 赞/ 44 阅读

相关 JS_map遍历数组

map的使用方法和forEach类似。和forEach不同的是，map有返回值基础写法 var num = [1,2,3,4,5,6];

太过爱你忘了你带给我的痛/ 2022年11月06日 11:54/ 0 赞/ 265 阅读

相关 js存取数组和取数组的操作

存 listdata.push({ "num1": num1, "num2": num2, "nu

港控/mmm°/ 2022年09月09日 04:35/ 0 赞/ 216 阅读

相关 js伪数组和arguments

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

矫情吗；*/ 2022年07月13日 23:22/ 0 赞/ 204 阅读

相关 JS区分数组和对象

JS本身对于数组和对象的区分是混乱的，使用typeof返回数组的类型是object，这显然没有任何意义。目前最佳的方案如下： var is_array = (va

「爱情、让人受尽委屈。」/ 2022年03月28日 04:16/ 0 赞/ 315 阅读

相关 JS如何使用数组和 Map数据类型

在开发的时候由于公司的项目用的是JSP,没有所谓的前后端分离.于是乎… 由于一个业务需求,需要一个使用JS的数组和Map数据类型.由于之前了解JS比较少,写的过程中百度了些许

朱雀/ 2021年09月25日 05:26/ 0 赞/ 346 阅读

相关数组的map方法

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。 map() 方法按照原始数组元素顺序依次处理元素。注意： map() 不会对空数组进行检测

拼搏现实的明天。/ 2021年09月17日 01:58/ 0 赞/ 492 阅读

相关 js数据结构和算法(一)数组和散列表

程序设计=数据结构+算法一.数据结构 1.什么是数据结构数据结构就是关系，没错，就是数据元素相互之间存在的一种或多种特定关系的集合。传统上，我们把数据结构分为

旧城等待，/ 2021年09月15日 00:48/ 0 赞/ 310 阅读