闲着写点简单的分享

JavaScript的流程控制和迭代语句

语句块(Block Statement)

{
   statement_1;   statement_2;
   statement_3;
   ...
   statement_n;
}

这里 { ...; } 就是语句块。

var x = 1;
{
  var x = 2;
}
alert(x); // 输出的结果为 2

var 定义的变量是声明局部和全局的
let 定义的变量是块作用域的

条件判断语句(Conditional Statements)

if...else

一种条件判断

if (condition) {
  statement_1;
}
[else {
  statement_2;
}] //推荐使用严格的语句块模式,语句else可选

多种条件判断

if (condition_1) {
  statement_1;
}
[else if (condition_2) {
  statement_2;
}]
...
[else if (condition_n_1) {
  statement_n_1;
}]
[else {
  statement_n;
}]

下面这些值将被计算出 false

  • false
  • undefined
  • null
  • 0
  • NaN
  • 空字符串 ("")

例子

function checkData() {
  if (document.form1.threeChar.value.length == 3) {
    return true;
  } else {
    alert("Enter exactly three characters. " +
      document.form1.threeChar.value + " is not valid.");
    return false;
  }
}

switch 语句(Switch Statement)

switch (expression) {
   case label_1:
      statements_1
      [break;]
   case label_2:
      statements_2
      [break;]
   ...
   default:
      statements_def
      [break;]
}

查找一个与 expression 匹配的 case 语句,如果找到了,就跳到该子句,然后执行相关的语句,然后跳出 switch

例子

switch (fruittype) {
   case "Oranges":
      document.write("Oranges are $0.59 a pound.<br>");
      break;
   case "Apples":
      document.write("Apples are $0.32 a pound.<br>");
      break;
   case "Bananas":
      document.write("Bananas are $0.48 a pound.<br>");
      break;
   case "Cherries":
      document.write("Cherries are $3.00 a pound.<br>");
      break;
   case "Mangoes":
   case "Papayas":
      document.write("Mangoes and papayas are $2.79 a pound.<br>");
      break;
   default:
      document.write("Sorry, we are out of " + fruittype + ".<br>");
}
document.write("Is there anything else you'd like?<br>");

循环语句(Loop Statement)

循环流程控制语句有:

  • for Statement
  • do...while Statement
  • while Statement
  • label Statement
  • break Statement
  • continue Statement

for语句(for Statement)

for ([initialExpression]; [condition]; [incrementExpression])
   statement
  • [initialExpression]:初始化表达式,若存在则执行。此表达式通常初始化了一个或多个循环用计数器,语法上也允许设定一个任意复杂度的表达式。表达式里还可以声明变量
  • [condition]:条件表达式。如果表达式的值为true,将执行循环语句;若为flase,循环终止。若要完全忽略此条件表达式,则设此表达式的值为true
  • statement:需执行的语句。如果要执行多条语句,就要用中括号({...})把语句括起来
  • [incrementExpression]:累计表达式。若存在则执行,然后会回到第2步执行语句

例子

<script type="text/javascript">
function howMany(selectObject) {
   var numberSelected = 0;
   for (var i = 0; i < selectObject.options.length; i++) {
      if (selectObject.options[i].selected)
         numberSelected++;
   }
   return numberSelected;
}
</script>
<form name="selectForm">
   <p>
      <strong>Choose some music types, then click the button below:</strong>
      <br/>
      <select name="musicTypes" multiple="multiple">
         <option selected="selected">R&B</option>
         <option>Jazz</option>
         <option>Blues</option>
         <option>New Age</option>
         <option>Classical</option>
         <option>Opera</option>
      </select>
   </p>
   <p>
      <input type="button" value="How many are selected?"
         onclick="alert ('Number of options selected: ' + howMany(document.selectForm.musicTypes))"/>
   </p>
</form>

do...while 语句(do...while Statement)

do
   statement
while (condition);

语句(statement)会在条件判断前执行一次

while 语句(while Statement)

while (condition)
   statement

例子

n = 0;
x = 0;
while (n < 3) {
   n++;
   x += n;
}

使用 while 语句需要确保避免死循环,也就是确保循环里的条件最终会变为false

标签语句(label Statement)

label 提供了一个可以让你引用到您程序别的位置的标识符

label :
   statement

例子,标记 markLoop 标识了一个 while 循环

markLoop:
while (theMark == true) {
   doSomething();
}

中断语句(break Statement)

使用 break 语句来终止循环 switch, 或者是链接到 label 语句

break;
break label;

普通例子

for (i = 0; i < a.length; i++) {
   if (a[i] == theValue)
      break;
}

中断跳到标签语句的例子

var x = 0;
var z = 0
labelCancelLoops: while (true) {
    console.log("Outer loops: " + x);
    x += 1;
    z = 1;
    while (true) {
        console.log("Inner loops: " + z);
        z += 1;
        if (z === 10 && x === 10) {
            break labelCancelLoops;
        } else if (z === 10) {
            break;
        }
    }
}

连续语句(continue Statement)

使用 continue 语句可以用来重新开始一个 while, do-while, for, 或者 label 语句

continue;
continue label;

普通例子

var i = 0;
var n = 0;
while (i < 5) {
  i++;
  if (i == 3) {
    continue;
  }
  n += i;
}

连续到标签语句的例子

checkiandj:
  while (i < 4) {
    console.log(i);
    i += 1;
    checkj:
      while (j > 4) {
        console.log(j);
        j -= 1;
        if ((j % 2) == 0) {
          continue checkj;
        }
        console.log(j + " is odd.");
      }
      console.log("i = " + i);
      console.log("j = " + j);
  }

对象操作语句(Object Manipulation Statements)

for...in 语句(for...in Statements)

for...in 语句循环一个指定的变量来循环一个对象所有可枚举的属性

for (variable in object) {
   statements
}

例子,如下的函数中传递了两个参数:一个对象和这个对象的名称,然后循环了这个对象的属性,最后得到一个列出了这个对象所有的属性名称和值的字符串

function dump_props(obj, obj_name) {
   var result = "";
   for (var i in obj) {
      result += obj_name + "." + i + " = " + obj[i] + "<br>";
   }
   result += "<hr>";
   return result;
}

for each...in 语句(for each...in Statements)

和for...in相似,但是让对象属性的值递回取得,而不是作用于它们的名字

var sum = 0;
var obj = {prop1: 5, prop2: 13, prop3: 8};
for each (var item in obj) {
  sum += item;
}
print(sum); // prints "26", which is 5+13+8

for...of 语句(for...of Statements)

for...of语句在可迭代的对象上创建了一个循环(包括Array, Map, Set, 参数对象(arguments)等等),对值的每一个独特的属性调用一个将被执行的自定义的和语句挂钩的迭代

for (variable of object) {
  statement
}

for...in 循环遍历的结果是数组元素的下标,而for...of 遍历的结果是元素的值

let arr = [3, 5, 7];
arr.foo = "hello";
for (let i in arr) {
   console.log(i); // logs "0", "1", "2", "foo"
}
for (let i of arr) {
   console.log(i); // logs "3", "5", "7" // 注意这里没有 hello
}

阅读资料:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide

复习方式:实践(代码写一次、跑一次、测试一次),不懂的地方谷歌,阅读和做笔记

底线原则:宁可重写一次,也不复制粘贴

本次复习内容有:流程控制、迭代语句

复习耗时:大概3小时···我也不知道为什么这么久···

发表新评论