美文网首页
JavaScript语句

JavaScript语句

作者: 啃馒头的狼 | 来源:发表于2019-07-22 21:48 被阅读0次

    我们的程序是由一条一条语句构成的;
    语句是按照自上向下的顺序一条一条执行的;
    在JS中可以使用{}来为语句进行分组,

    • 同一个{}中的语句我们称为是一组语句,
    • 一个{}中的语句我们也称为叫一个代码块,在代码块的后边就不用再编写;了。

    流程控制语句

    • JS中的程序是从上到下一行一行执行的
    • 通过流程控制语句可以控制程序执行流程,使程序可以根据一定的条件来选择执行
    • 语句的分类:
      • 条件判断语句
      • 条件分支语句
      • 循环语句

    条件判断语句

    使用条件判断语句可以在执行某个语句之前进行判断,如果条件成立才会执行语句,条件不成立则语句不执行。

    if语句

    if结构先判断一个表达式的布尔值,然后根据布尔值的真伪,执行不同的语句。所谓布尔值,指的是 JavaScript 的两个特殊值,true表示false表示

    if(表达式)
      语句;
    

    上面是if结构的基本形式。需要注意的是,“布尔值”往往由一个条件表达式产生的,必须放在圆括号中,表示对表达式求值。如果表达式的求值结果为true,就执行紧跟在后面的语句;如果结果为false,则跳过紧跟在后面的语句。

    var name = "zhangsan";
    if (name === "zhangsan");
    console.log("Welcome zhangsan");
    

    上面的代码会输出Welcome zhangsan,因为此时if的条件语句里面条件为真,这是就会返回true,if语句条件为true,就直接执行了后面的console.log()语句,但是如果我们尝试去更改这个变量,就会发现console.log()语句将不会执行。

    需要注意的是上面这种写法if语句里面只能有一个语句,如果需要写多个语句,那么需要在if条件之后使用{}.

    if (条件){
      //code ... ;
      //code ... ;
    }
    

    注意,if后面的表达式之中,不要混淆赋值表达式(=)、严格相等运算符(===)和相等运算符(==)。尤其是赋值表达式不具有比较作用。

    var x = 1;
    var y = 2;
    if (x = y) {
      console.log(x);
    }
    // "2"
    

    在上面的代码中,原意是,当x等于y的时候,才执行相关语句。但是,不小心将严格相等运算符写成赋值表达式,结果变成了将y赋值给变量x,再判断变量x的值(等于2)的布尔值(结果为true)。

    这种错误可以正常生成一个布尔值,因而不会报错。为了避免这种情况,有些开发者习惯将常量写在运算符的左边,这样的话,一旦不小心将相等运算符写成赋值运算符,就会报错,因为常量不能被赋值

    if (x = 2){
        
    }// 不报错
    if (2 = x){
        
    } // 报错
    

    if ... else 语句

    if代码块后面,还可以跟一个else代码块,表示不满足条件时,所要执行的代码。

    if (m === 3) {
      // 满足条件时,执行的语句
    } else {
      // 不满足条件时,执行的语句
    }
    

    上面代码判断变量m是否等于3,如果等于就执行if代码块,否则执行else代码块。

    对同一个变量进行多次判断时,多个if...else语句可以连写在一起。

    if (m === 0) {
      // ...
    } else if (m === 1) {
      // ...
    } else if (m === 2) {
      // ...
    } else {
      // ...
    }
    

    switch结构(也叫条件分支语句)

    switch (fruit) {
      case "banana":
        // ...
        break;
      case "apple":
        // ...
        break;
      default:
        // ...
    }
    

    上面代码根据变量fruit的值,选择执行相应的case。如果所有case都不符合,则执行最后的default部分。需要注意的是,每个case代码块内部的break语句(break关键字)不能少,否则会接下去执行下一个case代码块,而不是跳出switch结构。

    需要注意的是,switch语句后面的表达式,与case语句后面的表示式比较运行结果时,采用的是严格相等运算符(===),而不是相等运算符(==),这意味着比较时不会发生类型转换
    当要判断的值是一个范围时,不适合使用switch,适合使用if模拟多分支
    switch只适合做具体的值的判断

    循环语句

    循环语句主要用于执行重复性的操作,通过循环语句可以反复的执行一段代码多次。

    while语句

    while语句中包括一个循环条件和一段代码块,只要条件为真,就不断循环执行代码块。

    while (条件)
        语句;
    //或者
    while (条件) 语句;
    

    while语句的循环条件是一个表达式,必须放在圆括号中。代码块部分,如果只有一条语句,可以省略大括号,否则就必须加上大括号。

    while (条件) {
      语句;
    }
    

    创建一个循环,一般需要三个步骤:

    //1、创建初始化变量
    var i = 0;
    //2、在循环中设置一个条件表达式
    while (i < 10) {
        alert(i);
        //3、定义一个更新表达式,每次更新初始化变量
        i++;
    }
    while (i < 10) {
        document.write (i++ +"<br>")
    }
    

    do...while语句

    do...while循环与while循环类似,唯一的区别是先依次运行循环体,然后判断循环条件。

    do
      语句
    while (条件);
    
    // 或者
    do {
      语句
    } while (条件);
    

    需要注意的是,不管do ... while条件是否为真,都会至少执行一次循环。同时,while语句后面的分号不能省略.

    var x = 3;
    var i = 0;
    
    do {
      console.log(i);
      i++;
    } while(i < x);
    

    一定要注意,虽然while语句和do...while语句很类似,但是while语句必须在条件为真的情况下才能执行,而do..while语句则
    不论条件是否为真,都会执行至少一次,这是二者之前的区别。

    continue 关键字

    continue(kang ti niu)语句用于立即终止本轮循环,返回循环结构的头部,开始下一轮循环。

    var i = 0;
    while (i<100) {
        i = i + 1;
        if (i % 2 !==0) continue;
        console.log(i);
    }
    

    例如上面的例子当中,输出100以内的偶数,这是一种重复性较高的工作,那么就可以使用循环的形式。
    上面的案例,让i的初始值为0,并且随着每一次的循环递增,在递增的过程中,判断除以2是否会存在余数,如果存在
    则使用continue跳过。如果不存在则输出。

    break关键字

    break(bu rui ke)关键字类似于continue关键字,可以让代码不按既有顺序执行。
    而和continue不同的是,break会直接跳过整个循环流程,而continue只会跳过那一个步骤。

    例如:

    for(var i=0;i<10;i++){
      console.log('当前的i值是: ' + i);
      if (i === 5) break;
    }
    

    代码运行的结果就是当i 等于5时,整个循环都会被跳出。
    而如果把上面的代码中break换成continue,那么当i等于5时,就会跳过当前这一步的循环开启一个新的循环。

    for 循环

    for循环语句是循环的另外一种形式,可以指定循环的起点、终点和结束条件。
    它的语法格式如下:

    for (初始化表达式; 条件表达式; 更新表达式)
      语句
    
    // 或者
    
    for (初始化表达式; 条件表达式; 更新表达式) {
      语句
    }
    for语句后面的括号里面,有三个表达式。
    

    初始化表达式(initialize):确定循环变量的初始值,只在循环开始时执行一次
    条件表达式(test):每轮循环开始时,都要执行这个条件表达式,只有值为,才继续进行循环。
    更新表达式(increment):每轮循环的最后一个操作,通常用来更新循环变量。
    例如:

    var x = 3;
    for (var i = 0; i < x; i++) {
      console.log(i);
    }
    

    下面是小练习:
    1.入职薪水10K,每年涨幅5%,50年后工资多少?
    demo:

    //入职薪水10K,每年涨幅5%,50年后工资多少?
    var base_m = 10000;
    for (var i =1;i <= 50; i++){
      base_m = base_m * 0.05 + base_m;
    }
    console.log('五十年后的薪水为:' + base_m);
    

    2.打印100以内的偶数
    demo:

    for(var i=0;i<100;i++){
      if (i % 2 ===0 ) {
        console.log(i);
      }
    }
    

    3.打印100以内所有偶数的和:
    demo:

    var num_val = 0;
    for(var i=0;i<100;i++){
      if (i % 2 ===0 ) {
        num_val = num_val + i;
      }
    }
    console.log(num_val);
    

    for循环的嵌套

    一般情况下,循环与循环之间是可以完成嵌套的。 例如,我们可以通过两个for循环的嵌套打印出一个直角三角形。
    demo:

    for(var i =0;i<9;i++){ 
      console.log("one" + i);
      for(var j = 0; j < i -1 ;j++){
        console.log("two - "+j)
        document.writeln("*");
      }
      document.write("<br/>");
    }
    

    在使用for循环的过程中,我们可以将for循环的条件省略,例如:

    for(;;){
      // 此时将会是一个死循环
    }
    

    for、while、do.....while的区别

    1、同一个功能三种循环都可以实现

    2、如果知道循环次数用for循环,不知道循环次数用while或者do..while循环

    3、如果需要无条件先执行一次用do...while,否则用while

    死循环

    循环主要根据我们设定的条件来判断是否要开启下一次循环过程。如果我们设定的循环的条件不合理的话,就会进入死循环,代码进入死循环后,将一直陷入到死循环当中。

    for(var i=0;i >=0 ;i++){
      console.log('hello,world');
    }
    

    debug 调试工具

    在编写js代码的过程中,我们经常需要调试代码,虽然可以使用console.log()的形式来调试代码,但是当业务逻辑过于复杂时,将变得复杂起来。
    所以我们在开发debug的过程中,除了使用console.log()以外,还应该更加灵活的使用关键字debugger就可以让代码执行到debugger的位置停止。
    当然,我们可以选择使用不同浏览器当中内置的辅助工具帮助我们调试也是没有问题的。

    1. 打印100–200之间所有能被3或者7整除的数
    demo:

    for(var i=100; i<= 200; i++){
      if(i % 3 === 0 || i % 7 === 0) {
        console.log(i);
      }
    }
    

    2. 计算100的阶乘

    阶乘指从1乘以2乘以3乘以4一直乘到所要求的数。例如所要求的数是4,则阶乘式是1×2×3×4,得到的积是24,24就是4的阶乘。 例如所要求的数是6,则阶乘式是1×2×3×……×6,得到的积是720,720就是6的阶乘。
    例如所要求的数是n,则阶乘式是1×2×3×……×n,设得到的积是x,x就是n的阶乘。任何大于1的自然数n阶乘表示方法: n!=1×2×3×……×n  或 n!=n×(n-1)!   5!=54321=120。
    demo:

    // 计算100 的阶乘
    var b_n = 1;
    for(var i=1;i<=100;i++){
      b_n =  b_n * i;
    }
    console.log(b_n);
    

    相关文章

      网友评论

          本文标题:JavaScript语句

          本文链接:https://www.haomeiwen.com/subject/vwevlctx.html