JS流程控制(语句)

更新日期: 2019-07-20阅读: 2.3k标签: 流程

一、流程控制

1. 作用:控制代码的执行顺序

2. 分类:

(1) 顺序结构:从上到下依次执行代码语句
(2) 分支/选择结构


1. if语句

简单if结构

  if(条件表达式){
      表达式成立时执行的代码段
  }

注意 : 除零值以外,其他值都为真,以下条件为假值false

if(0){}
if(0.0){}
if(""){} //空字符串
if(undefined){}
if(NaN){}
if(null){}

特殊写法 : { }可以省略,一旦省略,if语句只控制其后的第一行代码

var a = 10;
if(a<5){
    console.log(‘成立‘);    //如果if不成立则不运行
}
if(a<5)console.log(‘成立‘);    //如果if不成立则不运行
console.log(‘测试‘);


2.if - else结构

if(条件表达式){
    //条件成立时执行
}else{
    //条件不成立时选择执行
var a = 10;
if(a==0){
    console.log(‘成立‘)
}else{
    console.log(‘不成立‘)
}


3.多重分支结构

 if(条件1){
    //条件1成立时执行
}else if(条件2){
    //条件2成立时执行
}else if(条件3){
    //条件3成立时执行
}...else{
    //条件不成立时执行
}
var bmi=23.5;
if(bmi>23.5){
    console.log(‘肥胖‘)
}else if(bmi>=18.5){
    console.log(‘正常‘)
}else{
    console.log(‘偏瘦‘)
}
//正常


4.switch语句

语法 :

switch(value){
     case 值1 :
     //value与值1匹配全等时,执行的代码段
     break; //结束匹配
     case 值2 :
     //value与值2匹配全等时,执行的代码段
     break;
     case 值3 :
     //value与值3匹配全等时,执行的代码段
     break;
     default:
      //所有case匹配失败后默认执行的语句
      break;
}

使用 :

1. switch语句用于值的匹配,case用于列出所有可能的值;只有switch()表达式的值与case的值匹配全等时,才会执行case对应的代码段

2. break用于结束匹配,不再向后执行;可以省略,break一旦省略,会从当前匹配到的case开始,向后执行所有的代码语句,直至结束或碰到break跳出

3. default用来表示所有case都匹配失败的情况,一般写在末尾,做默认操作

4. 多个case共用代码段

case 值1:
case 值2:
 case 值3:

以上任意一个值匹配全等都会执行的代码段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //var week = Number(prompt('请输入0-6之间是数字'));
        //var week = parseInt(prompt('请输入0-6之间是数字'));
        /*switch(week){
            case 0://'0'===0
                //变量值与case列举的值匹配全等时执行的代码段
                console.log('星期日')
                break;
            case 1:
                console.log('星期一')
                break;
            default:
                console.log('请输入合法值');

        }*/
        //多个case共用代码段
        var month = Number(prompt('月份'));
        switch(month){
            case 1:
            case 3:
            case 5:
            case 7:
            case 8:
            case 10:
            case 12:
                console.log('31天');
                break;
            case 2:
                console.log('28天');
                break;
            default:
                console.log('30天');
        }
    </script>
</head>
<body>
</body>
</html>


5. 循环结构

作用:根据条件,重复执行某段代码


1. while循环

定义循环变量;
  while(循环条件){
   条件满足时执行的代码段
   更新循环变量;
  }
//循环变量
var i = 1;
var sum=0;
while(i<101){
    //循环体
    console.log(i);
    sum+=i;
    //更新循环变量
    i++;
}
console.log(sum);


2. do-while循环

do{
    循环体;
    更新循环变量
}while(循环条件);
//循环输出一百次
var i = 101;
do{
    console.log(‘python‘);
    //更新循环变量
    i++;
}while(i<101);

与while循环的区别 

while循环先判断循环条件,条件成立才执行循环体

do-while循环不管条件是否成立,先执行一次循环体


3. for循环

for(定义循环变量;循环条件;更新循环变量){
    循环体;
}

循环控制 :

1. break 强制结束循环

2. continue 结束当次循环,开始下一次循环

循环嵌套 :  在循环中嵌套添加其他循环

/*控制循环体的执行:break/continue*/
for(var i=1;i<10;i++){
console.log(i);
    if(i==5){
        console.log(‘--------‘)
        //一旦执行break,循环体中后面的代码都不执行
        break;
    }
}

链接: https://www.fly63.com/article/detial/4270

Vue.js的复用组件开发流程

接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程。本节我们主要要完成这样一个列表功能,每一行的列表是一个组件,列表内可能出现按钮组件或者箭头组件,点击按钮组件可以自定义事件

5分钟读懂JavaScript预编译流程

JavaScript运行三部曲:语法分析、预编译、解释执行。语法分析很简单,就是引擎检查你的代码有没有什么低级的语法错误; 解释执行顾名思义便是执行代码了; 预编译简单理解就是在内存中开辟一些空间,存放一些变量与函数 ;

Web前端开发流程

开发准备:了解产品和设计,提出疑问和见解,技术调研和培训,预算人力和时间。开发过程:职责任务,页面开发,提取剥离

必须要知道的Vue构建流程

vue是通过rollup来进行构建的,同样的构建工具webpack更强大一些,可以处理图片、 css、js等;但是rollup只做js的处理,相比之下更轻量, 所以rollup更适合js框架的打包,总共有三个版本的构建

前端开发流程中一定要注意的5个点!

前端开发经常会遇到这样的情况,项目经理莫名奇妙发了个会议邀请,然后一股脑把产品下阶段的需求讲完,开发听得云里雾里,心里吐槽一堆细节产品自己没理清,居然在这问前端要多久

一段代码,带你理解js执行上下文的工作流程

我相信很多前端初学者一开始都会被执行上下文这个概念弄晕,或者说似懂非懂。对于工作两年的我来说,说来实在惭愧,虽然知道它大概是什么,但总觉得没有一个更为清晰的认识(无法把它的工作过程描述清楚)

事件流程以及dom2级事件绑定

事件流程分为三个阶段:捕获阶段、目标阶段、冒泡阶段。dom2级事件可以重复绑定,在高级浏览器中的执行顺序是从上至下。在ie8以下浏览器中是倒叙执行,但是当attachEvent和dom0级一起执行时

React Native之启动流程

JS 程序的入口,将当前 APP 对象注册到 AppRegistry 组件中, AppRegistry 组件是 js module;我们新建一个RN的项目,在原生代码中会生成 MainActivity 和 MainApplication 两个 Java 类。顾名思义

网站部署流程

在运维过程中,网站部署是运维的工作之一。传统的网站部署的流程大致分为:需求分析 --> 原型设计 --> 开发代码 --> 提交代码 --> 内网部署 --> 内网测试 --> 确认上线 --> 备份数据 --> 外网更新 --> 外网测试 --> 发布完成

理解 OAuth 2.0 认证流程

OAuth 2.0 标准的 RFC 比较难读懂,本文尽量把认证流程说明白。假设我们的网站有一个功能是同步用户在 Github 的所有仓库。对接 OAuth 流程大致分为 5 个步骤:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!