JavaScript系列-循环语句

1. JavaScript 函数常用的循环语句有以下

1 打遍所有可循环对象的 for 循环

2 for in ：遍历对象

3 for of ：遍历有迭代器对象，如数组

4 while 循环

5 do while

6 switch case

2.各循环方法的使用场景和方法

for 循环

提示：for 语句用于创建一个循环，它包含了三个可选的表达式，这三个表达式被包围在圆括号之中，使用分号分隔，后跟一个用于在循环中执行的语句（通常是一个块语句）。

第一种用法（含有全部表达式）

例子如下

for (var i = 0; i < 9; i++) {
  console.log(i);
  // more statements
}

通用格式

for ([initialization]; [condition]; [final-expression])
   statement

initialization （声明一个可以计数的变量）
一个表达式 (包含赋值语句) 或者变量声明。典型地被用于初始化一个计数器。该表达式可以使用 var 或 let 关键字声明新的变量，使用 var 声明的变量不是该循环的局部变量，而是与 for 循环处在同样的作用域中。用 let 声明的变量是语句的局部变量。该表达式的结果无意义。

condition（变量不再变化或者跳出for循环的结束条件）
一个条件表达式被用于确定每一次循环是否能被执行。如果该表达式的结果为 true，statement 将被执行。这个表达式是可选的。如果被忽略，那么就被认为永远为真。如果计算结果为假，那么执行流程将被跳到 for 语句结构后面的第一条语句。

final-expression （变量递增或者递减的规则）
每次循环的最后都要执行的表达式。执行时机是在下一次 condition 的计算之前。通常被用于更新或者递增计数器变量。

statement
只要condition的结果为 true 就会被执行的语句。要在循环体内执行多条语句，使用一个块语句（{ … }）来包含要执行的语句。没有任何语句要执行，使用一个空语句（;）。

第二种用法（省略变量声明）

例子如下

var i = 0;
for (; i < 9; i++) {
  console.log(i);
  // more statements
}

第三种用法（省略结束条件）

for (var i = 0; ; i++) {
  console.log(i);
  if (i > 3) break;
  // more statements
}

第四种用法（全省略）

for (;;) {
  if (i > 3) break;
  console.log(i);
  i++;
}

第五种用法（全省略），使用无语句的 for

以下 for 循环计算 final-expression 部分中节点的偏移位置，它不需要执行一个 statement 或者一组 block statement ，因此使用了空语句。

function showOffsetPos(sId) {
  var nLeft = 0,
    nTop = 0;

  for (
    var oItNode = document.getElementById(sId) /* initialization */;
    oItNode /* condition */;
    nLeft += oItNode.offsetLeft,
      nTop += oItNode.offsetTop,
      oItNode = oItNode.offsetParent /* final-expression */
  ); /* 分号 semicolon */

  console.log(
    "Offset position of '" +
      sId +
      "' element:\n left: " +
      nLeft +
      "px;\n top: " +
      nTop +
      "px;",
  );
}

/* Example call: */

showOffsetPos("content");

// Output:
// "Offset position of "content" element:
// left: 0px;
// top: 153px;"

for in 循环

提示：for…in 语句以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。

例子如下

var obj = { a: 1, b: 2, c: 3 };

for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

适用场景

它最常用的地方应该是用于调试，可以更方便的去检查对象属性（通过输出到控制台或其他方式）。尽管对于处理存储数据，数组更实用些，但是你在处理有key-value数据（比如属性用作“键”），需要检查其中的任何键是否为某值的情况时，还是推荐用for … in

for of 循环

提示for…of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

迭代数组

const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}

// Expected output: "a"
// Expected output: "b"
// Expected output: "c"

迭代字符串

let iterable = "boo";

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

迭代Set

let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

迭代Map

let iterable = new Map([
  ["a", 1],
  ["b", 2],
  ["c", 3],
]);

for (let entry of iterable) {
  console.log(entry);
}
// ["a", 1]
// ["b", 2]
// ["c", 3]

for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

do…while循环

提示： 语句创建一个执行指定语句的循环，直到condition值为 false。在执行statement 后检测condition，所以指定的statement至少执行一次。

语法

do
   statement
while (condition);

例子如下

var result = "";
var i = 0;
do {
  i += 1;
  result += i + " ";
} while (i < 5);
document.getElementById("example").innerHTML = result;

switch case

提示: 语句评估一个表达式，将表达式的值与case子句匹配，并执行与该情况相关联的语句。

语法

switch (expression) {
  case value1:
    // 当 expression 的结果与 value1 匹配时，执行此处语句
    [break;]
  case value2:
    // 当 expression 的结果与 value2 匹配时，执行此处语句
    [break;]
  ...
  case valueN:
    // 当 expression 的结果与 valueN 匹配时，执行此处语句
    [break;]
  [default:
    // 如果 expression 与上面的 value 值都不匹配，执行此处语句
    [break;]]
}

例子如下

const expr = 'Papayas';
switch (expr) {
  case 'Oranges':
    console.log('Oranges are $0.59 a pound.');
    break;
  case 'Mangoes':
  case 'Papayas':
    console.log('Mangoes and papayas are $2.79 a pound.');
    // Expected output: "Mangoes and papayas are $2.79 a pound."
    break;
  default:
    console.log(`Sorry, we are out of ${expr}.`);
}

忘记break

如果你忘记添加 break，那么代码将会从值所匹配的 case 语句开始运行，然后持续执行下一个 case 语句而不论值是否匹配。

小结

for in 用于遍历可枚举对象属性，for of 用于可迭代对象定义要迭代的数据
do while 语句的do 至少执行一次，执行完才会判断condition
switch case 忘记break 一直会执行下去，直到遇见break 或者return 直到函数执行完毕

关注下方微信公众号，了解更多内容