JavaScript基础(二)选择语句、循环语句

简介: JavaScript基础(二)选择语句、循环语句

一、流程控制(选择执行)

1. if语句

if ( 条件表达式 ) {
      语句块
}

它的格式很简单,常用来进行判断。先判断 if 之后的条件是否满足,如果满足则执行语句块。比如判断一个人的年龄,是否为成年人,代码如下:


var age = 30;
if (age >= 18){
  console.log('成年人');//"成年人"
}

定义了年龄为30,使用if进行判断,30大于18,所以打印“成年人”。需要注意的是,如果 if 后的语句块中只有一行代码,则 { } 可以省略。


2. if-else语句

if ( 条件表达式 ) {
     语句块1
}else{
     语句块2
}

if-else 语句与 if 语句的区别仅仅在于加了else 判断,先判断 if 后的条件是否满足,如果满足执行语句块1,不满足则执行 else 后的语句块2。再拿上面的成年人来进行判断:


var age = 12;
if (age >= 18){
  console.log('成年人');
}else{
  console.log('未成年人');
}

定义年龄 age 为12,12不大于18,所以要执行else后的语句,即打印“未成年人”。


3. if-else嵌套

if ( 条件表达式1 ) {
     语句块1
}else if { 条件表达式n ){
     语句块n
}else {
     语句块n+1( 前面全为false才执行此语句块 )
}

if-else嵌套则是多个 if-else 语句的组合,可以对多个条件进行判断。举个打印成绩的例子:


var f = 75;
if (f > 100 || f < 0){
  console.losg('非法的成绩!');
}else if (f >= 90){
  console.log('优秀');
}else if (f >= 80){
  console.log('良好');
}else if (f >= 70){
  console.log('中等');
}else if (f >= 60){
  console.log('及格');
}else{
  console.log('不及格');
}

定义分数为75分,则依次往下进行判断,直到符合条件执行该条件下的语句块。该题打印结果为“中等”。


4. switch-case语句

switch ( 表达式 ){
      case 值1:
        语句块1
        break;(结束执行,跳出当前语句)
      case 值n:
        语句块n
        break;
        default:
        语句块n+1( 前面全为false才执行此语句块 )
}

switch-case 语句的运行方式为:先判断 switch 后的表达式的值,看它的值满足哪一个 case 的值,如果满足则执行该 case 后的语句块,执行结束后直接跳出(break)语句,如果前面都不满足,则执行 default 之后的语句块。


switch-case 语句也可用来判断成绩区间:


var score = 90;
if (score < 0 || score > 100){
  console.log('成绩错误!!!');
}
var end = parseInt(score /= 10);
switch(end){
  case 10:
  case 9:
    console.log('优秀');
  break;
  case 8:
    console.log('良好');
  break;
  case 7:
    console.log('中等');
  break;
  case 6:
    console.log('及格');
  break;
  default:
    console.log('不及格!');
  }

switch-case 使用过程中需要注意以下几点:


       表达式在与case后面的值比较的时候,用的是全等于(===)即同时判断值和类型。

       switch-case只能是全等于的比较,但结构更为清晰,执行效率更高


二、循环语句(循环执行)

1. while循环

初始值
while ( 循环条件 ){
      循环体
      增量
}

while 循环的执行为先判断循环条件,循环条件为 true,进入循环,false 则跳出。举一个简单的小例子:


var i = 1;
while (i <= 10){
  i++;
  console.log('123456');
}

定义 i 的值为1,条件为 i<=10,如果 i 满足条件则进入循环,i 自增后打印“123456”,直到 i 的值大于10为止。该程序结果为打印10次“123456”。


2. do-while循环

初始值
do {
    循环体
    增量
} while ( 循环条件 ) ;

do-while 可以认为与 while 相反,先进行循环,再判断循环条件,结果为 true 继续进入循环,结果为 false 则结束。


var i = 1;
do{
  console.log(i);
  i++;
}while (i <= 10);

该程序结果为打印1到10,先进行打印,再判断条件,直到条件判断为 false 跳出循环。


3. for循环

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

for 循环可能是在编程过程中使用最多的一个循环,它的执行方式为从初始值开始,判断循环条件,结果为 true 则执行循环体,最后执行增量,增量之后再执行循环条件。直至循环条件为 false时循环结束。


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

该例子同样为打印1到10。


4. 循环嵌套

       所谓循环嵌套就是在一个循环体内部又出现了其他的循环,任意两个循环之间都可以进行相互嵌套。嵌套后外层循环控制循环的行数;内层循环控制每一行拼接的数量。


//外层循环
for (var i = 1;i <= 5;i++){
  //内层循环
  for (var j = 1,str = '';j <= i;j++){
  str = str + '*';
  }
  console.log(str);
}

如上代码,两个 for 循环嵌套,外层循环控制该循环为5行,内层则控制打印的行内容为‘*’且*的数量不断自增,效果如下:

1.png



三、选择与循环语句例题

       了解了选择与循环语句后,我们通过几道例题来巩固一下:


//1.一张纸可以折无限次数,纸的厚度为0.03毫米,问:折多少次可以达到珠穆朗玛峰高度8848米?

//1.一张纸可以折无限次数,纸的厚度为0.03毫米,问:折多少次可以达到珠穆朗玛峰高度8848米?
var h = 0.00003;//初始化纸的厚度为0.00003
var count = 0;//count用于记录次数
do
{
  h *= 2;//h = h * 2
  count++;
}
while (h <= 8848);//直到h的值大于8848,跳出循环
console.log(count);//打印次数
//2.用while函数写出1~100之间所有偶数的和
var i = 1;
var sum = 0;//sum用于记录最后的和
while (i <= 100){//判断条件i为1~100
  if (i % 2 === 0){//与2取余结果为0的则为偶数
    sum += i;
  }
  i++;
}
console.log(sum);
*/
//3.打印九九乘法表
for (i = 9;i >= 1;i--){
  //内层循环,控制每行列数
  for (j = 9,str = '';j >= i;j--){
    //列 + * + 行 + = + 乘积结果
    str = str + j + '*' + i + '=' + (j*i) + ' ';
    //将第3,4行的第2列后加一个空格
    if (i === 9 && j === 1){
      str = str + '   ';
}
  }
  console.log(str);//每一行拼接结束后即打印
}
//4.打印2000~2100之间前10个闰年
for (var year = 2000,count = 0;year <= 2100;year++){
  //count用于记录闰年的个数
  if (year % 4 === 0 && year % 100 !== 0 || year % 400 ===0){
    console.log(year);
    count++;
  }
  if (count === 10){
    break;
  }
}
console.log(count);


相关文章
|
JavaScript 前端开发
JS循环for、for...of、for...in
本文介绍了JavaScript中不同的循环语句,包括传统的`for`循环、`for...of`循环用于遍历数组和类数组对象、`for...in`循环用于遍历对象的属性,并通过示例代码展示了它们的用法和区别。
200 6
JS循环for、for...of、for...in
|
JavaScript 前端开发
JavaScript基础知识-流程控制之while循环
这篇文章介绍了JavaScript中的while循环和do...while循环的基础知识,并通过一个实际案例演示了如何使用while循环计算投资增长到特定金额所需的年数。
200 2
JavaScript基础知识-流程控制之while循环
|
JavaScript 前端开发
js循环有几种
js循环有几种
182 0
|
JavaScript 前端开发
JavaScript中有哪几种循环?他们的运用场景在哪?
JavaScript中有哪几种循环?他们的运用场景在哪?
|
JavaScript
js 循环数组取值
js 循环数组取值
288 122
|
JavaScript 前端开发 索引
js的循环中foreach、for in和for of的区别
js的循环中foreach、for in和for of的区别
522 0
|
8月前
|
消息中间件 JavaScript 前端开发
最细最有条理解析:事件循环(消息循环)是什么?为什么JS需要异步
度一教育的袁进老师谈到他的理解:单线程是异步产生的原因,事件循环是异步的实现方式。 本质是因为渲染进程因为计算机图形学的限制,只能是单线程。所以需要“异步”这个技术思想来解决页面阻塞的问题,而“事件循环”是实现“异步”这个技术思想的最主要的技术手段。 但事件循环并不是全部的技术手段,比如Promise,虽然受事件循环管理,但是如果没有事件循环,单一Promise依然能实现异步不是吗? 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您
|
前端开发 JavaScript
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
本文介绍了JavaScript中的循环语句,包括for循环、for-in循环、for-of循环、while循环、do-while循环以及break和continue的使用。
873 1
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
|
JavaScript
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画,js循环动画,简单的画面设计。非常丝滑有意思,欢迎对此代码感兴趣的朋友前来下载参考。
121 2
|
JavaScript 前端开发
JavaScript基础知识-forEach循环
关于JavaScript基础知识中forEach循环的介绍。
149 1
JavaScript基础知识-forEach循环

热门文章

最新文章