整理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 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
Nov 28 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 Javascript
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
javascript对JSON数据排序的3个例子
Apr 12 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 Javascript
vscode自定义vue模板的实现
Jan 27 Vue.js
基于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 和 MySQL 基础教程(四)
2006/10/09 PHP
PHP之生成GIF动画的实现方法
2013/06/07 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
python 七种邮件内容发送方法实例
2014/04/22 Python
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
python实现决策树
2017/12/21 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
详解python实现线程安全的单例模式
2018/03/05 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
保险专业大专生求职信
2013/10/26 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
小小商店教学反思
2014/04/27 职场文书
投标承诺函格式
2015/01/21 职场文书
天下第一关导游词
2015/02/06 职场文书
python中使用redis用法详解
2022/12/24 Redis