这个博客已经过去了很久……

不过,你可以通过以下方式找到我

现在的位置: 首页 > 谈前端 > JavaScript > 正文
控制程序流 (JavaScript)
2013年06月22日 JavaScript ⁄ 共 5810字 等你评论

javascript

通常,JavaScript 脚本中的语句将按其写入顺序逐个执行。 这称为“顺序执行”,它是程序流的默认方向。

顺序执行的一种替代方法是将程序流传输到脚本的另一个部分。 即,不是按顺序执行下一条语句,而是执行另一条语句。

若要使脚本有用,必须按逻辑方式执行此控制转移。 程序控制的转移是基于判定进行的,判定的结果是一个真实性语句(返回布尔值 true 或 false)。 创建一个表达式,然后测试其结果是否为 true。 可通过两种主要的程序结构来实现此目的。

第一种程序结构是选择结构。 可以使用该结构通过在程序中创建一个交叉点(类似道路的分岔),来指定程序流的可能方向。 JavaScript 中有 4 种选择结构。

  • 单选结构 (if),
  • 双选结构 (if/else),
  • 内联三元运算符 ?:,
  • 多选结构 (switch)。

第二种程序控制结构是重复结构。 可使用该结构指定要在满足某个条件时重复的操作。 当满足控制语句的条件时(通常,经过特定次数的迭代后),控制转到重复结构之外的下一条语句。 JavaScript 中有 4 种重复结构。

  • 在循环顶部测试表达式 (while),
  • 在循环底部测试表达式 (do/while),
  • 操作对象的每个属性 (for/in)。
  • 由计数器控制的重复 (for)。

可以通过嵌套和堆叠选择控制结构和重复控制结构来创建相当复杂的脚本。

第三种形式的结构化程序流由异常处理提供,本文档中未对其进行讨论。

JavaScript 支持 if 和 if...else 条件语句。 在 if 语句中测试条件,如果该条件满足测试,则执行相关 JavaScript 代码。 在 if...else 语句中,如果该条件未通过测试,则执行其他代码。 最简单的 if 语句形式可以写在一行内,但是更为常见的是使用多行 if 和 if...else 语句。

以下示例阐释了 if 和 if...else 语句可以使用的语法。 第一个示例显示最简单一种的布尔测试。 当(且仅当)圆括号内的项计算结果为(或可以强制为)true时,执行 if 后面的语句或语句块。

  1. function GetReaction(newShip, color, texture, dayOfWeek)  
  2. {  
  3.    // The test succeeds if the newShip Boolean value is true.  
  4.    if (newShip)  
  5.    {  
  6.       return "Champagne Bottle";  
  7.    }  
  8.   
  9.    // The test succeeds if both conditions are true.  
  10.    if (color == "deep yellow" && texture == "large and small wrinkles")  
  11.    {  
  12.       return "Is it a crenshaw melon?";  
  13.    }  
  14.   
  15.    // The test succeeds if either condition is true.  
  16.    if ((dayOfWeek == "Saturday") || (dayOfWeek == "Sunday"))  
  17.    {  
  18.       return "I'm off to the beach!";  
  19.    }  
  20.    else  
  21.    {  
  22.       return "I'm going to work.";  
  23.    }  
  24. }  
  25.   
  26. var reaction = GetReaction(false"deep yellow""smooth""Sunday");  
  27. document.write(reaction);  
  28.   
  29. // Output: I'm off to the beach!  

 

JavaScript 还支持隐式条件格式。 它在要测试的条件后使用问号(而不是在条件前的字 if)。 它还指定两个替代项,一个在满足条件时使用,一个在不满足条件时使用。 这些替代项必须用冒号分隔开。

  1. var AMorPM = (theHour >= 12) ? "PM" : "AM";  

 

如果要将几个条件放在一起测试,并且知道其中一个条件比其他条件更可能会通过或失败,则可以使用一种称为“短路计算”的功能加快脚本的执行速度。 当 JavaScript 计算逻辑表达式时,它只计算为得出结果而必须计算的子表达式。

例如,如果有一个 AND 表达式(例如 (x == 123) && (y == 6)),则 JavaScript 先会检查 x 是否为 123。 如果不是,则整个表达式不能为 true,即使 y 等于 6 也是如此。 因此,绝不会对 y 进行测试,JavaScript 返回值 false

同样,如果仅多个条件中的一个条件必须为 true(使用 || 运算符),则在任一条件通过测试后,测试就会停止。 如果要测试的条件涉及执行函数调用或其他复杂表达式,则这会很有效。 请记住,在编写 Or 表达式时,首先放置最有可能为 true 的条件。 在编写 And 表达式时,先放置最有可能为 false 的条件。

采用这种方式设计脚本的优点是,如果 runfirst() 返回 0,以下示例中将不会执行 runsecond()

  1. if ((runfirst() == 0) || (runsecond() == 0)) {  
  2.     // some code  
  3. }  

 

可通过多种方法来重复执行语句或语句块。 一般,重复执行称为“循环”或“迭代”。 迭代就是循环的单次执行。 通常,它是由变量测试控制的,每次执行循环时,变量值都会发生变化。 JavaScript 支持 4 种类型的循环:for 循环、for...in 循环、while 循环、do...while 循环。

for 语句指定一个计数器变量、一个测试条件以及一个更新计数器的操作。 在每次循环迭代之前,先测试条件。 如果测试成功,则执行循环内的代码。 如果测试失败,则不执行循环内的代码,程序继续执行紧靠循环后面的第一行代码。 在循环执行后和下一次迭代开始之前,先更新计数器变量。

如果循环条件始终不满足,则不执行该循环。 如果始终满足测试条件,则产生无限循环。 在某些情况下,可能希望出现前一种情况,但几乎从不希望出现后一种情况,因此编写循环条件时一定要谨慎。

  1. // The update expression ("icount++" in the following examples)  
  2. // is executed at the end of the loop, after the block of  
  3. // statements that forms the body of the loop is executed, and  
  4. // before the condition is tested.  
  5.   
  6. // Set a limit of 10 on the loop.  
  7. var howFar = 10;  
  8.   
  9. // Create an array called sum with 10 members, 0 through 9.  
  10. var sum = new Array(howFar);  
  11. sum[0] = 0;  
  12.   
  13. // Iterate from 0 through 9.  
  14. var theSum = 0;  
  15. for(var icount = 0; icount < howFar; icount++)  
  16. {  
  17.    theSum += icount;  
  18.    sum[icount] = theSum;  
  19. }  
  20.   
  21. // This code is not executed at all, because icount is not greater than howFar.  
  22. var newSum = 0;  
  23. for(var icount = 0; icount > howFar; icount++)  
  24. {  
  25.    newSum += icount;  
  26. }  
  27.   
  28. // This is an infinite loop.  
  29. var sum = 0;  
  30. for(var icount = 0; icount >= 0; icount++)  
  31. {  
  32.    sum += icount;  
  33. }  

 

JavaScript 提供一种特殊的循环,用于单步执行对象的所有用户定义的属性或数组的所有元素。 for...in 循环中的循环计数器是字符串,而不是数字。 它包含当前属性的名称或当前数组元素的索引。

  1. // Create an object with some properties  
  2. var myObject = new Object();  
  3. myObject.name = "James";  
  4. myObject.age = "22";  
  5. myObject.phone = "555 1234";  
  6.   
  7. // Enumerate (loop through)_all the properties in the object  
  8. for (var prop in myObject)  
  9. {  
  10.     // This displays "The property 'name' is James", etc..  
  11.     document.write("The property '" + prop + "' is " + myObject[prop]);  
  12.     // New line.  
  13.     document.write("<br />");    
  14. }  

虽然 for...in 循环看起来类似于 VBScript 的 For Each...Next 循环,但二者的工作方式不同。 JavaScript for...in 循环将循环访问 JavaScript 对象的属性。VBScript For Each...Next 循环将循环访问集合中的项。 若要循环 JavaScript 中的集合,您需要使用 Enumerator 对象。 虽然某些对象(如 Internet Explorer 中的对象)同时支持 VBScript For Each...Next 循环和 JavaScript for...in 循环,但大多数对象都无法实现这一点。

while 循环类似于 for 循环。 差异在于,while 循环没有内置计数器变量或更新表达式。 若要控制语句或语句块的重复执行,但需要更复杂的规则而不是仅“运行此代码 n 次”,请使用 while 循环。 下面的示例使用 Internet Explorer 对象模型和一个 while 循环来向用户询问简单的问题。

  1. var x = 0;  
  2. while ((x != 5) && (x != null))  
  3. {  
  4.     x = window.prompt("What is my favorite number?", x);  
  5. }  
  6.   
  7. if (x == null)  
  8.     window.alert("You gave up!");  
  9. else  
  10.     window.alert("Correct answer!");  

 

说明说明
因为 while 循环没有显式的内置计数器变量,所以此循环比其他类型的循环更容易出现无限循环。 再者,因为有时很难发现循环条件是在何时或何处更新的,所以如果使用不慎,编写的 while 循环可能从不更新其条件。 因此,设计 while 循环时要十分谨慎。

如上所述,JavaScript 中还有一个类似于 while 循环的 do...while 循环,只不过将确保始终将其执行至少一次,因为将在循环结束而非开始时测试条件。 例如,可以将上面的循环重写为:

  1. var x = 0;  
  2. do  
  3. {  
  4.     x = window.prompt("What is my favorite number?", x);  
  5. while ((x != 5) && (x != null));  
  6.   
  7. if (x == null)  
  8.     window.alert("You gave up!");  
  9. else  
  10.     window.alert("Correct answer!");  

 

如果满足某种条件,则 JavaScript 中的 break 语句用于停止执行循环。 (请注意,break 也用于退出 switch 块)。 如果循环是 for 或 for...in 循环,可以使用 continue 语句直接跳到下一个迭代,跳过代码块的其余部分,同时更新计数器变量。

下面的示例以上一个示例为基础,它使用 break 和 continue 语句来控制循环。

  1. var x = 0;  
  2. do  
  3. {  
  4.     x = window.prompt("What is my favorite number?", x);  
  5.   
  6.     // Did the user cancel? If so, break out of the loop  
  7.     if (x == null)  
  8.         break;  
  9.   
  10.     // Did they enter a number?  
  11.     // If so, no need to ask them to enter a number.  
  12.     if (Number(x) == x)  
  13.         continue;  
  14.   
  15.     // Ask user to only enter in numbers  
  16.     window.alert("Please only enter in numbers!");  
  17.   
  18. while (x != 5)  
  19.   
  20. if (x != 5)  
  21.     window.alert("You gave up!");  
  22. else  
  23.     window.alert("Correct answer!");  

 

友荐云推荐
×