JavaScript中的Array的创建方式和Array与Map的应用
一直以来对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>
<!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/>");//map2document.write("------------------------"+"<br/>");var map2=new Array();map2['张三']="028-77777";map2['李四']="0532-000000";map2['王五']="0816-909090";document.write("map2的大小是:"+map2.length+"<br/>");//这里map2.length显示为0document.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显示为3document.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/>");}//map3document.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>