JavaScript基础(第一部分 -- 简介、注释、输入输出、变量、数据类型、运算符、流程控制)(六)

简介: JavaScript基础(第一部分 -- 简介、注释、输入输出、变量、数据类型、运算符、流程控制)(六)

8.3.2 if else语句(双分支语句)

语法:

// 条件成立  执行 if 里面代码,否则执行else 里面的代码
if (条件表达式) {
    // 条件成立执行的代码
} else {
    // 条件不成立执行的代码
}

判断闰年:

算法:能被4整除且不能整除100的为闰年(如2004年就是闰年,1901年不是闰年)或者能够被 400 整除的就是闰年

var year = prompt('请输入年份')
      var yearNum = parseInt(year)
      if ((yearNum % 4 == 0 && yearNum % 100 != 0) || yearNum % 400 == 0) {
        alert(year + '是闰年')
      } else {
        alert(year + '不是闰年')
      }

8.3.3 if else if 语句(多分支语句)

语法:

// 适合于检查多重条件。
if (条件表达式1) {
  // 满足条件1执行
    语句1;
} else if (条件表达式2)  {
    // 满足条件2执行
    语句2;
} else if (条件表达式3)  {
   // 满足条件3执行
   语句3;
 ....
} else {
    // 上述条件都不成立执行此处代码
}

判断成绩级别:

  1. 90分(含)以上 ,输出:A
  2. 80分(含)~ 90 分(不含),输出:B
  3. 70分(含)~ 80 分(不含),输出:C
  4. 60分(含)~ 70 分(不含),输出:D
  5. 60分(不含) 以下,输出: E
var score = prompt('请输入你的成绩')
      if ( score >= 90 ) {
        alert('你的成绩等级为A')
      } else if ( score >= 80 ) {
        alert('你的成绩等级为B')
      } else if ( score >= 70 ) {
        alert('你的成绩等级为C')
      } else if ( score >= 60 ) {
        alert('你的成绩等级为D')
      } else {
        alert('你的成绩等级为E')
      }

8.3.4 三元表达式

有三元运算符组成的式子称为三元表达式.

语法:

表达式1 ? 表达式2 : 表达式3;

如果表达式1为 true ,则返回表达式2的值,如果表达式1为 false,则返回表达式3的值,类似于 if else (双分支) 的简写。

数字补0(范围0-99):

用户输入数字,如果数字小于10,则在前面补 0 ,比如01,09 ,如果数字大于10,则不需要补,比如 20。

var num = prompt('请输入一个0-99之间的数字')
    // 大于等于10不用补0直接返回
    // 小于10进行补0
    var res = num>=10 ? num : '0'+num
    alert(res)

8.3.5 switch 语句

switch 语句也是多分支语句,它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时,就可以使用 switch。

语法:

switch( 表达式 ){ 
    case value1:
        // 表达式 等于 value1 时要执行的代码
        break;
    case value2:
        // 表达式 等于 value2 时要执行的代码
        break;
    default:
        // 表达式 不等于任何一个 value 时要执行的代码
}
  • 关键字 switch 后面括号内可以是表达式或值, 通常是一个变量
  • 关键字 case , 后跟一个选项的表达式或值,后面跟一个冒号
  • switch 表达式的值会与结构中的 case 的值做比较
  • 如果存在匹配全等(===) ,则与该 case 关联的代码块会被执行,并在遇到 break 时停止,整个 switch 语句代码执行结束
  • 如果所有的 case 的值都和表达式的值不匹配,则执行 default 里的代码

执行case 里面的语句时,如果没有break,则继续执行下一个case里面的语句。

var num = prompt('请输入一个整数数字(1-3)')
      num = parseInt(num)
      switch (num) {
        case 1:
          alert('你输入的是1')
          break
        case 2:
          alert('你输入的是2')
          break
        case 3:
          alert('你输入的是3')
          break
        default:
          alert('你输入的数字大于3')
          break
      }

var num = prompt('请输入一个整数数字(1-3)')
      num = parseInt(num)
      switch (num) {
        case 1:
          alert('你输入的是1')
          // break
        case 2:
          alert('你输入的是2')
          // break
        case 3:
          alert('你输入的是3')
          // break
        default:
          alert('你输入的数字大于3')
          // break
      }

8.5.6 switch 语句和 if else if 语句的区别

  • 一般情况下,它们两个语句可以相互替换
  • switch…case 语句通常处理 case为比较确定值的情况, 而 if…else…语句更加灵活,常用于范围判断(大于、等于某个范围)
  • switch 语句进行条件判断后直接执行到程序的条件语句,效率更高。而if…else 语句有几种条件,就得判断多少次。
  • 当分支比较少时,if… else语句的执行效率比 switch语句高。
  • 当分支比较多时,switch语句的执行效率比较高,而且结构更清晰。

8.4 循环

在实际问题中,有许多具有规律性的重复操作,在程序中要完成这类操作就需要重复执行某些语句。

在程序中,一组被重复执行的语句被称之为循环体,能否继续重复执行,取决于循环的终止条件。由循环体及循环的终止条件组成的语句,被称之为循环语句

JS 中的循环:

  • for 循环
  • while 循环
  • do…while 循环

8.4.1 for 循环

for 循环主要用于把某些代码循环若干次,通常跟计数有关系。

语法:

for(初始化变量; 条件表达式; 操作表达式 ){
    //循环体
}
  • 初始化变量:通常被用于初始化一个计数器,该表达式可以使用 var 关键字声明新的变量,这个变量帮我们来记录次数。
  • 条件表达式:用于确定每一次循环是否能被执行。如果结果是 true 就继续循环,否则退出循环。
  • 操作表达式:每次循环的最后都要执行的表达式。通常被用于更新或者递增计数器变量。当然,递减变量也是可以的。
for ( var i=0; i<10; i++ ) {
      console.log(i)
    }

执行过程:

8.4.1.1 for 循环重复相同的代码

for( var i=0; i<10; i++ ) {
      console.log('hello')
    }

8.4.1.2 for 循环重复不相同的代码

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

8.4.1.3 for 循环重复不相同的代码

for( var i=0; i<15; i++ ) {
      if ( i==0 ) {
        console.log('当前i=0')
      } else if ( i>0 && i<=10 ) {
        console.log(i)
      } else {
        console.log('i大于10')
      }
    }

8.4.1.4 双重 for 循环

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构,例如在for循环语句中,可以再嵌套一个for 循环,这样的 for 循环语句我们称之为双重for循环。

语法:

for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
    for (内循环的初始; 内循环的条件; 内循环的操作表达式) {  
       需执行的代码;
   }
}

打印九九乘法表:

for( var i=1; i<=9; i++ ) {
      var str = '' // 保存每行的结果
      for ( var j=1; j<=i; j++ ) {
        str += j+'X'+i+'='+i*j+'\t'
      }
      console.log(str)
    }

8.4.2 while 循环

while 语句可以在条件表达式为真的前提下,循环执行指定的一段代码,直到表达式不为真时结束循环。

while语句的语法结构如下:

while (条件表达式) {
    // 循环体代码 
}

执行思路:

  • 先执行条件表达式,如果结果为 true,则执行循环体代码;如果为 false,则退出循环,执行后面代码
  • 执行循环体代码
  • 循环体代码执行完毕后,程序会继续判断执行条件表达式,如条件仍为true,则会继续执行循环体,直到循环条件为 false 时,整个循环过程才会结束

注意:

  • 使用 while 循环时一定要注意,它必须要有退出条件,否则会成为死循环
  • while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断,比如判断用户名和密码

计算 1 ~ 100 之间所有整数的和:

var sum = 0
    var i=1
    while (i<=100) {
      sum += i
      i++
    }
    console.log(sum)

8.4.3 do while 循环

do… while 语句其实是 while 语句的一个变体。

该循环会先执行一次代码块,然后对条件表达式进行判断,如果条件为真,就会重复执行循环体,否则退出循环。

do… while 语句的语法结构如下:

do {
    // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

执行思路:

  • 先执行一次循环体代码
  • 再执行条件表达式,如果结果为 true,则继续执行循环体代码,如果为 false,则退出循环,继续执行后面代码

注意:先再执行循环体,再判断,我们会发现 do…while 循环语句至少会执行一次循环体代码

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

8.4.4 continue break

8.4.4.1 continue 关键字

continue 关键字用于立即跳出本次循环,继续下一次循环(本次循环体中 continue 之后的代码就会少执行一次)。

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

8.4.4.2 break 关键字

break 关键字用于立即跳出整个循环(循环结束)。

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


相关文章
|
2月前
|
JavaScript 前端开发
JavaScript如何判断变量undefined
JavaScript如何判断变量undefined
|
4天前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
4天前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
|
4天前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
20天前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
41 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
1月前
|
JavaScript 前端开发 开发者
【干货拿走】JavaScript中最全的数据类型判断方法!!!!
【干货拿走】JavaScript中最全的数据类型判断方法!!!!
20 1
|
16天前
|
JavaScript 前端开发
局部 JavaScript 变量
JavaScript 中,函数内部使用 `var` 声明的变量为局部变量,仅在函数内可见,函数执行完毕后被删除。全局变量则在函数外部声明,整个页面的脚本和函数均可访问,页面关闭后才被删除。未声明的变量赋值会自动成为 `window` 对象的属性,且在非严格模式下可被删除。
|
21天前
|
存储 JavaScript 前端开发
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
15 0
|
1月前
|
JavaScript 前端开发
什么是JavaScript变量?
什么是JavaScript变量?
32 0
|
JavaScript 前端开发
JavaScript基础(第一部分 -- 简介、注释、输入输出、变量、数据类型、运算符、流程控制)(三)
JavaScript基础(第一部分 -- 简介、注释、输入输出、变量、数据类型、运算符、流程控制)(三)