正文
JavaScript基础之函数与数组
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
函数
函数的基本概念
为完成某一功能的程序指令(语句)的集合，称为函数。有的程序员把函数称为方法，希望大家不要被这两个名词搞晕了。
函数分为：自定义函数、系统函数(经常查看js帮助手册)。
js自定义函数基本语法：
function 函数名(参数列表){
//代码语句
return 值;//有无返回值是可以选择的。
}
参数列表：表示函数的输入
- 函数主体：表示为了实现某一功能代码块
函数可以有返回值，也可以没有
例，
函数.html：
<!DOCTYPE html>
<htm>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="我的函数.js"></script>
<script type="text/javascript">
<!--为了浏览器的兼容性，有时这样写
var num1 = window.prompt("请输入第一个数");
var num2 = window.prompt("请输入第二个数");
var operator = window.prompt("请输入运算符");
num1 = parseFloat(num1);
num2 = parseFloat(num2);
//如何调用函数
document.writeln("res="+jiSuan(num1, num2, operator));//-->
</script>
</head>
<body></body>
</html>
我的函数.js：
//自定义函数
function jiSuan(num1, num2, operator) {//特别强调，参数名不要带var
var res = 0;
if(operator == "+") {
res = num1 + num2;
} else if(operator == "-") {
res = num1 - num2;
} else if(operator == "*") {
res = num1 * num2;
} else {
res = num1 / num2;
}
return res;//返回
}
如果其它多个html/php/jsp要使用自定义函数，必需引入。上面的函数单独提出，写到js文件中，然后在需要的html/php/jsp的地方引入。
js文件引入语法：
<script language="javascript" src="js的路径"></script> 或
<script type="text/javascript" src="js的路径"></script>
下面叙述几个全局函数：
eval()函数可计算某个字符串，并执行其中的的JavaScript代码。如：
var str = "window.alert('ok')";
//需求：把str当作一个脚本来执行
eval(str);
escape()函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。
unescape()函数可对通过escape()编码的字符串进行解码。
escape和unescape函数往往配合使用，可以防止乱码出现。如：
先使用escape()函数对字符串“李阿昀”进行编码：
var str1 = "李阿昀";
var str2 = escape(str1);
window.alert(str2);
此时浏览器弹出乱码：
然后再使用unescape()函数对通过escape()编码的字符串进行解码：
var str3 = unescape(str2);
window.alert(str3);
此时显示正常：
函数的几种调用方式
- 函数名(传递给函数的参数1，参数2，...)
- 变量=函数名，此时变量就相当于函数的引用(指针)，可以这样调用函数：变量(实际参数..)
例，
我的函数.js：
function test(val) {
window.alert("你输入的是"+val);
}
函数.html(部分)：
test("hello, world");
此时弹出对话框显示"hello, world"。
window.alert(test);
此时弹出如下对话框(会将整个函数显示出来)：
var myvar = test;
window.alert(myvar);
myvar("中国北京");
先弹出整个函数的对话框，再弹出"中国北京"字符串。
特别注意：
对于有返回值的函数调用，也可以在程序中直接使用返回的结果。(即如果有返回值，则是什么就是什么)
没有返回值的函数，则返回underined。(如，如果test()函数没有返回值，但是你有接受了，则返回的是undefined)。
函数调用——递归
函数如下：
function abc(num1) {
if(num1 > 3) {
abc(--num1);//递归
}
document.writeln(num1);
}
函数调用：
abc(5);
输出结果：3 3 4。
递归分析如图：
函数--深入使用
- 函数的参数列表可以是多个
- 参数列表可以是多个，并且数据类型可以是任意的类型
- js支持参数个数可变的函数
- js支持创建动态函数
例，编写一个函数，可以接受任意多个数，并计算他们的和。
我的函数.js：
function abc2(n1) {//参数有多少本质上不关心，只关心函数名
//在js中有一个arguments，可以访问所有传入值
//window.alert(arguments.length);
for(var i = 0; i < arguments.length; i++) {
window.alert(arguments[i]);
}
}
函数.html(部分)：
window.alert("abc2(45, 90, 900);");
abc2(45, 90, 900);//可全传数值
window.alert("abc2(4,\"hello, world\");");
abc2(4, "hello, world");//即可传数值又可传字符串
window.alert("abc2();");
abc2();//还可什么都不传
使用function类创建函数(???)
创建动态函数的基本语法格式：
var varName=new function(argument1,...,lastArgument);
说明：所有的参数都必需是字符串型的，最后的参数必需是这个动态函数的功能程序代码。
例，
var square=new function("x","y","var sum;sum=x*x+y*y;return sum;");
alert(square(3,2));
var alsoDoSquare=doAdd;
alert(alsoDoSquare(3,2));
注意：闭包和函数的作用域及this还没有讲，必需放在面向对象中讲解。
数组
为什么需要数组?
使用数组，这种数据类型(引用类型/复杂类型/复合类型)。数组的基本概念：用于存放一组数据。
特别说明：js的数组不区分数据类型，可以存放任意数据类型。
举例说明：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var weights = [3, 5, 1, 3.4, 2, 50];
var all_weight = 0;
var avg_weight = 0;
for(var i = 0; i < weights.length; i++) {
all_weight += weights[i];
}
avg_weight = all_weight / weights.length;
//如果你想知道avg_weight数据类型是什么
window.alert(avg_weight.constructor);
//avg_weight = new Number(avg_weight);
document.writeln("总体重是"+all_weight+" 平均体重是"+avg_weight.toFixed(2))
</script>
</head>
<body></body>
</html>
分析：当你想知道avg_weight数据类型是什么时?
window.alert(avg_weight.constructor);
弹出如下对话框：
Number(JS原型对象(又称类))中toFixed()函数：把数字转换为字符串，结果的小数点后有指定位数的数字(把Number四舍五入为指定小数位数的数字)。
js基本语法--一维数组
js中的数组是用于表示一组数据的集合，它由一对方括号[]包围，数组的每个元素用逗号分隔，数组元素可以是任意类型的数据。
一维数组基本语法：
var 数组名=[元素值1,元素值2,...];
1、创建数组。如：
var a=["shunping",123,"1.1",4.5,true];
2、数组在内存中的存在形式。js中的数组是引用传递(地址传递)。如下例：
var myval = 900;
function abc(val) {
val = 90;
}
abc(myval);
window.alert(myval);
函数调用传入值：输出结果为900。
内存分析图：
又如：
var myarr = [456, 90, 900];
function abc2(arr) {
arr[0] = 35;
}
abc2(myarr);
for(var i = 0; i < myarr.length; i++) {
document.writeln(myarr[i]);
}
函数调用传入引用地址：输出结果为35 90 900
内存分析图：
数组的引用(使用)
数组名[下标]。比如：var a=[23,"hello",4.5]，你要使用a数组的第三个元素a[2]，则输出4.5，如果访问a[3]，则访问越界，输出undefine。
结论：不能访问不存在的元素。数组的下标是从0开始编号的。
js数组允许动态增长
例，
var a=[45,true];
window.alert("size="+a.length);
a[2]=56;//动态增长
alert(a[2]);
window.alert("size="+a.length);
js数组的特点：js数组是可以动态的增长的，这个和java的数组不一样，有点类似java中的ArrayList。
js数组的几个重要应用
- 使用数组名.length可以得到数组大小；
- 拆分字符串，字符串.split(拆分标准)可以得到一个数组。
split()方法用于把一个字符串分割成字符串数组。语法如下：
stringObject.split(separator,howmany)
howmany：可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。
如下例：
var str = "hello world abc 阿昀";
var arr = str.split(" ", 2);
for (var i = 0; i < arr.length; i++) {
document.writeln(arr[i]);
}
输出结果：hello world。
遍历一维数组
遍历数组有很多种方法，可以使用for循环，while循环遍历数组，除了常规用法外，还可以如下使用：[此方法知道就好，不推荐使用]。例：
arr = [45, 90, 0];
arr['gg'] = 9000;//下标亦可使用字符串。
for (var key in arr) {
window.alert(key + " = " + arr[key]);
}
注意：下标亦可使用字符串。
注意下例：(只会输出45 90 0，不会输出9000，看来JS数组下标默认是数字)。
arr = [45, 90, 0];
arr['gg'] = 9000;
document.writeln(arr);
一维数组--小结
- 数组可存放任意类型的数据
- 数组大小不必事先指定，可以动态增长
- 数组名可以理解为指向数组首地址的引用
- 数组元素从0开始编号
js基本语法--多维数组
多维数组--二维数组
多维数组我们只介绍二维数组，一维数组的元素还可以是一个数组，就构成二维数组。如：
var arr=[["shunping",123,4.5],["a","b","c"]];
遍历二维数组。如下例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var arr=[["shunping",123,4.5],
["a","b","c"],
[89,0]];
for (var i = 0; i < arr.length; i++) {
//输出第一行(二维数组一个元素[数组])
for (var j = 0; j < arr[i].length; j++) {
document.writeln(arr[i][j]+" ");
}
document.writeln("<br/>");
}
</script>
</head>
<body></body>
</html>
如果我要直接访问"c"?那么代码如下：
window.alert(arr[1][2]);
例，请用二维数组输出如下图形。
0 0 0 0 0 0
0 0 1 0 0 0
0 2 0 3 0 0
0 0 0 0 0 0
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var arr=[[0,0,0,0,0,0],
[0,0,1,0,0,0],
[0,2,0,3,0,0],
[0,0,0,0,0,0]];
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr[i].length; j++) {
document.writeln(arr[i][j]);
}
document.writeln("<br/>");
}
</script>
</head>
<body></body>
</html>
多维数组练习：矩形转置。如：
2 4 6 8 2 8 9
8 9 0 -1---> 4 9 6
9 6 2 1 6 0 2
8 -1 1
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var arr=[[2,4,6,8],
[8,9,0,-1],
[9,6,2,1]];
var arr_new = [];
// arr_new[0] = [45, 46];
// window.alert(arr_new[0][0]); //初始化，定下有多少行
for(var i = 0; i < arr[0].length; i++) {
arr_new[i] = [];
}
//可以动态的添加数据
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr[i].length; j++) {
arr_new[j][i]=arr[i][j];
}
} for (var i = 0; i < arr_new.length; i++) {
for (var j = 0; j < arr_new[i].length; j++) {
document.writeln(arr_new[i][j]+" ");
}
document.writeln("<br/>");
}
</script>
</head>
<body></body>
</html>
js基本语法--排序
排序的介绍
排序是将一组数据，依指定的顺序进行排列的过程。
排序的分类：(交换式排序法、选择式排序法和插入式排序法)。
排序(Sorting)是数据处理中一种很重要的运算，同时也是很常用的运算，一般数据处理工作25%的时间都在进行排序。简单地说，排序就是把一组记录(元素)按照某个域的值的递增(即由小到大)或递减(即由大到小)的次序重新排列的过程。
交换式排序法
交换式排序属于内部排序法，是运用数据值比较后，依判断规则对数据位置进行交换，以达到排序的目的。
交换式排序法又可以为两种：
冒泡排序法(Bubble sort)
快速排序法(Quick sort)
交换式排序法--冒泡排序法
冒泡排序(Bubble Sorting)的基本思想是：通过对待排序序列从后向前(从下标较大的元素开始)，依次比较相邻元素的排序码，若发现逆序则交换，使排序码较小的元素逐渐从后部向前部(从下标较大的单元移向下标较小的单元)，就象水底下的气泡一样逐渐向上冒。
因为排序的过程中，各元素不断接近自己的位置，如果一趟比较下来没有进行过交换，就说明序列有序，因此要在排序过程中设置一个标志flag判断元素是否进行过交换。从而减少不必要的比较。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var arr = [5, 0, - 56, 900, 12, 9000, -123, -1000];
var flag = false;//优化冒泡排序
//大的排序次数(arr.length - 1)
for(var i = 0; i < arr.length - 1; i++) {
//document.writeln("大循环....<br/>");
//小的排序
for (var j = 0; j < arr.length - i - 1; j++) {
if(arr[j] > arr[j+1]) {
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
flag = true;
}
}
if(flag) {
flag = false;
} else {
break;
}
}
for (var i = 0; i < arr.length; i++) {
document.writeln(arr[i]);
}
</script>
</head>
<body></body>
</html>
js基本语法--查找
查找：常用的查找有两种：
- 顺序查找
- 二分查找
二分查找有一个前提，该数组是有序的，如果不是有序的数组，则不能使用二分查找。以下为韩老师的代码。
思路：找到数组的中间数(midVal)，和你要查找的数(findVal)进行比较，如果midVal>findVal则说明findVal在数组的左边，就把该数组二分(就只在左边查找)。
韩老师代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var arr = [1, 4, 6, 8, 9, 90, 800];
//思路：找到数组的中间数(midVal)，和你要查找的数(findVal)进行比较，如果midVal>findVal则说明findVal在数组的左边，就把该数组二分(就只在左边查找)
function binarySearch(arr, findVal, leftIndex, rightIndex) {
//找到中间这个值
var midIndex = Math.floor((leftIndex+rightIndex)/2);
var midVal = arr[midIndex];
//进行查找有一个前提，防止无穷递归
if (leftIndex > rightIndex) {
//提示找不到
document.writeln("找不到");
return;
}
//比较
if(midVal > findVal) {
//在左边找
binarySearch(arr, findVal, leftIndex, midIndex-1);
} else if(midVal < findVal) {
//在右边找
binarySearch(arr, findVal, midIndex+1, rightIndex);
} else {
document.writeln("找到 下标为"+midIndex);
return;
}
}
binarySearch(arr, 1, 0, arr.length-1);
</script>
</head>
<body></body>
</html>
注意：若leftIndex = 1,rightIndex = 8，那么(leftIndex+rightIndex)/2不会为4，而=4.5。所以要用原型对象Math的floor()方法。
floor()方法执行的是向下取整计算，它返回的是小于或等于函数参数，并且与之最接近的整数。
而我的代码通常如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var arr = [1, 4, 6, 8, 9, 90, 800];
function binarySearch(arr, findVal) {
var leftIndex = 0;
var rightIndex = arr.length - 1;
var midIndex = 0;
while(leftIndex <= rightIndex) {
midIndex = Math.floor((leftIndex+rightIndex)/2);
if(arr[midIndex] > findVal) {
rightIndex = midIndex - 1;
} else if(arr[midIndex] < findVal) {
leftIndex = midIndex + 1;
} else {
return midIndex;
}
}
return -1;
}
var index = binarySearch(arr, 9);
if(index != -1) {
document.writeln("找到 下标为"+index);
} else {
document.writeln("找不到该数");
}
</script>
</head>
<body></body>
</html>
