整理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 相关文章推荐
基于jquery的商品展示放大镜
Aug 07 Javascript
封装了一个js图片轮换效果的函数
Sep 28 Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 Javascript
js对象简介与基本用法示例
Mar 13 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
如何开发一个虚拟域名系统
2006/10/09 PHP
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
PHP仿盗链代码
2012/06/03 PHP
php搜索文件程序分享
2015/10/30 PHP
php插入含有特殊符号数据的处理方法
2016/11/24 PHP
JavaScript面象对象设计
2008/04/28 Javascript
JavaScript 加号(+)运算符号
2009/12/06 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2016/10/27 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
AngularJs 终极购物车(实例讲解)
2017/11/08 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
Python中map和列表推导效率比较实例分析
2015/06/17 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
python如何调用java类
2020/07/05 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
私有程序集与共享程序集有什么区别
2013/04/05 面试题
干部下基层实施方案
2014/03/14 职场文书
青年标兵事迹材料
2014/08/16 职场文书
健康状况证明模板
2014/10/23 职场文书
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript