JavaScript的流程控制部分及对话框简单了解

发布于 2022-04-22  785 次阅读


条件语句:

JavaScript使用if () { ... } else { ... }来进行条件判断。
例如,根据年龄显示不同内容,可以用if语句实现如下:

var age = 20;
if (age >= 18) 
 {
  alert('成年');
 }
else 
{
  alert('未成年');
}
// 如果age >= 18为true,则执行if语句块,否则执行else语句块

 

其中else语句是可选的。如果语句块只包含一条语句,那么可以省略{}:
例如;

var age = 20;
if (age >= 18)
alert('adult');
else
alert('teenager');
//建议永远不要省。

 

多行条件判断

如果还要更细致地判断条件,可以使用多个if...else...的组合:

var age = 3;
if (age >= 18) 
 {
   alert('adult');
 }
else if (age >= 6)
 {
  alert('teenager');
 }
else 
 {
alert('kid');
 }

 

请注意,if...else...语句的执行特点是二选一,在多个if...else...语句中,如果上一级某个条件成立,则后续就不再继续判断了。


如果if的条件判断语句结果不是true或false怎么办?
例如:

var s = '123';
if (s.length) { // 条件计算字符串长度结果为3
//
}

 

JavaScript把null、undefined、0、NaN和空字符串''视为false,
其他值一概视为true,因此上述代码条件判断的结果是true

switch...case分支语句:

语法:

switch(表达式) {
case n:
代码块
break;
case n:
代码块
break;
default:
默认代码块
}

实例:

JS中的Date对象的getDay() 方法返回 0 至 6 之间的数字对应星期几:(Sunday=0, Monday=1,Tuesday=2 ..)我们来实现一下,判断今天是周几的js程序:

switch (new Date().getDay()) {
case 0:day = "星期天";break;
case 1:day = "星期一";break;
case 2:day = "星期二";break;
case 3:day = "星期三";break;
case 4:day = "星期四";break;
case 5:day = "星期五";break;
case 6:day = "星期六";break;
}

循环语句:

for循环
var x = 0;
var i;
for (i=1; i<=10000; i++) {
x = x + i;
}
x; // 50005000

让我们来分析一下for循环的控制条件:
i=1 这是初始条件,将变量i置为1;
i<=10000 这是判断条件,满足时就继续循环,不满足就退出循环;
i++ 这是每次循环后的递增条件,由于每次循环后变量i都会加1,
因此它终将在若干次循环后不满足判断条件i<=10000而退出循环。

 

for循环最常用的地方是利用索引来遍历数组:

var arr = ['Apple', 'Google', 'Microsoft'];
//java中数组,每次定义的时候,数组的长度固定死的
// int[] arr = new int[10];
// js的数组长度不是固定,
var i, x;
for (i=0; i<arr.length; i++) {
x = arr[i];
console.log(x);
}

 

for循环的3个条件都是可以省略的,如果没有退出循环的判断条件,
就必须使用break语句退出循环,否则就是死循环:

var x = 0;
for (;;) { // 将无限循环下去
if (x > 100) {
break; // 通过if判断来退出循环
}
x ++;
}

 

break语句:

break无条件从当前正在执行的循环或者switch语句彻彻底底终断并退出。

     for(var i=1,i<=100;i++){
      if(i==3){
        break;//彻彻底底结束跳出循环,直接跳到整个for循环的后面
      }
      console.log(i);
     }
     console.log(i);

continue语句:

continue语句的工作模式和break有点类似,都有结束循环的作用,不一样的地方在
于,break彻彻底底结束了循环,
而continue只是结束了循环中的一次循环,并没有彻彻底底终止循环。注意区别!

<script type="text/javascript">
     var i=1;
     var sum=0;
     while(i<10)
     {
      i=i*2;
      if(i==4)
      {
        continue;//没有彻底的结束跳出循环循环,只结束循环中的某一次具体的循环。
       }
      sum+i;
     }
     console.log(sum);
      </script>
      }
     // 执行上述代码,你会发现,i==4的时候,跳过了后面的代码,所以4没有加入到sum中去。

 

return语句

return用于返回函数的结果值,如果返回的值是一个表达式,那JS会先运算表达式,然后将
表达式的计算结果返回。
需要注意的是:return语句只能用在函数体里。

function add(x,y)
{//function函数
   return x+y;
 }
var rs=add(1,2);//定义add里的xy值,经过return设定的表达式计算,输出到变量rs里
console.log(rs)

//另一种用法
function add(x,y)
{
  console.log(x+y);
  return;//单纯结束function函数
  console.log()//永远不会执行到,因为前面return已经结束掉该函数。
}
add(1,2);

with语句:

with语句用于暂时修改作用域,
用法我们通过一个例子给大家演示说明:
比如:定义一个对象

 var a={},a.name='张三';a.sex='女';
    //一般的调用方式
    console.log(a.name);
    console.log(a.sex);
    使用with之后的调用
    with(a){
   console.log(name);
   console.log(sex);
   }

with在ES5版本的标准中,提出严格模式下,不让用了,所以作为一个知识点了解一下
就行。

 

对话框:

警告对话框

警告对话框经常用于确保用户可以得到某些信息。当警告对话框出现后,用户必须点击
一下确定,然后才能继续操作。

<script type="text/javascript">
 var i=11;
 if(i%2==0)
 {
    alert(i+"是偶数!");
  }
 else
 {
    (i+"是奇数!");
  }
</script>

如果警告对话框里的信息内容太长,为了美观,我们可以用\n,对文本进行换货显示。

<script type="text/javascript">
var mydate=now Date();
var str="欢迎您的光临!";
alert("今天是:\n\n"+mydate"\n\n"+str);
</script>

 

确定对话框:

确认对话框是用于用户可以验证或者接受某些信息。当确认对话框出现后,用户可以根
据确认对话框提示的信息,
选择点击【确定】或者【取消】后,才能继续操作。

<script type="text/javascript">
function comfirm_fum(){
  var rs =confirm("确认对话框的实验,点击确认返回true,点击取消返回false")
  if(rs){
     document.write("点击了确认")
     }
  else{
     document.write("点击了取消")
     }
}
</script>
</head>
<body>
<button type="button"onclick="comfirm_fun()"> 试验确定对话框</button>
//onclick触发某个事件,comfirm_fun()js函数之一

 

提示对话框

提示对话框经常用于提示用户在进入页面前输入某个值。
然后选择点击【确定】或者【取消】,
如果用户点击了【确定】,那么返回用户输入的值,
如果用户点击了【取消】,那么返回null

<script type="text/javascript">
function pop_fun(){
var rs = prompt(请输入你的姓名:",");
document.write(rs);
}
</script>
</head>
<body>
<button type="button" onclick="pop_fun()">实验提示对话框</button>