第2章 JavaScript语言基础(下)

来源：互联网发布：unity3d游戏菜单制作编辑：程序博客网时间：2024/05/09 20:14

2.8 核心语句

前面讲述了JavaScript脚本语言数据结构方面的基础知识，包括基本数据类型，运算符，运算符优先级等，本节将重点介绍JavaScript脚本的核心语句。

2.8.1 基本处理流程

在JavaScript里，基本的处理流程包含三种结构，即顺序结构，选择结构和循环结构。

2.8.2 if条件假设语句

和java,c#语法结构一致。这就不多说了。

2.8.3 switch流程控制语句

语法格式：

switch(a)
{
   case a1:
    statement 1;
    [break;]
   case a2;
    statement 2;
    [break;]
   ......
   default:
    [statement n;]
}

快乐乔巴的观点

这个语法大家肯定也不陌生，和Java，c++语法一致，但是C#中,每个分支case后必须使用“break”“goto”或者“return”来阻止穿越的发生，否则会出错。还有defaulet记得要写上，即使你认为条件肯定符合分支结构，这是防止error的好习惯~~

考察源程序：

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html140/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Sample Page!</title> 
<script language="JavaScript" type="text/javascript">
<!--
var msg="/nswitch流程控制语句 : /n/n";
//响应按钮的onclick事件处理程序 
function Test()
{
  var year=window. prompt("请输入您的军龄(整数值,0表示未参军) : ",25);
  var army;
  switch(year)
  {
    case 0:
      army="平民";
      break;
    case 1:
      army="列兵";
      break;
    case 2:
      army="上等兵";
      break;
    case 3:
    case 4:
    case 5:
      army="一级士官";
      break;
    case 6:
    case 7:
    case 8:
      army="二级士官";
      break;
    default:
      if (year>8)
        army="中高级士官";
  }
  msg+="军龄 : "+year+"年/n";
  msg+="结论 : "+army+"/n";
  alert(msg);
}
-->
</script>
</head> 
<body>
<center>
<form>
  <input type=button value="测试" onclick="Test()">
</form>
</center>
</body> 
</html>

2.8.4 for循环语句

for循环语句大家也并不陌生，看个小例子：

function Test()
{
   var iArray=new Array("JHX","QZY","LJY","HZF");
   var iLength=iArray.length;
   var msg="/nfor循环语句测试 :/n/n";
   msg+="数组长度 : /n"+iLength+"/n";
   msg+="数组元素 : /n";
   for(var i=0;i<iLength;i++)
   {
     msg+="iArray["+i+"] ="+iArray[i]+" /n";
   }
   alert(msg);
}

2.8.5 while和do-while循环语句

这个也不多说了，看2个小例子大家就基本明白：

function Test()
{
   var iCount=0;
   var iArray=new Array("JHX","QZY","LJY","HZF");
   var iLength=iArray.length;
   var msg="/nwhile循环语句测试 :/n/n";
   msg+="数组长度 : /n"+iLength+"/n";
   msg+="数组元素 : /n";
   while(iCount<iLength)
   {
     msg+="iArray["+iCount+"] ="+iArray[iCount]+" /n";
     iCount+=1;
   }
   alert(msg);
}

希望至少执行一次statements语句(或语句块)，可改用do...while语句，改写Test：

function Test()
{
   var iCount=0;
   var iArray=new Array("JHX","QZY","LJY","HZF");
   var iLength=iArray.length;
   var msg="/ndo-while循环语句测试 :/n/n";
   msg+="数组长度 : /n"+iLength+"/n";
   msg+="数组元素 : /n";
   do{
     msg+="iArray["+iCount+"] ="+iArray[iCount]+" /n";
     iCount+=1;
   }while(iCount<iLength)
   alert(msg);
}

for,while,do...while三种循环语句具有基本相同的功能，在实际编程过程中，应根据实际需要和本着使程序简单易懂的原则来选择到底使用哪种循环语句。

2.8.6 使用break和continue进行循环控制

在循环语句中，某些情况需要跳出循环或者跳出循环体内剩余语句，而直接执行下一次循环，此时需要通过break和continue语句来实现。break语句作用是立即跳出循环，continue语句的作用是停止正在进行的循环，而直接进入下一次循环。

考察源程序2.15

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html140/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Sample Page!</title> 
<script language="JavaScript" type="text/javascript">
<!--
var msg="/n使用break和continue控制循环 : /n/n";
//响应按钮的onclick事件处理程序 
function Test()
{
  var n=-1;
  var iArray=new Array("YSQ","JHX","QZY","LJY","HZF","XGM","LJY","LHZ");
  var iLength=iArray.length;
  msg+="数组长度 : /n        "+iLength+"/n";
  msg+="数组元素 : /n";
  while(n<iLength)
  {
    n+=1;
    if(n==3)
      continue;
    if(n==6)
      break;
    msg+="        iArray["+n+"] = "+iArray[n]+"/n";
  }
  alert(msg);
}
-->
</script>
</head> 
<body>
<center>
<form>
  <input type=button value="测试" onclick="Test()">
</form>
</center>
</body> 
</html>

2.7.7 with对象操作语句

在编写JavaScript脚本过程中，经常需要引用同一对象的多个属性方法，正常的对象属性或方法的引用途径能达到既定的目的，但代码显得尤为复杂。JavaScript脚本语言提供了with操作语句来简化对象属性和方法的引用过程，其语法结构如下所示：

with(object)
{
  statements;
}

例如下列连续引用document对象的write()方法的语句：

document.write("Welcome to China");
document.write("Welcome to Beijing");
document.write("Welcome to Shanghai");

可以使用with语句简化为：

with(document)
{
  write("Welcome to China");
  write("Welcome to Beijing");
  write("Welcome to Shanghai");
}

在脚本代码中适当使用with语句可使脚本代码简明易懂，避免不必要得重复输入。若脚本代码中涉及多个对象，不推荐使用with语句，避免造成属性或方法引用的混乱。

2.8.8 使用for...in进行对象循环

使用for...in循环语句可以对指定对象的属性和方法进行遍历，其语法结构如下所示：

for(变量名 in 对象名)
{
  statements;
}

考察源程序2.16

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html140/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Sample Page!</title> 
<script language="JavaScript" type="text/javascript">
<!--
var msg="/nfor...in对象循环语句遍历对象 : /n/n";
//响应按钮的onclick事件处理程序 
function Test()
{
  var i=0;
  msg+="Window对象支持的属性和方法 : /n";
  for(num in window)
  {
    msg+=num+"        ";
    i+=1;
    if((i%5)==0)
      msg+="/n";
  }
  alert(msg);
}
-->
</script>
</head> 
<body>
<center>
<form>
  <input type=button value="测试" onclick="Test()">
</form>
</center>
</body> 
</html>

2.8.9 含标签的语句

经常在循环标志前加上标签文本来引用该循环，其使用方法是在标识后面加冒号“：”。在综合运用break和continue语句控制循环转向时，可使用break或continue加上标识的形式使循环跳转到指定的位置。

考察源程序2.17

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html140/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Sample Page!</title> 
<script language="JavaScript" type="text/javascript">
<!--
var msg="/n使用标签控制循环语句 : /n/n";
//响应按钮的onclick事件处理程序 
function Test()
{
  msg+="循环流程 : /n";
  outer:
  for(m=1;m<4;m++)
  {
    msg+="        外循环  第"+m+"次/n";
    for(n=1;n<4;n++)
    {
      if(n==2)
        break outer;
      msg+="            内循环  第"+n+"次/n";
    }
  }
  alert(msg);
}
-->
</script>
</head> 
<body>
<center>
<form>
  <input type=button value="测试" onclick="Test()">
</form>
</center>
</body> 
</html>

由例子可以看出，有多层循环的情况下，想从最里层跳出整个循环，outer标签对循环控制非常的有效。若配合break和continue语句使用，可精确控制循环的走向，在实际编写脚本代码过程中应根据需要选择是否添加标签。

2.9 函数

JavaScript脚本语言允许开发者通过编写函数的方式组合一些可重复使用的脚本代码，增加了脚本代码的结构化和模块化。函数是通过参数接口进行数据传递，以实现特定的功能。本小节将重点介绍函数的基本概念，组成，全局函数与局部函数，作为对象的函数以及递归函数等知识，让读者从头开始，学习如何编写执行效率高，代码利用率高且易于查看和维护的函数。

2.9.1 函数的基本组成

函数由函数定义和函数调用两部分组成，应首先定义函数，然后再进行调用，以养成良好的编程习惯。

函数的定义应使用关键字function，其语法规则如下所示：

function funcName([parameters])
{
  statements;
  [return 表达式;]
}

函数的各个部分含义介绍如下。

● funcName 为函数名，函数名可由开发者自行定义，与变量的命名规则基本相同。

● parameters 为函数的参数，在调用目标函数时，需将实际数据传递给参数列表以完成函数特定的功能。参数列表中可定义一个或多个参数，各参数之间加逗号“，”分隔开来，当然，参数列表也可以为空。

● statements 为函数体，规定了函数的功能，本质上相当于一个脚本程序。

● return 指定函数的返回值，为可选参数。

自定义函数一般放置在HTML文档的<head>和</head>标记对之间。除了自定义函数外，JavaScript脚本语言提供大量的内建函数，无需开发者定义即可直接调用，例如Window对象的alert()方法即为JavaScript脚本语言支持的内建函数。

函数定义过程结束后，可在文档中任意位置调用该函数。引用目标函数时，只需在函数名后加上小括号即可。若目标函数需要引入参数，则应在小括号内添加传递参数。如果函数有返回值，可将最终结果赋值给一个自定义的变量并用关键字return返回。

考察源程序2.18

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html140/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Sample Page!</title> 
<script language="JavaScript" type="text/javascript">
<!--
var msg="/n函数调用实例 : /n/n";
//响应按钮的onclick事件处理程序 
function Test()
{
  var i=10;
  var j=15;
  var temp=sum(i,j);
  msg+="函数参数 : /n";
  msg+="        参数1:   i="+i+"/n";
  msg+="        参数2:   j="+j+"/n";
  msg+="调用语句 : /n";
  msg+="         var temp=sum(i,j);/n";
  msg+="返回结果 : /n";
  msg+="        "+i+"+"+j+" = "+temp+"/n";
  alert(msg);
}
//计算两个数的加和 
function sum(data1,data2)
{
  var tempData=data1+data2;
  return tempData;
}
-->
</script>
</head> 
<body>
<center>
<form>
  <input type=button value="测试" onclick="Test()">
</form>
</center>
</body> 
</html>

在上述代码中，定义了实现两数相加的函数sum(data1,data2)以及响应“测试”按钮onclick事件处理程序的Test()函数，并在后者内部调用Window对象的内建函数alert()，实现了函数的相互引用。

如果函数中引用的外部函数较多或函数的功能很复杂，势必导致函数代码过长而降低脚本代码的可读性，违反了开发者使用函数实现特定功能的初衷。因此，在编写函数时，应尽量保持函数功能的单一性，使脚本代码结构清晰，简单易懂。

2.9.2 全局函数和局部函数

JavaScript脚本语言提供了很多全局(内建)函数，在脚本编程过程中可以直接调用，在此外介绍四种简单的全局函数：parseInt(),parseFloat(),escape()和unescape()。

parseInt()函数的作用是将字符串转换为整数；parseFloat()函数的作用是将字符串转换为浮点数；escape()函数的作用是将一些特殊字符转换成ASCII码；而unescape()函数的作用是将ASCII码转换成字符。

考察源程序：

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html140/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Sample Page!</title> 
<script language="JavaScript" type="text/javascript">
<!--
var msg="/n全局函数调用实例 : /n/n";
//响应按钮的onclick事件处理程序 
function Test()
{
  var string1="30121";                     
  var string2="34.12";
  var string3="Money*#100";
  var temp1,temp2,temp3,temp4;
  msg+="原始变量 : /n";
  msg+="        string1 = "+string1+"    类型 : "+typeof(string1)+"/n";
  msg+="        string2 = "+string2+"    类型 : "+typeof(string2)+"/n";
  msg+="        string3 = "+string3+"    类型 : "+typeof(string3)+"/n";
  msg+="执行语句与结果:/n";
  temp1=parseInt(string1);
  temp2=parseInt(string2);
  msg+="        语句 : parseInt(string1)    结果 : string1="+temp1+"    类型 : "+typeof(temp1)+"/n";
  msg+="        语句 : parseInt(string2)    结果 : string1="+temp2+"    类型 : "+typeof(temp2)+"/n";
  temp1=parseFloat(string1);
  temp2=parseFloat(string2);
  msg+="        语句 : parseFloat(string1)    结果 : string1="+temp1+"    类型 : "+typeof(temp1)+"/n";
  msg+="        语句 : parseFloat(string2)    结果 : string1="+temp2+"    类型 : "+typeof(temp2)+"/n";
  temp3=escape(string3);
  msg+="        语句 : temp3=escape(string3)    结果 : temp3="+temp3+"    类型 : "+typeof(temp3)+"/n";
  temp4=unescape(temp3);
  msg+="        语句 : temp4=unescape(temp3)    结果 : temp4="+temp4+"    类型 : "+typeof(temp4)+"/n";
  alert(msg);
}
-->
</script>
</head> 
<body>
<center>
<form>
  <input type=button value="测试" onclick="Test()">
</form>
</center>
</body> 
</html>

由程序运行结果可知上述全局函数的具体作用。当然JavaScript脚本语言还支持很多其他的全局函数，在编程中适当使用它们可大大提高编程效率。

与全局函数相对应的函数是局部函数，即定义在某个特定函数内部，并仅能在其他内部使用函数。

考察源程序2.20

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html140/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Sample Page!</title> 
<script language="JavaScript" type="text/javascript">
<!--
var msg="/n局部函数调用实例 : /n/n";
//响应按钮的onclick事件处理程序 
function multi(m,n)
{
  var result;
  function inner(m)  
  {
    if (m%2!=0)
      return 0;
    else
      return 1;
  }
  result=inner(m)*n;
  msg+="输入参数 : /n";
  msg+="        m = "+m+"/n        n = "+n+"/n";
  msg+="乘积结果 : /n";
  msg+="        result = "+result+"/n";
  alert(msg);
}
-->
</script>
</head> 
<body>
<center>
<form>
  <input type=button value="测试" onclick="multi(4,3)">
</form>
</center>
</body> 
</html>

函数muni()内部定义了局部函数inner()，判断变量m是否为偶数，如果是偶数则返回1，否则返回0。根据调用语句muti(4,3)，m=4为偶数，故局部函数inner()的返回值为1，函数muti()的返回值为3。

注意：通过上述方式定义的函数为局部函数，函数的作用域为其所属的框架函数，任何位于函数框架外部对该局部函数的引用均为不合法。

2.9.3 作为对象的函数

JavaScript脚本语言中所有的数据类型，数组等均可作为对象，函数也不例外。可以使用new操作符和Function对象的构造函数Funciton()来生成指定规则的函数，其基本语法如下所示：

var funcName = new Function(argument,statements;);

值得注意的是，上述构造函数Function()首字母必须大写，同时函数的参数列表与操作代码之间使用逗号隔开。

参考源程序2.21

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html140/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Sample Page!</title> 
<script language="JavaScript" type="text/javascript">
<!--
var msg="/n使用构造函数Function构造函数 : /n/n";
var newFunc=new Function("result","alert(msg+'        '+result)");
//响应按钮的onclick事件处理程序 
function Test()
{ 
  msg+="生成语句: /n";
  msg+="        var newFunc=new Function(''result'',''alert(msg+result)'');/n"
  msg+="调用语句: /n";
  msg+="        newFunc(''Welcome to JavaScript World!'');/n";
  msg+="返回结果: /n";
  newFunc("Welcome to JavaScript World!");
}
-->
</script>
</head> 
<body>
<center>
<form>
  <input type=button value="测试" onclick="Test()">
</form>
</center>
</body> 
</html>

通过new操作符和Function()构造函数定义函数对象时，并没有给函数赋予名称，而是定义函数后直接将其赋值给变量newFunc，并通过newFunc进行访问，与通常的函数定义不同。

注意：在定义函数对象时，参数列表可以为空，也可有一个或多个参数，使用变量引用该函数时，应将函数执行所需要的参数传递给函数体。

作为对象的函数，最重要的性质即为它可以创建静态变量，给函数增加实例属性，使得函数在被调用之前也能发挥作用。

考察源程序2.22

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html140/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Sample Page!</title> 
<script language="JavaScript" type="text/javascript">
<!--
var msg="/n作为对象的函数创建静态变量 : /n/n";
function sum(x,y)
{
  sum.result=sum.result+x+y;
  return(sum.result);
}
sum.result=0;
//响应按钮的onclick事件处理程序 
function Test()
{ 
  var tempData;
  msg+="调用语句及返回结果: /n";
  tempData=sum(2,3);
  msg+="        语句 : tempData=sum(2,3);";
  msg+="        结果 : tempData = "+tempData+"    sum.result = "+sum.result+"/n";
  tempData=sum(4,5);
  msg+="        语句 : tempData=sum(4,5);";
  msg+="        结果 : tempData = "+tempData+"    sum.result = "+sum.result+"/n";
  tempData=sum(6,7);
  msg+="        语句 : tempData=sum(6,7);";
  msg+="        结果 : tempData = "+tempData+"    sum.result = "+sum.result+"/n";  
  alert(msg);
}
-->
</script>
</head> 
<body>
<center>
<form>
  <input type=button value="测试" onclick="Test()">
</form>
</center>
</body> 
</html>

由上述结果可以看出，作为对象的函数使用静态变量后，可以用来保存其运行的环境参数，如中间值等数据。

2.9.4 函数递归调用

函数的递归调用即函数在定义时调用自身，考察源程序2.23

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html140/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Sample Page!</title> 
<script language="JavaScript" type="text/javascript">
<!--
var msg="/n函数的递归调用 : /n/n";
//响应按钮的onclick事件处理程序 
function Test()
{ 
  var result;
  msg+="调用语句 : /n";
  msg+="        result = sum(6);/n";
  msg+="调用步骤 : /n";
  result=sum(6);
  msg+="计算结果 : /n";
  msg+="        result = "+result+"/n";
  alert(msg);
}
//计算当前步骤加和值 
function sum(m)
{
  if(m==0)
    return 0;
  else
  {
    msg+="        语句 : result = " +m+ "+sum(" +(m-1)+"); /n";
    result=m+sum(m-1);
  }
  return result;
}
-->
</script>
</head> 
<body>
<center>
<form>
  <input type=button value="测试" onclick="Test()">
</form>
</center>
</body> 
</html>

函数递归调用能使代码显得紧凑，简练，但也存在执行效率降低，容易出错，资源耗费较多等问题，推荐在递归调用次数较少的情况下使用该方法，而在需要多次递归调用的情况下使用其他方法来代替。

2.9.5 语言注释语句

在JavaScript脚本代码中，可加入一些提示性的语句，以便提示代码的用途及跟踪程序执行的流程，并增加程序的可读性，同时有利于代码的后期维护。上述提示性语句称作语言注释语句。

一般使用双反斜杠“//”作为每行解释语句的开头，例如：

//程序解释语句

对于多行的解释语句，可以在解释语句开头加上“/*”和末尾“*/”。

/* 程序解释语句1

程序解释语句2

程序解释语句2 */

在JavaScript脚本语言中，还允许使用HTML风格的语言注释，即用“”来结束注释语句，而HTML中则必须用“-->”来结束注释语句。

为养成良好的编程习惯，最好不用HTML风格的语言注释语句，而使用双反斜杠“//”来加入单行注释语句，用“/*”和“*/”加入多行注释语句。

2.9.6 函数应用注意事项

最后介绍下在使用函数过程中应特别予以注意的几个问题，以帮助读者更好，更准确地使用函数，并养成良好的编程习惯。具体表现在如下几点。

● 定义函数的位置：如果函数代码较为复杂，函数之间相互调用较多，应将所有函数的定义部分放在HTML文档的<head>和</head>标记对之间，即可保证所有的函数在调用之前均已定义，又可使开发者后期的维护工作更为简便。

● 函数的命名：函数的命名原则与变量的命名原则相同，但尽量不要将函数和变量取同一个名字。如因实际情况需要将函数和变量定义为相近的名字，也应给函数加上可以清楚辨认的字符(如前缀func等)以示区别。

● 函数返回值：在函数定义代码结束时，应使用return语句返回，即使函数不需要返回任何值。

● 变量的作用域：区分函数中使用的变量是全局变量还是局部变量，避免在调用过程中出现难以检查的错误。

● 函数注释：在编写脚本代码时，应在适当的地方给代码的特定行添加注释语句，例如将函数的参数设置，数据类型，返回值，功能等注释清楚，既方便开发者对程序的后期维护，也方便旗他人阅读该函数，便于模块化编程。

● 函数参数传递：由于JavaScript是弱类型语言，使用变量时并不检查其数据类型，导一个潜在的威胁，即开发者调用函数时，传递给函数的参数数量或数据类型不满足要求而导致错误的出现。在函数调用时，应仔细检查传递给目标函数的参数变量的数量和数据类型。

其中第五点值得特别关注，因为由其导致的错误非常难于检测。考察如下两数乘法的测试代码：

function multi(x,y)
{
  if(multi.arguments.length==2)
    return (x*y);
}

以上代码检查了输入参数的数量，但未检查操作数的数据类型，例如输入字符串“num1”和“num2”，并调用multi(num1,num2)时，浏览器报错。修改函数multi()如下：

function multi(x,y)
{
  if(multi.arguments.length==2)
  {
    if(typeof(x)!="number" || (typeof(y)!="number"))
      return errorNum;
    else
      return (x*y);
  }
}

这个函数既检查了参数的数量，又检查了参数的数据类型，避免了我们调用时传递了错误的参数数量或数据类型。

以上简要讨论了在使用函数时的应注意的问题，应该说编写一个好的函数以及一个好的脚本程序不容易的，需要读者朋友在以后的编程实践中去摸索总结，以便养成良好的编程习惯。

——摘于《完全手册 Javascript动态网页开发详解》杨水清编著