JavaScript系列-循环语句

2023-12-21 22:43:08

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 直到函数执行完毕

关注下方微信公众号,了解更多内容
在这里插入图片描述

文章来源:https://blog.csdn.net/weixin_43011185/article/details/135139887
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。