JavaScript青少年简明教程：流程控制语句

JavaScript青少年简明教程流程控制语句JavaScript 提供了一系列的流程控制语句用于控制代码的执行顺序。条件语句条件语句根据表达式的真假来执行不同的代码块。if 语句用于在条件为真时执行代码块。语法if(条件){条件满足执行的语句;}【或者写为if(条件){条件满足执行的语句;} 】说明这个“条件”一般是一个比较表达式。如果“条件”返回为true则会执行大括号{}内部的程序如果“条件”返回为false则会直接跳过大括号{}内部的程序然后按照顺序来执行后面的程序。由大括号括起来的程序我们又称为“语句块”。流程控制图例let age 18; if (age 18) { console.log(You are an adult.); }if...else 语句用于在条件为真时执行一个代码块否则执行另一个代码块。语法if(条件表达式){条件成立执行的语句;}Else{条件不成立执行的语句;}【或者写为if(条件表达式){条件成立执行的语句;}Else{条件不成立执行的语句;} 】流程控制图例let age 16; if (age 18) { console.log(You are an adult.); } else { console.log(You are a minor.); }if...else if...else 语句用于测试多个条件。语法if(条件1){语句或语句块1}else if (条件2){语句或语句块1}…Else{语句或语句块K}说明多向选择语法看似很复杂其实也是非常简单的它只是在双向选择基础上再增加一个或多个选择分支罢了。流程控制图例let age 20; if (age 18) { console.log(未成年人); } else if (age 60) { console.log(成年人); } else { console.log(老年人); }可以在 if 语句中嵌套另一个 if 语句以处理更复杂的条件逻辑。例如下面的代码检查一个数字是否为偶数并且是否为正数const num 6; if (num 0) { if (num % 2 0) { console.log(Positive even number); } else { console.log(Positive odd number); } } else { console.log(Not a positive number); }switch语句用于根据不同的条件执行不同的代码块。语法switch(判断值){case 取值1:语块1;[break;]case 取值2:语块2;[break;]case 取值3:语块3;[break;]……[default:语句块k;[break;]]}switch 语句用于基于表达式的值来执行不同的代码块。在switch语句中系统会从第1个case开始判断从找到满足条件的部分执行。default 子句在没有匹配的 case 时执行。[ ]部分代表是可选的default 部分是可选的不是必须有的它将在所有 case 都不匹配时执行。break 可避免“fall-through”“贯穿”、“穿透行为。break语句用于结束switch语句从而使JavaScript仅仅执行对应的一个分支。如果没有了break语句则该switch语句中“对应的分支”被执行后还会继续执行后面的分支。【尽管在 default 后面通常不需要 breakdefault部分可以有 break也不会有任何问题。】流程控制图或者例let day 3; switch (day) { case 1: console.log(Monday); break; case 2: console.log(Tuesday); break; case 3: console.log(Wednesday); break; default: console.log(Invalid day); }循环语句循环语句用于重复执行代码块。for 循环用于在已知次数时重复执行代码块。语法for( 循环变量初始化 ; 条件表达式 ; 循环变量自增 ){循环体}循环变量初始化用于初始化表达式一般用于定义“用于计数的变量”的初始值条件表达式含有条件变量的表达式循环变量自增指的是执行循环体也就是大括号中的程序语句后的操作用于更新条件变量。流程控制图例for (let i 0; i 5; i) { console.log(i); }可以在 for 循环中嵌套另一个 for 循环这在处理二维数组矩阵或需要更复杂处理的数据结构时非常有用。例如for (let i 1; i 3; i) { for (let j 1; j 3; j) { console.log(i ${i}, j ${j}); } }该示例将分别打印 i 和 j 的组合从 i 1, j 1 到 i 3, j 3。while语句用于在条件为真时重复执行代码块。语法while(条件表达式){循环体}说明如果“条件表达式”返回为true则会执行大括号{}内部的循环体也就是大括号中的程序语句一直到条件为false才结束整个循环然后再接着执行while语句后面的程序。流程控制图例let sum 0; let i 1; while (i 5) { sum i; i; } console.log(Sum:, sum); // 输出Sum: 15本例将计算从 1 到 5 的总和并输出示例中当 i 小于或等于 5 时循环体内的代码将持续执行。每次迭代i 的值会增加 1直到条件变为假为止。do...while语句类似于 while 循环但先执行一次代码块然后在条件为真时继续执行。语法do{循环体}while(条件);说明do…while语句首先是无条件执行循环体一次然后再判断是否符合条件。如果符合条件则重复执行循环体如果不符合条件则退出循环。流程控制图例let sum 0; let i 1; do { sum i; i; } while (i 5); console.log(Sum:, sum); // 输出Sum: 15本例将计算从 1 到 5 的总和并输出在这个示例中不论 i 的初始值如何循环体内的代码将至少执行一次然后再检查条件。通常在循环体内的代码需要含有改变循环条件的语句以确保循环能够在适当的时间终止。否则循环可能会变成无限循环从而导致程序无法停止并可能导致系统崩溃或其他意外行为。while 语句和do...while 语句的区别while 语句先检查条件再决定是否执行循环体内的代码。如果条件一开始为假循环体内的代码将不会执行。do...while 语句先执行一次循环体内的代码再检查条件。如果条件为假循环将终止但循环体内的代码至少会执行一次。可以嵌套 while 或 do...while 循环来处理更复杂的情况。例如let i 1; while (i 3) { let j 1; while (j 3) { console.log(i ${i}, j ${j}); j; } i; }在这个示例中外层循环 i 控制的每次迭代内层循环 j 将从 1 运行到 3for...in语句用于遍历对象的可枚举属性。它适用于对象的属性遍历但不适合数组或其他可迭代对象的遍历。语法for (variable in object){代码块}variable 是用来存放每次迭代的属性名的变量。object 是要迭代的对象。流程控制图例const person { name: John, age: 30, city: New York }; for (let key in person) { console.log(${key}: ${person[key]}); }输出name: Johnage: 30city: New York注意事项1、for...in 不保证属性遍历的顺序属性顺序是由 JavaScript 引擎定义的。2、for...in 也会遍历对象从原型链上继承的可枚举属性。3、不推荐在数组上使用 for...in因为它遍历的是索引并且可能会遍历到继承属性或非索引属性。for...of语句用于遍历可迭代对象包括数组、字符串、Map、Set、arguments 对象等的元素。它无法直接遍历普通对象因为普通对象不是可迭代对象。通常用于数组的值遍历。语法for (variable of iterable){代码块}variable 是用来存放每次迭代的值的变量。iterable 是一个可迭代对象。流程控制图特别提示在JavaScript中当我们使用for...of循环时它在背后使用了迭代器iterator协议。关于迭代器iterator和for...of 语句初学者可以先了解不要深究。下面给出几个for...of 语句示例。例1、遍历数组const array [10, 20, 30, 40]; for (let value of array) { console.log(value); }输出10203040例2、遍历字符串const str hello; for (let char of str) { console.log(char); }输出hello例3、遍历Mapconst map new Map(); map.set(name, John); map.set(age, 30); for (let [key, value] of map) { console.log(${key}: ${value}); }输出name: Johnage: 30例4、遍历Setconst set new Set([1, 2, 3, 4]); for (let value of set) { console.log(value); }输出1234注意事项1、for...of 按照可迭代对象的顺序进行遍历通常是插入的顺序。2、只能用于可迭代对象如果对非可迭代对象使用 for...of会抛出错误。注意事项1、for...of 按照可迭代对象的顺序进行遍历通常是插入的顺序。2、只能用于可迭代对象如果对非可迭代对象使用 for...of会抛出错误。for...in 和 for...of 的比较适用对象for...in适用于对象属性的遍历不推荐用于数组因为它遍历的是键名可能会意外地遍历到继承的属性或原型链上的属性。for...of适用于可迭代对象如数组、字符串、Map、Set 等遍历的是元素的值。返回值for...in返回对象的可枚举属性的键名字符串或 Symbol。for...of返回可迭代对象的每个元素的值。遍历顺序for...in不保证顺序特别是在对象上使用时属性遍历的顺序是由 JavaScript 引擎定义的。for...of按元素插入的顺序遍历。注意事项避免在数组上使用 for...in在数组上使用 for...in 可能会意外地遍历到数组的非索引属性或继承的属性。break语句用于立即退出循环或 switch 语句。循环一旦遇到 break将不会继续执行而是跳出循环。例for (let i 0; i 5; i) { if (i 3) { break; } console.log(i); }输出012continue语句continue 语句用于跳过当前循环中的剩余代码并立即进入下一次循环迭代。在 for 循环中它会跳到更新表达式在 while 和 do...while 循环中它会跳到条件检查部分。例for (let i 0; i 10; i) { if (i % 2 0) { continue; } console.log(i); }当 i 是偶数时continue 语句执行跳过 console.log(i)直接进入下一次迭代。输出13579在嵌套循环中break 和 continue 通常只影响它们所在的最近一级循环。标签Label与 break 和 continue在 JavaScript 中可以使用标签与 break 和 continue 结合来跳出多层循环或跳到指定循环。使用标签可以使 break 和 continue 控制多层循环。例、嵌套循环中的 breakouterLoop: for (let i 0; i 3; i) { for (let j 0; j 3; j) { if (j 1) { break outerLoop; } console.log(i ${i}, j ${j}); } }输出i 0, j 0例、嵌套循环中的continueouterLoop: for (let i 0; i 3; i) { for (let j 0; j 3; j) { if (j 1) { continue outerLoop; } console.log(i ${i}, j ${j}); } }输出i 0, j 0i 1, j 0i 2, j 0