单挑JavaScript系列——循环与迭代

254 阅读3分钟

本文说明:由于文章都是个人的重学侧重,会大量出现MDN的原文以及混乱说明,并不能作为学习语言的入口,仅适用于个人知识总结

  • 循环有很多种类,但本质上它们都做的是同一件事:它们把一个动作重复了很多次(实际上重复的次数有可能为 0)。各种循环机制提供了不同的方法去确定循环的开始和结束。不同情况下,某一种类型循环会比其它的循环用起来更简单。

JavaScript中提供了这些循环语句:

  • for 语句
  • do...while 语句
  • while 语句
  • labeled 语句
  • break 语句
  • continue 语句
  • for...in 语句
  • for...of 语句

for

一个 for 循环会一直重复执行,直到指定的循环条件为 false。 JavaScript 的 for 循环,和 Java、C 的 for 循环,是很相似的。一个 for 语句是这个样子的:

for ([initialExpression]; [condition]; [incrementExpression]) statement 当一个 for 循环执行的时候,会发生以下过程:

  1. 如果有初始化表达式 initialExpression,它将被执行。这个表达式通常会初始化一个或多个循环计数器,但语法上是允许一个任意复杂度的表达式的。这个表达式也可以声明·变量。
  2. 计算 condition 表达式的值。如果 condition 的值是 true,循环中的语句会被执行。如果 condition 的值是 false,for 循环终止。如果 condition 表达式整个都被省略掉了,condition的值会被认为是true。
  3. 循环中的 statement 被执行。如果需要执行多条语句,可以使用块({ ... })来包裹这些语句。
  4. 如果有更新表达式 incrementExpression,执行更新表达式。
  5. 回到步骤 2。

do...while 语句

  • do...while 语句一直重复直到指定的条件求值得到假值(false)。 一个 do...while 语句看起来像这样:

do statement while (condition);

简单来说有点像if的倒装

  • 一个 while 语句只要指定的条件求值为真(true)就会一直执行它的语句块。一个 while 语句看起来像这样:

避免无穷循环(无限循环)。保证循环的条件结果最终会变成假;否则,循环永远不会停止。因为条件永远不会变成假值,下面这个 while 循环将会永远执行:

while (true) {
  console.log("Hello, world");
}
//建议没事还是别试,还是很吃CPU的

label 语句

一个 label 提供了一个让你在程序中其他位置引用它的标识符。例如,你可以用 label 标识一个循环, 然后使用 break 或者 continue 来指出程序是否该停止循环还是继续循环。

label :
   statement ;//label 的值可以是任何的非保留字的 JavaScript 标识符, statement 可以是任意你想要标识的语句(块)。
// 未添加 Label:
var num = 0;
for (var i = 0 ; i < 10 ; i++) {   // i 循环
  for (var j = 0 ; j < 10 ; j++) { // j 循环
    if( i == 5 && j == 5 ) {
       break; // i = 5,j = 5 时,会跳出 j 循环
    } // 但 i 循环会继续执行,等于跳出之后又继续执行更多次 j 循环
  num++;
  }
}
alert(num); // 输出 95
//添加 Label 后:
var num = 0;
outPoint:
for (var i = 0 ; i < 10 ; i++){
  for (var j = 0 ; j < 10 ; j++){
    if( i == 5 && j == 5 ){
      break outPoint; // 在 i = 5,j = 5 时,跳出所有循环,
                      // 返回到整个 outPoint 下方,继续执行
    }
    num++;
  }
}

alert(num); // 输出 55

break 语句

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

当你使用不带 label 的 break 时, 它会立即终止当前所在的 while,do-while,for,或者 switch 并把控制权交回这些结构后面的语句。 当你使用带 label 的 break 时,它会终止指定的带标记(label)的语句。 break 语句的语法看起来像这样:

break [label];

在语法中,被 [] 包裹的内容是可省略的,也就是 label 可以省略。若省略,则终止当前所在的循环或 switch;若不省略,则终止指定的 label 语句。

continue 语句

continue 语句可以用来继续执行(跳过代码块的剩余部分并进入下一循环)一个 while、do-while、for,或者 label 语句。

当你使用不带 label 的 continue 时, 它终止当前 while,do-while,或者 for 语句到结尾的这次的循环并且继续执行下一次循环。 当你使用带 label 的 continue 时, 它会应用被 label 标识的循环语句。 continue 语句的语法看起来像这样:

continue [label];

更多示例

for...in 语句

  • for...in 语句循环一个指定的变量来循环一个对象所有可枚举的属性。JavaScript 会为每一个不同的属性执行指定的语句。
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...of 语句

for...of 语句在可迭代对象(包括Array、Map、Set、arguments 等等)上创建了一个循环,对值的每一个独特属性调用一次迭代。

let arr = [3, 5, 7];
arr.foo = "hello";

for (let i in arr) {
   console.log(i); // 输出 "0", "1", "2", "foo"
}

for (let i of arr) {
   console.log(i); // 输出 "3", "5", "7"
}

let a = [1,2,3];a.foo= '123'; return a;
// [1, 2, 3, foo: '123'] ,末尾的元素就是socalled自定义的属性 ,起始的元素可以看作 [0:1,1:2,2:3,foo:'123']

// 访问方式, a['foo']