`

JavaScript中的Array的创建方式和Array与Map的应用

JavaScriptHTML 
阅读更多
一直以来对JavaScript中创建数组有几种方式，每种创建方式的区别，JavaScript中map的创建方式及其使用认识的不是很清楚，还好利用周末自己看了点资料并写了几个小例子，以此来加深自己对JS中的Array和Map的认识，以后在项目中遇到就可以完全知晓了。

直接点，上代码！代码比较简单，并且代码中加有注释，希望能够帮助加深理解。
说明：array.html中是Array创建及使用的例子，array-map.html中是map与array间关系及其间转化的例子

array.html文件： 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Array 测试</title>
		<script language="JavaScript1.2">
			//1.定义一个初始容量为0的数组(数组中没有任何元素)
			document.write("-------------------------------"+'<br/>');
			var myarray = new Array();
			document.write("new Array()方式初始的数组的初始容量为："+myarray.length+"<br/>");
			myarray[0]="new Array() 1";
			myarray[1]="new Array() 2";
			myarray.push("new Array() 3","new Array() 4");
			for(var i=0;i<myarray.length;i++){
				document.write(myarray[i]+'<br/>');
			}
			document.write("-------------------------------"+'<br/>');
		///////////////////////////////////////////////////////////////////////
		//2.定义数组时，指定初始化数组的大小(数组中没有任何元素)
		//此处定义的arry1数组的大小是3，但我们可以向其添加
		//任意多的元素(此例中，arry1数组的元素个数是8)
		var arry1 = new Array(3);//定义一个初始容量为3的数组
		document.write("new Array(3)方式初始的数组的初始容量为："+arry1.length+"<br/>");
		arry1[0]="array1";		
		arry1[1]="array2";		
		arry1[2]="array3";
		arry1[3]="array4";
		arry1[4]="array5";
		//向arry1数组的末尾添加一个元素，并返回数组arry1的新的长度
		arry1.push("array6");
		//可以通过push向arry1数组中一次添加多个数组元素
		arry1.push("array7","array8");
		for(var x in arry1){
			document.write(arry1[x]+'<br/>');
		}	
		document.write("arry1.length="+arry1.length+"<br/>");
		//3.定义数组时,并为数组赋初值（数组大小等于初始值的个数）
		document.write("-----------------------------");
		var arraytest = new Array("arraytest1","arraytest2","arraytest3");
		document.write("new Array(arraytest1,arraytest2,arraytest3)方式初始的数组的初始容量为："+arraytest.length+"<br/>");
		arraytest[3]="arraytest4";
		//向arry1数组的末尾添加一个元素，并返回数组arry1的新的长度
		arraytest.push("arraytest5");
		//可以通过push向arry1数组中一次添加多个数组元素
		arraytest.push("arraytest6","arraytest7");
		for(var x in arraytest){
			document.write(arraytest[x]+'<br/>');
		}
		document.write("------------不使用new 关键字创建数组-----------------"+"<br/>");
		//4.不使用new 关键字定义数组的方式
		var x=[];
		document.write("var x=[];方式创建的数组的初始容量为："+x.length+"<br/>");
		x.push("中国人","美国人","日本人");
		for(var key in x){
			document.write(x[key]+'<br/>');
		}
		var y=[45,67,89,890];
		document.write("var y=[45,67,89,890];方式创建的数组的初始容量为："+y.length+"<br/>");
		for(var key in y){
			document.write(y[key]+'<br/>');
		}
		//总结：无论通过哪种方式创建的数组,你可以添加任意多的值，就像你可以定义你需要的任意多的变量一样。
		//注意：如果你需要在数组内指定数值或者逻辑值，那么变量类型应该是数值变量或者布尔变量，而不是字符变量。
			document.write("-------------数组中的元素是数值-------------"+'<br/>');
			var arrayInts= new Array(1,2,3,4,5,6,7);
			for(var x in arraytest){
			document.write(arrayInts[x]+'<br/>');
		}
			document.write("-------------数组中的元素是逻辑值-------------"+'<br/>');
			var arrayBooleans= new Array(true,false,true,false);
			for(var x in arrayBooleans){
			document.write(arrayBooleans[x]+'<br/>');
		}
			
		
		</script>
	</head>
	<body>
	</body>
</html>


array-map.html文件： 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Array作Map使用方式</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script language="JavaScript1.2">
    	//map1
    	var map1={};
		map1['张三']="028-77777";
		map1['李四']="0532-000000";
		map1['王五']="0816-909090";
		document.write("map1['李四']="+map1['李四']+"<br/>");
		//清空map1中的所有键和值
		map1={};
		document.write("map1['李四']="+map1['李四']+"<br/>");
		//map2
		document.write("------------------------"+"<br/>");
		var map2=new Array();
		map2['张三']="028-77777";
		map2['李四']="0532-000000";
		map2['王五']="0816-909090";
		document.write("map2的大小是："+map2.length+"<br/>");//这里map2.length显示为0
		document.write("map2['李四']="+map2['李四']+"<br/>");
		document.write("------------------------"+"<br/>");
		map2[0] = "0058-4873621";
		map2[1] = "0358-4873622";
		map2[2] = "0958-4873623";
		document.write("map2的大小是："+map2.length+"<br/>");//这里map2.length显示为3
		document.write("map2['1']="+map2['1']+"<br/>");
		document.write("map2[1]="+map2[1]+"<br/>");
		for(var i=0;i<map2.length;i++)
		{
		 document.write(map2[i]+"<br/>");
		}
		//map3
		document.write("------------------------"+"<br/>");
		var map3={"姓名":"张三","性别":"女","年龄":26};
		//动态向map3中添加key和value值,方式一:
		map3.婚否="已婚";//此种动态添加map的key和value的方式对添加的map的key标识符的命名有限制:只能以字符开头(字符中不包括"-")
		//例如:map3.-婚否="已婚";或map3.4婚否="已婚";添加的key,js都会报错
		//动态向map3中添加key和value值,方式二:
		//注意：这种方式可以用任意串做map的键.如下：
		map3["民族"]="汉族";
		map3["1-2"]="身高";
		map3["-9"]="体重";
		document.write(map3["1-2"]+"<br/>");
		document.write(map3["-9"]+"<br/>");
		document.write(map3.婚否+"<br/>");
		document.write("------------遍历map3中所有键及其值-----------"+"<br/>");
		for(var key in map3){
			document.write("map3["+key+"]="+map3[key]+"<br/>");
		}
		//使用自定义的属性的数组
		document.write("------------使用自定义的属性的数组-----------"+"<br/>");
		var a=new Array();
		a[0]={};
		a[0].姓名="张三";
		a[0].年龄=26;
		a[0].民族="汉族";
		
		a[1]={};
		a[1].姓名="李四";
		a[1].年龄=28;
		a[1].民族="回族";
		for(var i=0;i<a.length;i++)
		{
		 document.write(a[i].姓名+":"+a[i].年龄+":"+a[i].民族+"<br/>");
		}
		document.write("------------移除a[0]数组后-----------"+"<br/>");
		a.pop(0);//移除下标为0的数组元素
		//a[0]={};//此种方式是清除下标为0的数组中的值,但并没有移除下标为0的数组元素
		for(var i=0;i<a.length;i++)
		{
		 document.write(a[i].姓名+":"+a[i].年龄+":"+a[i].民族+"<br/>");
		}
    </script>

  </head>
  
  <body>
  </body>
</html>
0
顶
2
踩
分享到：
| js中的正则表达式(match,RegExp)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript实现Array(数组)和Map

    里面有三个js文件，都是需要引入的。具体的方法，可以看源码。

    JavaScript 实现Array(数组)和Map

    自己设计的用JavaScript实现Array 和Map 里面有三个Js文件，都需要引入.

    JavaScript中利用Array和Object实现Map的方法

    主要介绍了JavaScript中利用Array和Object实现Map的方法,实例分析了javascript实现map的添加、获取、移除、清空、遍历等操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下

    JavaScript中循环遍历Array与Map的方法小结_.docx

    JavaScript中循环遍历Array与Map的方法小结_.docx

    JavaScript Array map.docx

    javascript

    javascript（map功能）

    * size() 获取MAP元素个数 * isEmpty() 判断MAP是否为空 * clear() 删除MAP所有元素 * put(key, value) 向MAP中增加元素（key, value) * remove(key) 删除指定KEY... * keys() 获取MAP中所有KEY的数组（ARRAY）

    js 重写Array 类似map key，value结构

    javaScript,重写Array 类似java map的key，value键值对结构

    在JavaScript中实现map对象

    原创 在javascript中，仅提供了数组（Array）对象，本文利用数组对象来模式实现MAP对象

    JavaScript中循环遍历Array与Map的方法小结

    主要介绍了JavaScript中循环遍历Array与Map的各种方法,利用的都是js入门学习中的基础知识,需要的朋友可以参考下

    Javascript中Array.prototype.map()详解

    map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用；那些从来没被赋过值或者使用 delete 删除的索引则...

    JavaScript之Array 中every，some，map，filter， reduce

    JavaScript之Array 中every，some，map，filter， reduce1 1.every和some every表示数组中的每一项都必须通过才会返回true some表示只要数组元素某一项满足即可 var arr = [1, 2, 3, 4, 5, 6, 7,8, 9]; var a = arr....

    浅谈JavaScript中ES6新增的Set和Map结构以及Array.from方法

    只能接受数组,采用new的方式来实例化使用。 创建Set机构时，可以立即设置内容，但Set必须接受数组作为参数。 常用的属性和方法有： size 属性： 获取该数据结构中,数据的数据个数 add() 方法： 向该数据结构中,追加...

    Javascript Array 对象方法使用.md

    javascript 数组中，filter和map使用方法和案例小结。介绍了filter和map的基本使用，语法，使用案例，场景案例及一些注意点

    javascript中Array数组的迭代方法实例分析

    本文实例讲述了javascript迭代的方法。分享给大家供大家参考。具体实现方法如下： 代码如下://filter() 利用指定的函数确定是否返回数组中包涵的某一项 var num = [1,2,3,4,5,6,12]; num.filter(function(item, ...

    Array.prototype.map:符合Array.prototype.map规范的polyfill

    array.prototype.map 符合ES5规范的Array.prototype.map填充程序/ polyfill / replacement可以使用到ES3。 该软件包实现了接口。 它可以在ES3支持的环境中工作并符合。 因为Array.prototype.map依赖于接收方（“ ...

    Javascript中关于Array.filter()的妙用详解

    和map类似，Array的filter也接收一个函数。但是和map不同的是， filter把传入的函数依次作用于每个元素，然后根据返回值是 true 还是false决定保留还是丢弃该元素。 实例介绍 例如，在一个Array中，删掉偶数，只保留...

    javascript map()方法解析

    var new_array = arr.map(function callback(currentValue[, index[, array]]) { // Return element for new_array }[, thisArg]) 参数 callback：生成新数组元素的函数，使用三个参数： currentValue：callback ...

    JavaScript-Array-Helper

    JavaScript-Array-Helper 在ES6 JavaScript中，您将不得不学习新的数组帮助程序，而不是替换循环，而是要有另一种方法来解决您的代码，或者以更有组织的方式减少代码。怎么跑？ node for-each-example.js 笔记...

Magicbox
Global site tag (gtag.js) - Google Analytics