JavaScript之选择控制语句(if,switch,while,do-while,for循环)

前言 您将在本文当中学习到 顺序语句 分支语句 If判断,switch,while循坏,do..while循环,for循环,表达式中的真(true)与假(false) 在代码程序中,我们经常都会使用流程控制语句,它是用来控制程序中各语句执行顺序的语句,利用语句的组合便能完成一定功能的小逻辑模块    流程控制方式采用结构化程序设计中规定的三种基本流程结构，即：顺序结构、分支结构和循环结构，如下图所示： 顺序语句 按照正常的语句顺序从上往下执行 分支语句 根据某些条件选择执行 if语句(针对条件单一的情况使用) if-else语句（针对两种情况的时候使用） if-else-if语句(多重if嵌套） while语句(往往一进入,就需要判断,需要条件为真时执行一组语句) switch语句 if判断语句 条件语句是一种代码结构,用来测试表达式的真假,并根据布尔表达式的结果执行不同的代码,也就是判断结构让程序可以选择执行哪些程序语句 写法: if(条件表达式) {    语句体; } 注意要点: 条件表达式的结果必须是boolean类型 语句体中可以有一条语句,也可以有多条语句,如果语句体中只有一条语句,那么{}可以省略不写 可以使用三目运算符替代 应用场景 针对条件单一的情况使用单if语句 建议判断区间或范围的时候用 编程题 求最大值:编写一个方法，找出两个数字a和b中最大的那一个 示例： 输入： a = 1, b = 2 输出： 2 方式1：if...else.. var maximum = function(a, b) { if(a-b>0) { return a; }else { return b; } // 或者如下所示:三目运算符 return a-b>0?a:b; } maximum(1,2) 方式2:使用Math提供的数据函数max var maximum = function(a, b) { return Math.max(a,b) } maximum(1,2) 在实际的程序代码中:if的使用可以说无处不在 01if判断.gif 例如:上面例子中的:当表单输入框内不为空时,右侧的按钮激活,否则就禁用 // reducer代码中的代码 if(newState.inputVal !="") { newState.btnDisable = false; } // UI组件中 提交 相比于if..else语句,switch语句可能会没那么熟练,switch语句只支持常量值相等的分支判断，而if语句支持更为灵活，任意布尔表达式均可 但通常比一系列嵌套if语句效率更高；逻辑也更加清晰 switch语句 将表达式的值与case子句匹配，并执行与该情况相关联的语句 应用场景:常用于等值判断 写法： switch (express表达式) { case value1: // 当 express 的结果与 value1 匹配时，执行此处语句 语句体1; break; case value2: // 当 express 的结果与 value2 匹配时，执行此处语句 语句体2; break; ... case valueN: // 当 express 的结果与 valueN 匹配时，执行此处语句 语句体3; break; default: // 如果 express 与上面的 value 值都不匹配，执行此处语句 语句体4; break; } 注意事项: 在JS中switch语句与其他变成语言的一个主要区别是:switch语句中的判断表达式可以是任意类型,而其他语言,类如java等一些语言就要求该表达式必须为整型 表达式可以是变量也可以是常量，也可以是一个复杂表达式,用全等===符号,express是一个用来与 case 子语句匹配的表达式 case子句必须是常量表达式,case子句可以有多个,但是每一个case子句的取值不能够重复 default子句类似于if语句中的else语句,可以省略,但是不建议,一般用来处理一种其他的情况,可以出现在switch语句中的任意位置，但是一般建议写在最后面 break子句表示退出switch语句体,break语句也可以省略,一旦省略会出现break穿透现象,一般不会省略break子句 实例： 打10086时,电话呼叫案例，业务查询请按1，手机充值请按2，业务办理请按3，密码服务与停复机请按4，集团业务请按8，人工服务请按0 var selectNum = input.val(); switch(selectNum) { case 1; console.log(业务查询请按1); break; case 2; console.log(“手机充值请按2”); break; case 3; console.log(”业务办理请按3”); break; case 4; console.log(“密码服务与停复机请按4”); break; case 5; console.log(“集团业务请按8”); break; case 6; console.log(“人工服务请按0”); break; default; console.log("重听请按#"); break; } 例如如下所示:Redux中Redux中if改写成switch语句 if语句是这样的 import * as constants from "./actionTypes"; function reducer(state = defaultStatus, action) { if(action.type === constants.HANDLE_INPUT_CHANGE) { const newState = JSON.parse(JSON.stringify(state)); if(newState.inputVal !="") { newState.btnDisable = false; } newState.inputVal = action.value; return newState; } if(action.type === constants.HANDLE_ADD_CONTENT) { const newState = JSON.parse(JSON.stringify(state)); newState.list.push(state.inputVal); newState.inputVal = ""; newState.btnDisable = true; return newState; } if(action.type === constants.HANDLE_DELETE_ITEM) { const newState = JSON.parse(JSON.stringify(state)); newState.list.splice(action.index, 1); return newState; } return state; } 经过switch的改写后,如下所示 import * as constants from "./actionTypes"; function reducer(state = defaultStatus, action) { const newState = JSON.parse(JSON.stringify(state)); switch(action.type) { case constants.HANDLE_INPUT_CHANGE: if(newState.inputVal !="") { newState.btnDisable = false; } newState.inputVal = action.value; return newState; case constants.HANDLE_ADD_CONTENT: newState.list.push(state.inputVal); newState.inputVal = ""; newState.btnDisable = true; return newState; case constants.HANDLE_DELETE_ITEM: newState.list.splice(action.index, 1); return newState; default: return state; } } 通过与if语句的比较：可以看的出,switch语句有几下特点 switch语句常用于判断固定值的时候用 凡是能用switch能做的,用if都能做,单反过来则不行 在实际开发中,如果需要进行代码的优化,当遇到多个条件是等值条件的判断选择时,不妨用switch语句替代 小结：选择控制语句的使用 if语句: 针对一种情况的时候 if-else语句: 针对两种情况的时候,非黑即白 多重if语句: 针对多种情况的时候,常用于区间判断 嵌套if语句: 针对多种条件的时候（若是等值判断可用switch替代） swtich语句: 针对条件是等值,某个固定值的情况 上面说完了选择结构,下面来说说循环结构 while循环 可以在某个条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环 应用场景:如果你希望在一开始条件为真时执行一组语句,当你不知道循环执行的次数，只知道达到某个条件的时候循环继续,那么就选择while循环 写法 while (条件表达式) statement 条件表达式: 在每次循环前被求值。如果求值为真，statement就会被执行。如果求值为假，则跳出while循环执行后面的语句 statement: 只要条件表达式求值为真,该语句就会一直被执行。要在循环中执行多条语句，可以使用块语句（{ ... }）包住多条语句 注意：使用break语句在条件表达式计算结果为真之前停止循环 如下代码所示:求1-100之和 var number = 1; // 循环的初始条件,定义在外面 var sum = 0; function getSum(n){ while(number本文章由javascript技术分享原创和收集