JavaScript系列

JavaScript系列

文章目录

• • 1. JavaScript 函数常用的循环语句有以下
  • • 1 打遍所有可循环对象的 for 循环
    • 2 for in ：遍历对象
    • 3 for of ：遍历有迭代器对象，如数组
    • 4 while 循环
    • 5 do while
    • 6 switch case
  • 2.各循环方法的使用场景和方法
  • • for 循环
    • • 第一种用法（含有全部表达式）
      • 第二种用法（省略变量声明）
      • 第三种用法（省略结束条件）
      • 第四种用法（全省略）
      • 第五种用法（全省略），使用无语句的 for
  • for in 循环
  • • • 例子如下
      • 适用场景
  • for of 循环
  • • • 迭代数组
      • 迭代字符串
      • 迭代Set
      • 迭代Map
  • • 语法
    • 例子如下
  • switch case
  • • 语法
    • 例子如下
    • 忘记break
  • 小结

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 = ElementById(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至少执行一次。

语法

dostatement
while (condition);

例子如下

var result = "";
var i = 0;
do {i += 1;result += i + " ";
} while (i < 5);
ElementById("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 直到函数执行完毕

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