释放双眼，带上耳机，听听看~！
上节，学完循环了~
现在学Javascript的函数和数组。
JavaScript语法
每一种语言都有自己的语法规则，JS语法与Java很像，所以学习起来比较容易。JS中也一样有变量，语句，函数，数组等常见语言组成元素。
1.一般函数
格式：
2
3
4
5
6
2{
3 执行语句；
4 return 返回值；
5}
6
函数是多条执行语句的封装体，只有被调用才会被运行。
注意：调用有参数的函数，但没有给其传值，函数一样可以运行，或者调用没有参数的函数，给其传值，该函数也一样运行。
说的简单点：只要写了函数名后面跟了一对小括号，该函数就会运行。那么传递的参数呢？
其实，在函数中有一个参数数组对象（arguments），该对象将传递的参数都封装在一个数组中。
例：
2
3
4
5
2{
3 alert(arguments.length);
4}
5
demo(“hello”,123,true);//调用函数。
那么弹出的对话框结果是3，如果想得到所有的参数值，可以通过for循环遍历该数组。
2
3
4
5
2{
3 alert(arguments[x]);
4}
5
为了增强阅读性，最好按照规范，按定义好的形式参数传递实际参数。
函数在调用时的其他写法：
var show = demo();//show变量接收demo函数的返回值。
var show = demo;//这种写法是可以的，意为show和demo代表同一个函数。
//那么该函数也可以通过show()的方式运行。
代码演示1：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
2 <head>
3 <title>javascript函数用法演示</title>
4 </head>
5
6 <body>
7 <!--
8 ※java中函数定义的格式：
9 int sum(int a,int b){
10 ....
11 return s
12 }
13
14 ※js中函数定义的格式：
15 function sum(a,b){
16 ....
17 return s
18 }
19 ▲▲js中的函数可以理解成一个function类型的对象
20 -->
21
22 <script type="text/javascript">
23 //※浏览器对js代码是边解析边执行的
24 //注意，函数的调用 应该在浏览器解析完 该函数的定义 之后进行
25 //调用
26 hello();//ie11中无效---因为浏览器解析该语句时，此函数还没有定义
27 </script>
28
29 <script type="text/javascript">
30 //定义---无参函数
31 function hello(){
32 document.write("hello function!");
33 }
34 hello();//调用
35
36 //定义---有参函数
37 function add(a,b){
38 var s = a+b;
39 return s;
40 }
41 document.write("<br/>")
42 document.write("s="+add(10,23));
43 </script>
44
45 </body>
46
47
48</html>
49
50
360浏览器8.1 演示1结果：
代码演示2：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
2<head>
3<title>javascript函数用法演示2---一点小细节</title>
4</head>
5
6<body>
7 <script type="text/javascript">
8 function show(x, y) {
9 document.write(x + "," + y);
10 document.write("<br/>");
11 }
12 show(23, 22);//23,22
13 show(23); //23,undefined
14 show(); //undefined,undefined
15 show(23, 22, 11);//23,22 后面的一个参数函数接收了但没有用
16
17 //函数的参数全部是js内部用一个arguments数组来接收与存放的---该对象是js内部隐含帮我们做的，我们可以访问到这个数组对象
18 function show2(x, y) {
19 arguments[0] = 1000;//可以把形参x的值改掉
20 document.write(x + "," + y + "<br/>");
21 for ( var i = 0; i < arguments.length; i++) {
22 document.write(arguments[i] + ",");
23 }
24 }
25 show2(11, 22, 33, 44);
26 document.write("<br/>");
27 //※综上，函数的技术细节：
28 //1, js中的函数是没有重载，只以函数名来识别的---其实函数名就是一个function对象的引用的名字
29 //2, js函数中有一个内部维护的arguments数组来接收与保存形参
30 </script>
31
32 <script type="text/javascript">
33 function getValue() {
34 document.write("aa");
35 document.write("<br/>");
36 return 100;
37 }
38 var v = getValue();
39 document.write("v=" + v);
40 document.write("<br/>");
41 var v2 = getValue; //相当于getValue把引用值传给v2，因此v2也是一个“function对象”----getValue和v2都是引用变量
42 document.write("v2=" + v2);//其实是输出v2对象的toString()
43 document.write("<br/>");
44 document.write("v2=" + v2()); //调用v2这个函数对象---调用函数
45 document.write("<br/>");
46 </script>
47
48</body>
49
50
51</html>
52
53
360浏览器8.1 演示2结果：
动态函数
通过Js的内置对象Function实现。
例：
2
3
4
5
6
7
8
9
2 demo(4,6);
3 如同：
4 function demo(x,y)
5 {
6 alert(x+y);
7 }
8 demo(4,6);
9
不同的是，动态函数，参数以及函数体都可以通过参数进行传递，可以动态指定。
匿名函数
格式 : function(){…}
例：
var demo = function(){…}
demo();
通常在定义事件属性的行为时较为常用。
例：
2
3
4
5
6
2 {
3 alert(“load ok”);
4 }
5 window.onload = test;
6
可以写成匿名函数的形式：
2
3
4
5
2 {
3 alert(“load ok”);
4 }
5
匿名函数就是一种简写格式。
代码演示：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
2 <head>
3 <title>javascript函数用法演示3---动态函数，匿名函数</title>
4 </head>
5
6 <body>
7
8 <!--
9 ※1※ 动态函数:使用的是js中内置的一个对象---- Function
10 注意，小写的function是用来声明的，而大写的Function是用来new对象的
11
12 //把下面的函数写成动态函数
13 function add(a,b){
14 var s = a+b;
15 return s;
16 }
17 -->
18 <script type="text/javascript">
19 //把函数的形参用第1个参数传入，函数体中的代码用第2个参数传入----可以通过调用者动态传入函数体，因此非常灵活，该思想类似Java当中的类反射。
20 var add = new Function("a,b","var s = a+b; return s; ");
21 document.write( add(12,13) );
22 </script>
23
24
25 <!--
26 ※2※ 匿名函数: 没有函数名的函数。这种方式我们以后在事件处理时会经常使用，类似Java中的匿名内部类经常用在事件监听器中一样
27 -->
28 <script type="text/javascript">
29 var fun= function(a,b){
30 return a+b;
31 };
32 document.write( fun(2,3) );
33
34 </script>
35
36 <!-- 用匿名函数给按钮添加事件绑定 -->
37 <button id="btn1">一个按钮</button>
38 <script type="text/javascript">
39 btn1.onclick=function(){
40 alert('aa');
41 };
42 </script>
43
44 </body>
45
46
47</html>
48
49
360浏览器8.1 演示结果：
弹窗：
5.数组
方便操作多元素的容器，可以对其中的元素进行编号。
特点：可以存任意元素，长度是可变的。
格式：
2
3
4
5
2 arr[0] = “hello”;
3 arr[1] = 123;
4 var arr = [‘hello’,123,true,”abc”];
5
通过遍历即可对数组进行基本操作。
2
3
4
5
2 {
3 alert(arr[x]);
4 }
5
代码演示：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
2 <head>
3 <title>javascript数组用法演示</title>
4 </head>
5
6 <body>
7 <script type="text/javascript">
8 //数组定义的方式1: 定义时直接赋初值
9 var arr =[12,34,2,-3,90,12];
10 document.write( typeof(arr) );
11 //object
12 document.write("<br/>");
13 document.write("len:" + arr.length);
14 document.write("<br/>");
15 //遍历数组
16 for(var x=0;x<arr.length;x++){
17 document.write("arr["+x+"]="+ arr[x]+" ");
18 }
19 document.write("<br/>");
20
21 arr[0]=-10;
22 arr[7]=66;//数组可以自动增长，且arr[6]没有赋值则是undefined
23
24 document.write("len:"+arr.length+" 数组长度自动加长");
25 document.write("<br/>");
26
27 for(var x=0;x<arr.length;x++){
28 document.write("arr["+x+"]="+ arr[x]+" ");
29 }
30 document.write("<br/>");
31 document.write("<hr/>");
32
33 var arr2=[];
34
35 document.write("arr2.length="+arr2.length);//0
36 document.write("<br/>");
37
38 arr2[1]=10;
39 for(var x=0;x<arr2.length;x++){
40 document.write("arr2["+x+"]="+ arr2[x]+" ");
41 }
42 document.write("<br/>");
43
44 //※※错误的声明方式--数组
45 //int[] arr3 ={1,2,3};
46 //var[] arr3 = [1,2,3];//错的，[]代表的是数组类型，而js中，所有数据类型只有一个var声明，不存在“var[]”这种类型
47
48 document.write("同一个数组的元素可以是不同类型！！！<br/>");
49 var arr4=[1,2,3,100];
50 arr4[0]="abc";
51 arr4[1]=true;
52 for(var x=0;x<arr4.length;x++){
53 document.write("arr4["+x+"]="+ arr4[x]+" ");
54 }
55 document.write("<br/>");
56
57 //※※综上,js数组的两个特点：
58 //1,长度是可变的
59 //2,元素的类型是任意的
60 </script>
61
62 <hr/>
63
64 <script type="text/javascript">
65 //数组定义的方式2: 使用js中的Array对象来定义
66 var arr10 = new Array(); //※ 空参
67 for(var x=0;x<arr10.length;x++){
68 document.write("arr10["+x+"]="+ arr10[x]+" ");
69 }//什么都没有,因为长度是0
70 document.write("arr10.length="+arr10.length);//0
71 document.write("<br/>");
72
73 var arr11 = new Array(8); //※ 一个参数，代表的是数组的长度
74 arr11[2]=12;
75 arr11[3]="abc";
76 for(var x=0;x<arr11.length;x++){
77 if(x==2||x==3){
78 document.write("<font color=red >arr11["+x+"]="+ arr11[x]+" </font>");
79 }else{
80 document.write("arr11["+x+"]="+ arr11[x]+" ");
81 }
82 }
83 document.write("<br/>");
84
85 var arr12 = new Array(10,11,12); //※ 多个参数，代表的是数组元素值
86 arr12[5]="aaa";
87 for(var x=0;x<arr12.length;x++){
88 document.write("arr12["+x+"]="+ arr12[x]+" ");
89 }
90 document.write("<br/>");
91
92
93 </script>
94
95 </body>
96
97
98</html>
99
100
360浏览器8.1 演示结果：
接下来将函数和数组结合起来用用，写个排序和二分查找。
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
2 <head>
3 <title>javascript数组与函数练习</title>
4 </head>
5
6 <body>
7 <script type="text/javascript">
8 //写一个获取数组中元素最大值的函数
9 //若有多个，返回第一个
10 function getMax(arr){
11 var max=0;//最大值的下标
12 for(var x=1;x<arr.length;x++){
13 if(arr[x]>arr[max]){
14 max = x;
15 }
16 }
17 return arr[max];
18 }
19 //调用
20 var arr=[23,-3,45,0,-100,47,22];
21 var v = getMax(arr);
22 document.write("数组最大值的下标："+v);
23 document.write("<br/>");
24 document.write("数组最大值:"+v);
25 document.write("<br/>");
26
27
28 //数组选择排序
29 function sortArray(arr){
30 for(var x=0;x<arr.length-1;x++){
31 var min=x;
32 for( var y=x+1;y<arr.length;y++){
33 if(arr[min]>arr[y]){
34 min=y;
35 }
36 }
37 if(min!=x){
38 swap(arr,x,min);
39 }
40 }
41 }
42 function swap(arr,x,y){
43 var temp = arr[x];
44 arr[x] = arr[y];
45 arr[y] = temp;
46 }
47 document.write("<hr/>");
48 document.write("排序前："+arr+"<br/>");
49 sortArray(arr);
50 document.write("排序后："+arr+"<br/>");
51
52
53 //我们的输出函数---把内容输出到页面且换行
54 function println(str){
55 document.write(str+"<br/>");
56 }
57 println(arr);
58 sortArray(arr);
59 println(arr);
60
61 //到数组当中查找元素
62 function searchElement(arr,key){
63 for(var x=0;x<arr.length;x++){
64 if(arr[x]==key){
65 return x;
66 }
67 }
68 return -1;
69 }
70 println( searchElement(arr,0) );
71 println( searchElement(arr,123) );
72
73 </script>
74
75 <script type="text/javascript">
76 //二分查找
77 function binarySearch(arr,key){
78 var max,min,mid;
79 min=0;
80 max=arr.length-1;
81 while(min<=max){
82 mid = (max+min)>>1;
83 if(key>arr[mid]){//落在右边
84 min = mid+1;
85 }else if(key<arr[mid]){//落在左边
86 max = mid-1;
87 }else{
88 return mid;
89 }
90 }
91 return -1;
92 }
93 println("二分查找结果：");
94 println( binarySearch(arr,0) );
95 println( binarySearch(arr,123) );
96
97 //数组反转
98 function reverseArray(arr){
99 for(var start=0,end=arr.length-1; start<end; start++,end--){
100 swap(arr,start,end);
101 }
102 }
103 reverseArray(arr);
104 println("反转之后:"+arr);
105 </script>
106
107
108 </body>
109
110
111</html>
112
113
360浏览器8.1 演示结果：
JS中的全局变量和局部变量解答：
代码演示：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
2 <head>
3 <title>javascript中的全局变量与局部变量</title>
4 </head>
5
6 <body>
7 <!--
8 全局变量: js中，直接在脚本当中定义的变量全都是全局变量。
9 局部变量: 在函数中定义的变量是局部的。
10 -->
11
12 <script type="text/javascript">
13 function println(str){
14 document.write(str+"<br/>");
15 }
16 var a=100;
17 println("遍历输出0-9：");
18 for(var x=0;x<10;x++){
19 println("x="+x);
20 }
21 </script>
22
23 <script type="text/javascript">
24 println("aaaa="+a);
25 println("xxxx="+x);
26
27 function aa(){
28 var y=123;
29 document.write("y="+y);
30 return;
31 }
32 aa();
33 document.write("<br/>");
34
35 println("yyyy="+y);//不能访问函数内部定义的变量，因为它是局部的
36 </script>
37
38 <!-- 一点小细节 -->
39 <script type="text/javascript">
40 var n=3;//全局变量n
41 function abc(n){//局部变量n---形参是方法内部声明的局部变量，值由arguments[0]在使用n时临时赋给它的
42 n=6;
43 }
44 abc(n);//把x传给方法abc，并在其中试图对该值进行更改--未遂!----本质上实参n是把值传给了函数中的arguments数组了
45 println("n="+n);
46 </script>
47
48 </body>
49
50
51</html>
52
53
360浏览器8.1 演示结果：
下一次就学习JS的对象了。毕竟JS是基于对象的语言。
