JavaScript流程控制语句教程：if、switch、for、while详解

if语句基础与条件判断

一、if语句

if语句构成了JavaScript中最基础的条件判断逻辑，其核心作用是根据给定的表达式条件来决定是否执行特定的代码块。具体的语法结构可参考以下示例：


  var a=5;      //声明变量a，并赋值为5.
  var b;       //声明变量b。
  if(a==b){      //判断，如果a=b，则执行下面内容
    alert("b=5");  //弹窗，b=5.
  }

1. a==b 是 if 语句中的条件。 2. alert("a=c") 是 if 语句中的结果。此段脚本的含义是:声明变量a、b，且赋值a=5；当a=b时，弹窗b=5。注：此脚本中大括号可以省略。

二、if ... else语句

if...else语句是if语句的标准扩展形式。在原有的if判断基础上增加else分支，使得条件分支更加完整，能够覆盖条件不成立时的处理逻辑。该语句的标准语法结构如下：


  var a=5;
  var b;
  if(a==b){
    alert("b=5");
  }else {        //如果a!=b则执行下面内容
     alert("b!=5");

这段脚本的执行含义是：声明变量a和b，并将a赋值为5；程序首先判断a是否等于b，如果相等，则弹出提示框显示b=5；反之（即a不等于b），则执行else分支，弹出提示框显示b!=5。

三、if...else if语句

if...else if语句提供了对if语句的灵活扩展，适用于需要处理多种可能条件的场景。其标准语法结构如下：


  var a=5;
  var b;
  var c;
  var d;
  var e;
  if(a==b){
    alert("b=5")
  }else if(a==c){     
    alert("c=5")
  }else if(a==d){
    alert("d=5")
  }else if(a==e){
    alert("e=5")
  }else{
    alert("b!=5、c!=5、d!=5、e!=5")
  }

该语法的逻辑含义为：声明变量a、b、c、d、e，并将a初始赋值为5；程序依次进行多重判断：若a等于b，则弹窗提示b=5；若a等于c，则弹窗提示c=5；若a等于d，则弹窗提示d=5；若a等于e，则弹窗提示e=5；如果以上所有条件均不满足，则执行最后的else分支，弹窗提示b!=5、c!=5、d!=5、e!=5。

四、if语句的嵌套使用

if语句支持嵌套结构，即在一个if语句的代码块内部再包含另一个if语句。在使用嵌套时，必须正确使用大括号{}来明确区分外部if与内部if的作用域和层级关系。如果省略大括号或层级标识不清，可能导致程序的实际输出结果与预期的逻辑意图完全不符。

嵌套if的语法示例如下：


<script type="text/javascript">    //脚本开始
var m=12;n=m;             //声明变量n、m的值都为12
if(m<1){                //外层if，判断当m<1时执行下面内容
  if(n==1)              //内层，当n等于1时输出下面内容
    alert("当m小于1时，n等于1");  //弹窗，当m小于1时，n等于1
  else                //当n不等于1时，执行下面内容
    alert("当m小于1时，n不等于1"); //弹窗，当m不小于1时，n不等于1
}else if(m>10){            //外层else if，判断外层m>10时执行下面内容
  if(n==1)              //内层，如果n等于1，执行下面内容
    alert("当m大于10时，n等于1");  //弹窗，当m大于10时，n等于1
  else                //n不等于1时，执行下面内容
    alert("当m大于10时，n不等于1"); //弹窗，当m大于10时，n不等于1
}  
</script>               //脚本结束

至此，if语句的基本用法已介绍完毕。上述示例均为最基础的语法展示，下面提供一个利用if语句判断用户是否输入用户名的实际应用场景。

HTML部分结构如下：

if语句基础与条件判断

JavaScript逻辑部分如下：

if语句基础与条件判断

结语：本篇主要讲解了流程控制语句中的if语句，包括其多种变体用法及对应的代码示例。这些内容均属于较为简单的基础应用，旨在帮助初学者建立条件判断的基本概念。

在后续的文章中，将逐步增加核心技术的篇幅与深度。希望大家多多支持。

switch语句与循环结构解析

三.switch语句


var box =1;
switch(box){
case 1:
alert('one');
break;
case 2:
alert('two');
break;
default:
alert('出错');

四.do……while语句

do...while语句是一种先执行后判断的循环结构，其特点是无论条件是否满足，循环体至少会被执行一次。

五.while语句

while语句属于先判断后运行的循环结构，只有当条件表达式为真时，才会执行循环体；若初始条件不满足，则循环体一次也不会执行。

六.for语句

for语句同样是先判断后运行的循环结构，其优势在于能够在执行循环之前初始化变量，并在每次循环结束后定义更新代码，适合已知循环次数的场景。

七.for……in


var box ={
'name'='caibaojian',
'age'= 24
}

for (var x in box){
alert(x);
}

九.with语句


var box = {
'name' = 'caibaojian',
'age' = 24
}

with(box){ //with(box)可以将box给省略
var n= name;
var a = age;
}

这篇文章就介绍到这了，更多的资料请参考下面的相关文章。

JavaScript流程控制语句详解：if、switch与循环结构

if语句基础与条件判断

switch语句与循环结构解析

实用工具推荐