JavaScript数组_第1页
JavaScript数组_第2页
JavaScript数组_第3页
JavaScript数组_第4页
JavaScript数组_第5页
已阅读5页，还剩6页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、JavaScript数组JavaScript中的Array对象就是数组，首先是一个动态数组，无需预先制定大小，而且是一个像Java中数组、ArrayList、Hashtable等的超强综合体。一、数组的声明常规方式声明：1、var arrName = new Array();/创建一个数组2、var arrName = new Array(size);/创建一个数组并指定长度，注意不是上限，是长度3、var arrName =new Array("孤傲苍狼","白虎神皇","灭世魔尊");/创建一个数组，并初始化数组的内容注意：虽然v

2、ar arrName = new Array(size);指定了长度，但实际上所有情况下数组都是变长的，也就是说即使指定了长度为2，仍然可以将元素存储在规定长度以外的，注意：这时长度会随之改变。Array的简化声明1、普通数组初始化：var arr = 3, 5, 6, 8, 9;范例1：复制代码 1 <script type="text/javascript"> 2 /JavaScript声明数组的四种方式 3 var arr1 = new Array();/创建一个空数组 4 arr10="xdp" 5 arr11="gacl&

3、quot; 6 var arr2 = new Array(2);/创建一个数组并指定长度为2 7 arr2"name0"="xdp"/arr2第一个元素 8 arr2"name1"="gacl"/arr2第二个元素 9 arr2"name2"="xtxd"/arr2第三个元素，arr2虽然在声明时指明了长度为2，但是还是可以添加超过其指明长度的元素10 var arr3 = new Array("孤傲苍狼","白虎神皇","灭

4、世魔尊");/创建一个数组并初始化数组中的元素11 var arr4 = 1,true,"String"/Array的简化声明12 13 document.write("遍历arr1中的元素：<br/>");14 for(var i in arr1) 15 document.write(arr1i+"<br/>");16 17 document.write("-<br/>");18 document.write("遍历arr2中的元素：<br/>&

5、quot;);19 for(var i in arr2) 20 document.write("arr2""+i+""="+arr2i+"<br/>");21 22 document.write("-<br/>");23 document.write("遍历arr3中的元素：<br/>");24 for(var i in arr3) 25 document.write(arr3i+"<br/>");26 27

6、 document.write("-<br/>");28 document.write("遍历arr4中的元素：<br/>");29 for(var i in arr4) 30 document.write(arr4i+"<br/>");31 32 </script>复制代码运行结果：范例2：复制代码 1 <script type="text/javascript"> 2 var names = new Array();/普通方式声明数组，不需要指明数组的

7、长度 3 names0 = "孤傲苍狼" 4 names1 = "白虎神皇" 5 names2 = "灭世魔尊" 6 for (var i = 0; i < names.length; i+) 7 document.write("names"+i+" = "+namesi); 8 document.write("<br/>"); 9 10 11 var pinyins = new Array();12 pinyins"人" = "

8、;ren"13 pinyins"口" = "kou"14 pinyins"手" = "shou"15 document.write("pinyins"人" = "+pinyins"人");16 document.write("<br/>");17 document.write("pinyins.手 = "+pinyins.手);/像Hashtable、Dictionary那样用，而且像它们一样效

9、率高。18 document.write("<br/>");19 /Array的简化声明20 var arr1 = 3, 5;/普通数组初始化21 for (var i = 0; i < arr1.length; i+) 22 document.write("arr1"+i+" = "+arr1i);23 document.write("<br/>");24 25 </script>复制代码运行结果：二、数组练习Ferris写过一个数组的案例，以下就是他的案例代码，挺全的，

10、思路也挺好！复制代码 1 <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "http:/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns=" 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 <title>数组练习：各种数组方法的使用</

11、title> 5 <style> 6 divcolor:green;padding:10px 15px;margin:12px 0;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;word-wrap:break-word; 7 </style> 8 <script type="text/javascript"> 9 window.onload = function () 10 11 var aDiv = document.getElementsB

12、yTagName("div"); 12 var aInput = document.getElementsByTagName("input"); 13 var i = 0; 14 var bS1 = bS2 = true; 15 var aTmp = ; 16 17 /删除/添加第一项 18 aInput0.onclick = function () 19 20 aTmp = getArray(aDiv0.innerHTML); 21 bS1 ? 22 /删除第一项， shift()方法 23 (aTmp.shift(), this.value = th

13、is.value.replace("删除","添加"), bS1 = false) : 24 /添加第一项, unshift()方法 25 (aTmp.unshift("January(1)"), this.value = this.value.replace("添加","删除"), bS1 = true); 26 /输出 27 aDiv0.innerHTML = aTmp.join() 28 ; 29 30 31 /删除/添加最后一项 32 aInput1.onclick = function

14、 () 33 34 aTmp = getArray(aDiv0.innerHTML); 35 bS2 ? 36 /删除最后一项, pop()方法 37 (aTmp.pop(), this.value = this.value.replace("删除","添加"), bS2 = false) : 38 /添加最后一项, push()方法 39 (aTmp.push("December(12)"), this.value = this.value.replace("添加","删除"), bS2 =

15、true); 40 /输出 41 aDiv0.innerHTML = aTmp.join() 42 ; 43 44 45 /复制, concat()方法 46 aInput2.onclick = function () 47 48 aTmp = getArray(aDiv1.innerHTML); 49 /输出 50 aDiv1.innerHTML = aTmp.concat(aTmp).toString().replace(/s/g,"") 51 ; 52 53 54 /还原, 利用数组的 length 特点 55 aInput3.onclick = function (

16、) 56 57 aTmp = getArray(aDiv1.innerHTML); 58 /设置数组长度 59 aTmp.length = 10; 60 /输出 61 aDiv1.innerHTML = aTmp.join() 62 ; 63 64 65 /第三组数据还原 66 aInput4.onclick = function () 67 68 aTmp = "red","green","blue","white","yellow","black","brown

17、" 69 /输出 70 aDiv2.innerHTML = aTmp.join() 71 ; 72 73 74 /删除前三项 75 aInput5.onclick = function () 76 77 aTmp = getArray(aDiv2.innerHTML); 78 /删除, 0开始, 删除3个 79 aTmp.splice(0, 3); 80 /输出 81 aDiv2.innerHTML = aTmp.join() 82 ; 83 84 85 /删除第二至三项 86 aInput6.onclick = function () 87 88 aTmp = getArray(a

18、Div2.innerHTML); 89 /删除, 2开始, 删除2个 90 aTmp.splice(1, 2); 91 /输出 92 aDiv2.innerHTML = aTmp.join() 93 ; 94 95 96 /在第二顶后插入"orange", "purple" 97 aInput7.onclick = function () 98 99 aTmp = getArray(aDiv2.innerHTML);100 /插入, 2开始, 插入"orange", "purple"101 aTmp.splice(

19、1, 0, "orange", "purple"); 102 /输出103 aDiv2.innerHTML = aTmp.join()104 ;105 106 107 /替换第二项和第三项108 aInput8.onclick = function ()109 110 aTmp = getArray(aDiv2.innerHTML);111 /插入, 2开始替换112 aTmp.splice(1, 2, "#009900", "#0000ff"); 113 /输出114 aDiv2.innerHTML = aTmp

20、.join()115 ;116 117 /将div中的内容转为数组118 /str div对象119 function getArray(str)120 121 aTmp.length = 0;122 str = str.split(",");123 for (var i in str)aTmp.push(stri);124 return aTmp125 126 127 </script>128 </head>129 <body>130 <div>January(1),February(2),March(3),April(4)

21、,May(5),June(6),July(7),Aguest(8),September(9),October(10),November(11),December(12)</div>131 <input value="删除January(1)" type="button">132 <input value="删除December(12)" type="button">133 <div>0,1,2,3,4,5,6,7,8,9</div>134 <inpu

22、t value="复制" type="button">135 <input value="还原" type="button">136 <div>red,green,blue,white,yellow,black,brown</div>137 <input value="还原" type="button">138 <input value="删除前三项" type="button"

23、;>139 <input value="删除第二至三项" type="button">140 <input value="在第二项后插入(orange, purple)" type="button">141 <input value="替换第二项和第三项" type="button">142 143 144 </body></html>JavaScript函数(function)一、函数基本概念为完成某一功能的

24、程序指令(语句)的集合，称为函数。二、JavaScript函数的分类1、自定义函数(我们自己编写的函数)，如：function funName()2、系统函数(JavaScript自带的函数)，如alert函数。三、函数的调用方式1、普通调用：functionName(实际参数.)2、通过指向函数的变量去调用：var myVar=函数名;myVar(实际参数.);四、函数返回值1.当函数无明确返回值时，返回的值就是"undefined"。2.当函数有返回值时，返回值是什么就返回什么。函数测试代码：复制代码 1 <script type="text/javas

25、cript"> 2 var str="window.alert('孤傲苍狼');" 3 eval(str);/eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。 4 /*自定义函数*/ 5 function test(str) 6 alert(str); 7 8 window.alert(test);/输出test函数的定义 9 /函数的调用方式110 test("孤傲苍狼");11 /函数的调用方式212 var myFunction=test;13 myFunction("白虎神

26、皇");14 window.alert(myFunction);15 /*当函数无明确返回值时，返回的也是值 "undefined"*/16 var retVal=test("test");/test函数执行完之后，并没有返回值，因此retVal变量接收到的返回值结果是undefined17 alert("retVal="+retVal);/输出undefined18 </script>复制代码 五、函数的深入使用5.1、可变参数函数的参数列表可以是任意多个，并且数据类型可以是任意的类型，JavaScript的函

27、数天然支持可变参数，JavaScript有一个arguments变量可以访问所有传到函数内部的参数。范例：JavaScript使用arguments创建参数可变的函数复制代码 1 <script type="text/javascript"> 2 /*add函数是一个参数可变的函数*/ 3 function add() 4 var result=0; 5 for(var i=0;i<arguments.length;i+) 6 /alert(argumentsi); 7 result+=argumentsi; 8 9 10 return result;11

28、 12 alert("add(1,2,3)="+add(1,2,3);/调用add函数时传入3个参数13 alert("add(1,2,3,4,5,6)="+add(1,2,3,4,5,6);/调用add函数时传入6个参数14 alert("add()="+add();/调用add函数时不传入参数15 alert("add(1,"HelloWorld")="+add(1,"HelloWorld");/调用add函数时传入不同类型的参数16 </script>复制代

29、码运行结果：5.2、javascript创建动态函数JavaScript支持创建动态函数，动态函数必须用Function对象来定义（Function是javascript中的一个对象，是固定不变的，规定Function对象的"F"必须大写，当是function的时候，我们知道是定义函数的时候所使用的一个关键字：function funName(x，y)，当是Function的时候（F大写的时候），我们知道是javascript中的对象）创建动态函数的基本格式：var 变量名 = new Function("参数1"，"参数2"，&qu

30、ot;参数n"，"执行语句");使用new关键字（new是javascript中一个关键字，也是固定的，我们在定义动态函数的时候必须要使用new来创建这个Function对象）我们先定义一个变量： var 变量名，在这里，变量名是随便的，然后我们再使用new关键字创建一个Function对象，然后再把这个对象赋值给这个任意的变量，也就是：var 变量名 = new Function("参数1"，"参数2"，"参数n"，"执行语句");Function后面的括号里先是传递给函数的参数，然

31、后用一个逗号（，）隔开然后是这个函数要执行的功能的代码看下面的一段代码：1 <script type="text/javascript">2 var square = new Function ("x","y","var sum ; sum = x+y;return sum;");3 alert("square(2,3)的结果是："+square(2,3);4 </script>square是动态创建的函数，在Function对象后面的括号里的每一部分内容都必须是字符串形

32、式的，也就是说都必须用引号（""或者是''）括起来，第一部分是传递给这个动态函数的第一个参数“x”，第二部分是传递给这个动态函数的第二个参数“y“，第三部分是这个函数要完成的功能的代码，这个函数要完成的功能是定义一个变量sum，让sum等于传递给这个函数的两个参数x和y的和，然后返回他们相加以后的值（return sum），调用后运行结果如下：这段代码：1 var square = new Function ("x","y","var sum ; sum = x+y;return sum;");和下

33、面这段代码：1 function square (x,y)2 var sum;3 sum = x+y;4 return sum;5 是一摸一样的，只不过一个是动态函数，一个是静态函数。那下面我们就来想一下，为什么要用动态函数呢，动态函数有什么特殊的地方有什么优点呢？在静态函数里是：1 function square (x,y)2 var sum;3 sum = x+y;4 return sum;5 而在动态函数里是：1 new Function ("x","y","var sum ; sum = x+y;return sum;");我

34、们可以看到，每一个句子两边都加上了引号"x"还有"y"还有"var sum ; sum = x+y; return sum;"这些两边都加上了引号，也就是说在new Function后面的小括号里面的每一个语句两边都是有引号的，也就是说他们都是以字符串的形式表示和被调用的，而字符串又是可以由变量来定义或者是改变的，也就是说，我们可以定义变量，让变量的值等于这些字符串： 1 <script type="text/javascript"> 2 var a = "var sum;" 3 v

35、ar b = "sum = x + y;" 4 var c = "return sum;" 5 var square = new Function ( "x", "y", a+b+c); 6 alert(square (2,3);7 </script>在这里，我们定义了变量a，b，c，我们让a="var sum;"，让b="sum = x+y;"，让c = "return sum;"这样：var square = new Function (&

36、quot;x","y","var sum ; sum = x+y;return sum;");我们就可以写成：var square = new Function ( " x", "y",a+b+c);因为a，b，c是三个字符串，字符串相加得到的还是字符串。我们为什么要把代码分成一小段一小段的代码呢？，把一个字符串分成了若干个独立的字符串的优点就在于我们可以通过修改其中的某些字符串来随时改变函数的作用。例如：复制代码 1 <script type="text/javascript"> 2 var a = "var sum;" 3 var b = "sum = x + y;" 4 var c = "return sum;&

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论