整理Javascript流程控制语句学习笔记


Posted in Javascript onNovember 29, 2015

1、做判断(if语句)
if语句是基于条件成立才执行相应代码时使用的语句。
语法:

if(条件){
   条件成立时执行代码
 }

例子:假设你应聘web前端技术开发岗位,如果你会HTML技术,你面试成功,欢迎加入公司。

<script type="text/javascript">
   var mycarrer = "HTML";
   if (mycarrer == "HTML"){
     document.write("你面试成功,欢迎加入公司。");
   }
 </script>

2、二选一(if...else语句)

if...else语句是在指定的条件成立时执行代码,在条件不成立时执行else后的代码。
语法:

if(条件){
   条件成立时执行的代码
 }else{
   条件不成立时执行的代码
 }

例子:假设你应聘web前端技术开发岗位,如果你会HTML技术,你面试成功,欢迎加入公司,否则你面试不成功,不能加入公司。
 

<script type="text/javascript">
   var mycarrer = "HTML"; //mycarrer变量存储技能
   if (mycarrer == "HTML"){
     document.write("你面试成功,欢迎加入公司。"); 
   }else{
     //否则,技能不是HTML
     document.write("你面试不成功,不能加入公司。");
   }
 </script>

 3、多重判断(if...else嵌套语句)
要在多组语句中选择一组来执行,使用if..else嵌套语句。
语法:

if(条件1)
 { 条件1成立时执行的代码}
 else if(条件2)
 { 条件2成立时执行的代码}
 ...
 else if(条件n)
 { 条件n成立时执行的代码}
 else
 { 条件1、2至n不成立时执行的代码}

例:联合国世界卫生组织对年龄的划分标准, 44岁以下为青年;45岁至59·岁为中年人。60岁至89岁为老年人;90岁以上为长寿老年人。赵红今年99岁了,她属于哪个年龄阶段的。
 

<script type="text/JavaScript">
   var myage =99;//赵红的年龄为99
   if(myage<=44){
     document.write("青年");
   }else if(myage<=59) {
     document.write("中年人");
   }else if (myage<=89){
     document.write("老年人");
   }else {
     document.write("长寿老年人");
   }
 </script>

 4、多种选择(Switch语句)
当有很多种选项的时候,switch比if else使用更方便。

switch(表达式)
 {
 case值1:
 执行代码块 1
 break;
 case值2:
 执行代码块 2
 break;
 ...
 case值n:
 执行代码块 n
 break;
 default:
 与 case值1 、 case值2...case值n 不同时执行的代码
 }

语法说明:
Switch必须赋初始值,值与每个case值匹配。满足执行该 case 后的所有语句,并用break语句来阻止运行下一个case。如所有case值都不匹配,执行default后的语句。
例子:我们来做个周计划,周一、二学习理念知识,周三、四到企业实践,周五总结经验,周六、日休息和娱乐。

<script type="text/JavaScript">
   var myweek =3;//myweek表示星期几变量
   switch(myweek){
     case 1:
     case 2:
     document.write("学习理念知识");
     break;
     case 3:
     case 4:
     document.write("到企业实践");
     break;
     case 5:
     document.write("总结经验");
     break;
     default:
     document.write("周六、日休息和娱乐");
   }
 </script>

5、重复重复(for循环)
很多事情不只是做一次,要重复做。如打印10份试卷,每次打印一份,重复这个动作,直到打印完成。这些事情,我们使用循环语句来完成,循环语句,就是重复执行一段代码。
for语句结构:

for(初始化变量;循环条件;循环迭代)
 { 
   循环语句 
 }

例子:假如,一个盒子里有6个球,我们每次取一个,重复从盒中取出球,直到球取完为止。

<script type="text/javascript">
   var num=1;
   for (num=1;num<=6;num++){ //初始化值;循环条件;循环后条件值更新
     document.write("取出第"+num+"个球<br />");
   }
 </script>

我们有1,2,3...10不同面值的钱,使用for语句完成合计,看看我们一共有多少钱?

<script type="text/JavaScript">
   var mymoney,sum=0;//mymoney变量存放不同面值,sum总计
   for(mymoney=1;mymoney<=10;mymoney++){ 
     sum= sum + mymoney;
   }
   document.write("sum合计:"+sum);
 </script>

6、反反复复(while循环)
和for循环有相同功能的还有while循环, while循环重复执行一段代码,直到某个条件不再满足。
while语句结构:

while(判断条件)
 {
   循环语句
 }

使用while循环,完成从盒子里取球的动作,每次取一个,共6个球。

<script type="text/javascript">
   var num=0; //初始化值
   while (num<=6){ //条件判断
     document.write("取出第"+num+"个球<br />");
     num=num+1; //条件值更新
   }
 </script>

7、来来回回(Do...while循环)
do while结构的基本原理和while结构是基本相同的,但是它保证循环体至少被执行一次。因为它是先执行代码,后判断条件,如果条件为真,继续循环。
do...while语句结构:

do
 {
   循环语句
 }
 while(判断条件)

试着输出5个数字。

<script type="text/javascript">
   num= 1;
   do{
     document.write("数值为:" + num+"<br />");
    num++; //更新条件
   }
   while (num<=5)
 </script>

使用do...while语句,输出6个数字。

<script type="text/javascript">
   var mynum =6;//mynum初值化数值为6
   do{
     document.write("数字:"+mynum+"<br/>");
     mynum=mynum-1;
   }
  while(mynum>=1);
 </script>

 8、退出循环break
在while、for、do...while、while循环中使用break语句退出当前循环,直接执行后面的代码。
格式如下:

for(初始条件;判断条件;循环后条件值更新){
   if(特殊情况)
   {break;}
   循环代码
 }

考试成绩输出,如果成绩及格继续输出下个成绩,如果成绩不及格,退出并且后面成绩不输出.

<script type="text/JavaScript">
   var mynum =new Array(70,80,66,90,50,100,89);//定义数组mynum并赋值
   var i=0;
   while(i<mynum.length){
     if(mynum[i]<60){
     document.write("成绩"+mynum[i]+"不及格,不用循环了"+"<br>");
     break;
     }
     document.write("成绩:"+mynum[i]+"及格,继续循环"+"<br>");
     i=i+1;
   }
 </script>

9、继续循环continue
语句结构:

for(初始条件;判断条件;循环后条件值更新){
   if(特殊情况){
     continue;
   }
   循环代码
 }

上面的循环中,当特殊情况发生的时候,本次循环将被跳过,而后续的循环则不会受到影响。
例子:考试成绩输出,如果成绩及格继续输出下个成绩,如果成绩不及格,则不输出该成绩。

<script type="text/JavaScript">
   var mynum =new Array(70,80,66,90,50,100,89);//定义数组mynum并赋值
   var i;
   for(i=0;i<mynum.length;i++){
     if(mynum[i]<60){
       document.write("成绩不及格,不输出!"+"<br>");
       continue;
     }
     document.write("成绩:"+mynum[i]+"及格,输出!"+"<br>");
   }
 </script>

在一个大学的编程选修课班里,我们得到了一组参加该班级的学生数据,分别是姓名、性别、年龄和年级,接下来呢,我们要利用JavaScript的知识挑出其中所有是大一的女生的的名字哦。

学生信息如下:

    ('小A','女',21,'大一'),  ('小B','男',23,'大三'),

    ('小C','男',24,'大四'),  ('小D','女',21,'大一'),

    ('小E','女',22,'大四'),  ('小F','男',21,'大一'),

    ('小G','女',22,'大二'),  ('小H','女',20,'大三'),

    ('小I','女',20,'大一'),  ('小J','男',20,'大三')

<script type="text/javascript">
  //第一步把之前的数据写成一个数组的形式,定义变量为 infos
  var infos = [

['小A','女',21,'大一'],


['小B','男',23,'大三'],


['小C','男',24,'大四'],


['小D','女',21,'大一'],


['小E','女',22,'大四'],


['小F','男',21,'大一'],


['小G','女',22,'大二'],


['小H','女',20,'大三'],


['小I','女',20,'大一'],


['小J','男',20,'大三']
  ];
  //第一次筛选,找出都是大一的信息
  var arr1 = [];
  var n = 0;
  for(var i=0;i<infos.length;i++){ 
    if( infos[i][3] == "大一" ){ 
       arr1[n] = infos[i];
       document.write(arr1[n]+"<br/>");
       n=n+1;
    } 
  }
  document.write("大一人数: "+arr1.length+"<br/>"); 
  //第二次筛选,找出都是女生的信息
  for(var i=0;i<arr1.length;i++){ 
  //这里可以用switch 
    if(arr1[i][1]=='女'){
      document.write(arr1[i][0]+"<br/>");
    }
  }
</script>

以上就是关于Javascript流程控制语句的实例解析,希望对大家的学习有所帮助。

Javascript 相关文章推荐
广告显示判断
Aug 31 Javascript
JavaScript中的其他对象
Jan 16 Javascript
javascript动态加载二
Aug 22 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 Javascript
js正则表达式中test,exec,match方法的区别说明
Jan 29 Javascript
详解JavaScript对象类型
Jun 16 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
js实现延迟加载的几种方法
Apr 24 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 #Javascript
整理Javascript数组学习笔记
Nov 29 #Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 #Javascript
分享我的jquery实现下拉菜单心的
Nov 29 #Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 #Javascript
整理Javascript基础语法学习笔记
Nov 29 #Javascript
Jquery操作Ajax方法小结
Nov 29 #Javascript
You might like
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
PHP实现的策略模式示例
2019/03/20 PHP
分享8个Laravel模型时间戳使用技巧小结
2020/02/12 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
zTree插件下拉树使用入门教程
2016/04/11 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
轻松学习JavaScript函数中的 Rest 参数
2019/05/30 Javascript
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
python中函数默认值使用注意点详解
2016/06/01 Python
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
python如何快速生成时间戳
2020/07/21 Python
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
AJax面试题
2014/11/25 面试题
科室工作个人总结的自我评价
2013/10/29 职场文书
班组长安全生产职责
2013/12/16 职场文书
领导证婚人证婚词
2014/01/13 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
财务工作失误检讨书
2015/02/19 职场文书
2015年重阳节慰问信
2015/03/23 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
英语导游欢迎词
2015/09/30 职场文书
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技