week1.3流程控制语句——每天一个JS小总结

最新推荐文章于 2022-10-24 17:38:26 发布
最新推荐文章于 2022-10-24 17:38:26 发布
阅读量129 收藏
点赞数
分类专栏： 前端开发 javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44828153/article/details/107687966
版权

week1.3流程控制语句

 

选择结构

if

if...else结构体和三元表达式的功能是很像的，但是我们需要注意的是三元表达式中只能写入表达式或者值，而if...else语句中可以写入多条语句或者其他的功能性代码。功能类似但是不能等同！

if ( 条件 ){

语句 //条件为true时执行该语句

}else{

语句 //条件为false时执行该语句

}

if(10=='10'){
        console.log('条件为true我执行');// 执行
    }else{
        console.log('条件为false我执行');// 不执行
    }

if( 条件1 ){

语句1 //条件1为真时执行语句1

}else if（条件2）{

语句2 //条件1为假，条件2为真时执行语句2

}else if（条件3）{

语句3 //条件1为假，2为假，3为真时执行语句3

}else{

语句4 //上面都为假时执行语句4

}

嵌套if

// 需求： 体育考试，男生：罚十个球进了5个以上的及格，女生：罚十个球进了3个以上的及格
    var gender = prompt('请输入您的性别');
    var score = +prompt('请输入您的得分');
​
    if( gender === 'male' ){
        // 男性
        if( score >= 5 ){
            console.log('及格');
        }else{
            console.log('不及格');
        }
    }else{
        // 女性
        if( score >= 3 ){
            console.log('及格');
        }else{
            console.log('不及格');
        }
    }

 

switch

Switch结构和if...else if...else结构非常像，它们都能够进行对变量的多次判断并给出相应的处理方案。

switch（变量名）{

}

需求：小明为手机设置了快速拨号功能，按1给父亲打电话，按2给母亲打电话，按3给朋友打电话，按4给110打电话

 // 多重if结构实现 
    var callNum = Number(prompt());
    if (callNum==1) {
        console.log('打给父亲');
    }else if(callNum==2){
        console.log('打给母亲');
    }else if(callNum==3){
        console.log('打给朋友');
    }else if(callNum==4){
        console.log('快打110！！！');
    }else{
        console.log('其他的号码随便打');
    }
​
​
    // 使用switch结构实现
    var callNum = Number(prompt());
    switch(callNum){
        case 1:
            console.log('打给父亲');
            break;
        case 2:
            console.log('打给母亲');
            break;
        case 3:
            console.log('打给朋友');
            break;
        case 4:
            console.log('快打110！！！');
            break;
        default:
            console.log('其他的号码随便打');
    }

从上面的代码中我们可以看出对于变量的等值判断switch结构要比if结构清晰并且写起来更加舒服。

在switch语句中有一个default选项，它的执行逻辑和if语句中的else部分是一样的，default选项一定是等到其他的部分判断结束之后才会执行。default部分的书写顺序不是固定的，如果你愿意你也可以将default部分放在switch语句的顶部。不过也要在该部分之后放一个break关键字。

在switch语句中break是必须的，如果缺失了break就会发生switch穿透。

switch穿透是指当switch语句中某一个case被匹配到并且该case下的语句会被执行，当case部分逻辑执行完毕之后如果没有break的话就会一直往下一个case匹配。

也就是说在switch语句中当case被匹配到，程序只有遇到break才会跳出switch。

多重if和switch区别

多重if和switch区别？

前者用于范围判断，后者用于等值判断

循环结构

while

循环操作用于执行重复的操作，它拥有多种形式。而无论是哪一种形式其实都离不开四个组成部分：

1，循环变量:通常作为条件出现

2，条件判断:循环是否执行的依据

3，循环操作:重复执行的部分

4，更新变量:防止循环成为死循环，跳出循环体的重要组成部分

while(条件){

// 循环体

}

var num = 1;// 初始化循环变量

while(num <= 100){// 循环变量

// 循环体

console.log('第'+num+'次输出：hello world！');

// 更新变量

num++;

}

do-while

    /*
        do{
    
        }while( 条件 )
    */
    var sum1 = 0;
    var num1 = 11;
    while( num1<=10 ){
        sum1+=num1;
        num1++;
    }
    console.log( sum1 );
​
    var sum2 = 0;
    var num2 = 11;
    do{
        sum2+=num2;
        num2++;
    }while( num2<=10 )
    console.log( sum2 );

 

 

区别

while 和 do..while循环的区别？

while是先判断，再执行，如果条件不满足，一次都不会执行

do...while是先执行，再判断，至少都会执行一次

for

    /*
        for( 声明循环变量;循环条件;更新循环变量 ){
            // 循环体...
        }
    */
    var num = 1;
    while( num<=100 ){
        console.log( '第'+num+'次:好好学习，天天向上' );
        num++;
    }
    // 使用for循环打印100次，好好学习，天天向上
    for( var num = 1;num<=100;num++ ){
        console.log( '第'+num+'次:好好学习，天天向上' );
    }

嵌套循环

允许我们进行循环之间的相互嵌套，而循环之间的嵌套也能帮助我们完成一些带有特定层级关系的业务。

需求：录入学生的成绩。共有三个班级，记录每个班级四名学生的成绩(循环录入)。

	for( var i=1;i<=3;i++ ){
		// i=>1 j=>1
		// i=>1 j=>2
		// i=>2 j=>1
		for( var j=1;j<=4;j++ ){
			console.log( '第'+i+'个班级第'+j+'名学生的成绩' );
		}

	}
//写法2
	for( var i=1;i<=4;i++ ){
		console.log( '第1个班级第'+i+'名学生的成绩' );
	}
	for( var i=1;i<=4;i++ ){
		console.log( '第2个班级第'+i+'名学生的成绩' );
	}
	for( var i=1;i<=4;i++ ){
		console.log( '第3个班级第'+i+'名学生的成绩' );
	}

上面的代码就是一个典型的嵌套循环的操作，这种嵌套循环的语法对于新手极其容易让人混淆，所以我们一开始需要牢牢抓住嵌套循环的语句的特点：

外层循环执行一次，内层循环执行一轮

上面的代码仅仅只是让我们循环录入每一个同学的成绩，并没有做其他事情，我们将需求改一下。

要求1：计算出三个班级的总分。

	var sum = 0;
	for( var i=1;i<=3;i++ ){// 外层循环控制班级
		for( var j=1;j<=4;j++ ){// 内层循环控制人数
			var score = +prompt('请输入第'+i+'个班级第'+j+'个学生的成绩');
			sum += score;
		}
	}
	console.log( sum );

要求2：计算出每一个班级自己的平均分。

	for( var i=1;i<=3;i++ ){// 外层循环控制班级
		var sum = 0;
		for( var j=1;j<=4;j++ ){// 内层循环控制人数
			var score = +prompt('请输入第'+i+'个班级第'+j+'个学生的成绩');
			sum += score;
		}
		console.log( '第'+i+'个班级的平均分为：'+sum/4 );
	}

while和for循环体的区别

循环次数确定的情况，通常选用for循环

循环次数不确定的情况，通常选用while

while和do...while的区别

当条件为false时，while一次都不会执行，先判断再执行

当条件为false时，do...while至少会执行一次，先执行再判断

break和continue区别

break语句

之前我们在switch语句中使用了break语句，用以跳出switch语句。

break语句也可以用在循环语句中，也可以跳出循环语句。

需求：计算1-10整数之和，当和大于20时结束计算：

    var sum = 0;
    for( var i=1;i<100;i++ ){
        sum += i;
        if( sum>20 ){
            break;// 跳出循环
        }
    }
    sum;// 21

continue语句

continue和break语句类似，也是跳转的作用，可以让代码不按照既有的顺序执行。

continue是跳出本次循环，直接进入下一次循环操作。

求1-100之间所有偶数之和：

    var sum = 0;
​
    for( var i=1;i<=100;i++ ){
​
        // 当continue语句执行，循环体中continue语句后面的所有的代码都不会执行
​
        // 直接进入下一次循环
​
        if( i %2 == 0 ) continue;
​
        sum += i;
​
    }

练习

// 需求1：求出1-100之间所有整数之和
// 需求2：求出1-100之间所有偶数之和
// 需求3：求出1-100之间所有奇数的和
// 需求4：输出1-100之间所有7的倍数
//需求5：在页面中输出1-1000之间所有5的倍数，每8个数字换一行
// 6.让用户输入十个数字，比较出其中最大值
// 7.求1-10之间的整数和，和大于20时候停止相加，并输出和，以及以前的数字
// 8.输出加法公式
// 9需求：录入学生的成绩。共有三个班级，记录每个班级四名学生的成绩(循环录入)
// 要求1：计算出三个班级的总分
// 要求2：计算出每一个班级自己的平均分
/*10
        *
        **
        ***
        ****
        *****
/*11
        *
        ***
        *****
        *******
        *********
    */  
​
/*12
        *****
        ****
        ***
        **
        *
    */
/*13
​
    *
   ***
  *****
 *******
*********
    &nbsp;
​
    */
/*14
        *
        **
        ***
        ****
        *****
    */
/*15
        *****
        *****
        *****
​
    */
​
// 16两种乘法口诀表

 

复习

完整的循环

1，定义循环变量

2，循环条件

3，循环体

4，更新循环变量

 

JS五大基本数据类型

1，number

2，string

3，boolean

4，undefined

5，null

 

String() 和 toString() 区别？

1，调用方式不同

String( 变量 )

变量.toString()

2，String()可以转换任意数据，toString()无法转换undefined和null

答案

​
// 需求1：求出1-100之间所有整数之和
// 先定义sum
// var sum = 0;
// // 用for
// for(var i = 1;i <=100;i++){
//  sum+=i;
// }
//  console.log(sum);
​
​
// 需求2：求出1-100之间所有偶数之和
// 先定义和
// var sum = 0;
// for
// for(var i = 1; i<=100;i++){
//  // if判断偶数
//  if(i%2 === 0){
//      sum += i;
//  }
// }
// console.log(sum);
// var sum = 0;
// for(var i = 1; i<=100;i++){
    
//  if(i%2 === 0) continue;
//  sum+=i;
// }
// console.log(sum);
​
// 
// 需求4：输出1-100之间所有7的倍数
// for(var i = 1; i <=100; i++){
//  if(i%7 !==0) continue;
//  console.log(i);
​
// }
​
//需求5：在页面中输出1-1000之间所有5的倍数，每8个数字换一行
// var count = 0 ;
// for(var i = 1; i<=1000; i++){
//  if(i %5 ===0) {
//  count++;
//  document.write(i + " ");
​
//  if(count %8 === 0){
//      document.write("<br>");
//  }
//  }
    
// }
// 6.让用户输入十个数字，比较出其中最大值
// var max = 0;
// for(var i = 0;i<10;i++){
//  var num = + prompt("请输入第"+i+"个数字");
//  if(max<num){
//      max = num;
//  }
// }
// console.log(max);
​
​
​
// 7.求1-10之间的整数和，和大于20时候停止相加，并输出和，以及以前的数字
​
// var sum = 0;
// for(var i = 1; i<=10;i++){
//  sum+=i;
//  if(sum>20) break;
​
// }
// console.log(sum,i);
​
// 8.输出加法公式
            // 0+5=5
            // 1+4=5
            // 2+3=5
            // 3+2=5
            // 4+1=5
            // 5+0=5
// for(var i = 0 ,j=5;i <=5,j>=0;i++,j--){
​
//  console.log(i+ "+"+j + "="+(i+j));//嵌套会出现问题
// }
​
​
// 9需求：录入学生的成绩。共有三个班级，记录每个班级四名学生的成绩(循环录入)
// for(var i = 1;i<=3;i++){
//  for(var j = 1;j<=4;j++){
//      var score = +prompt("第"+i+"班级第"+j+"名学生成绩");
//      console.log(score);
//  }
// }
// 要求1：计算出三个班级的总分
// 要求2：计算出每一个班级自己的平均分
// for(var i = 1;i<=3;i++){
//  var sum = 0;
//  for(var j = 1;j<=4;j++){
//      var score = +prompt("第"+i+"班级第"+j+"名学生成绩");
        
//      sum+=score;
//  }
//  console.log("第"+i+"班级平均分"+sum,sum/4);
// }
/*10
        *
        **
        ***
        ****
        *****
​
​
        1**
        2***
        3****
        4*****
        5******
        1*** 3
        2****4
        3*****
        4******
        5*******
​
*/
// for(var i = 1; i <=5;i++){
//  for(var j = 1; j <= i;j++){
//      document.write("*");
//  }
//  document.write("<br>")
// }
​
/*11
        *
        ***
        *****
        *******
        *********
​
​
    */  
// for(var i = 1;i <= 5;i++){
//  for(var j = 1; j<=2*i-1;j++){
//      document.write("*");
//  }
// document.write("<br>")
// }
/*12
        *****
        ****
        ***
        **
        *
    */
    // for(var i = 1;i<=5;i++){
    //  for(var j = 5;j>=i;j--){
    //      document.write("*");
    //  }
    // document.write("<br>")
    // }
/*13
​
    *
   ***
  *****
 *******
*********
    &nbsp;
​
    */
// for(var i = 1; i<=5;i++){
//  for(var j = 4;j>=i;j--){
//      document.write("&nbsp;");
//  }
//  for(var k = 1; k<=2*i-1;k++){
//      document.write("*");
//  }
//  document.write("<br>")
// }
​
/*15
        *****
        *****
        *****
        *****
        *****
​
    */
// for(var i = 1;i<=5;i++){
//  for(var j = 1; j<=5;j++){
//      document.write("*"+"&nbsp;&nbsp;&nbsp;");
//  }
//  document.write("<br>");
// }
// var str = "";
// for(var i = 1;i<=5;i++){
//  for(var j = 1; j<=5;j++){
//      str +="*"+" ";
        
//  }
//  str+="\n";
// }
// console.log(str);
// 16两种乘法口诀表
// var str = "";
// for(var i = 1;i<=9;i++){
//  for(var j = i;j<=9;j++){
//      str+=i+ "*"+j+"="+(i*j)+"\t";
        
//  }
// str+="\n";
​
// }
// console.log(str);

 

婷小医仙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javase学习笔记，学习时间一个月，发布笔记进度1/3
m0_60726300的博客
04-10 1835
1. Java基本语法 1.1 语言概述 1.1.1 整体语言概述 1.1.2 Java语言概述 1.1.2.1 基础常识 软件：即一系列按照特定顺序组织的计算机数据和指令集合。分为系统软件和应用软件 系统软件：Windows，mac os，linux，unix，android，ios，… 应用软件：word，ppt，画图板 人机交互方式：图形化界面vs命令行方式 应用程序=算法+数据结构 1.1.2.2 计算机语言的发展迭代史 第一代：机器语言 第二代：汇编语言 第三代：高级语言 面向过程：C，P
一个小兔子的大数据见解2
weixin_42224258的博客
02-20 3659
Big Data 阿里的大数据解决方案 MAXCOMPUTE DATAWORKS QUICKBI 1、Vmware增强 2、 1.1、VMware 虚拟网络设备 1.1.1、虚拟网卡、虚拟交换机 虚拟网卡：宿主机有自己的网卡，通常在这个路径在（控制面板\网络和 Internet\中可以找到），可以看到好几个网卡，我们可以配置网卡中的信息，例如ip地址等。 而虚拟机中的网卡，就叫做虚拟网卡，...
JavaScript交互式网页设计 • 【第1章 JavaScript 基本语法】
杨明金的博客
10-29 4701
目录 1.1 JavaScript 概述 1.1.1 JavaScript 简介 1.1.2 JavaScript 的概念和执行原理 1.1.3 JavaScript 脚本代码的位置 1.1.4 实践练习 1.2 JavaScript 核心语法 1.2.1 变量 1.2.2 数据类型 1.2.3 JavaScript 注释 1.2.5 实践练习 1.3 顺序结构和选择结构 1.3.1 顺序结构 1.3.2 选择结构 1、if单分支语句： 2、if 双分支语句 3、if 多分.
【前端基础知识】web前端设计基础（前端三剑客之一 —— HTML5，包含课后习题）
Dai的博客
12-12 1682
web前端设计基础（前端三剑客之一 —— HTML5，包含课后习题）
JavaScript的基础学习(一)
Qiu先生的博客
07-03 1400
JavaScript 的基础学习(一) 1 JavaScript 概述 1.1 JavaScript 的历史 1992年Nombas开发出C-minus-minus(C–)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript
前端学习六——html5+CSS3
qq_38393535的博客
04-07 748
前端学习六——html5+CSS3HTML5H5新增语义标签多媒体标签audio音频标签audio音频标签常见属性音频标签语法视频标签video视频标签语法H5新增input表单、表单属性CSS3属性选择器结构伪类选择器伪元素选择器2D转换2D转换之移动translate2D转换之旋转 rotate2D转换中心点transform-origin2D转换之缩放Scale2D转换综合写法动画动画的基本使用常见的动画属性动画简写属性速度曲线细节3D转换3D移动translate3d透视perspectivetra
※前端面试--知识总结
qq_41604498的博客
06-02 2785
–前端面试知识总结 1.http/浏览器部分 1.1 http和https 概念 http:超文本传输协议，是一种客户端和服务端请求应答的标准，用于从www服务端传输超文本到本地浏览器的传输协议。 https:以安全为目标的http，在http下又加上了SSL层，确保数据的传输和网站的真实性。 区别： http是超文本传输协议，信息是明文传输的，没有加密。https是具有安全性的ssl加密传输协议。 http协议的端口是80，https是443 http的连接很简单，是无状态的；https协议是由s
MYSQL数据库学习总结
m0_51179717的博客
12-08 2389
关系型数据库管理系统MYSQL应用。
Python基础（8）——模块与datetime
此心安处是吾乡
08-07 152
@(Aaron) [Python基础, 人生苦短-我用Python] 主要内容包括： 模块 datetime 文章目录1、模块1.1. 什么是模块1.2. 命名空间1.3. 导入模块1.4. `if __name__ == '__main__'`1.5. 搜索路径1.6. 包（package）2、datetime模块2.1. datetime类2.2. date类2.3. time类2.4. timedelta类 1、模块 在前面我们脚本是用 Python 解释器来编程，如果你从 Python
js基础学习笔记
xinyue_1208的博客
09-15 787
目录 1 js基础 1.1 概述 1.2 变量 1.3 数据类型 1.3.1 数字型Number 1.3.2 isNaN（） 1.3.3 符串型String 1.3.4 字符串长度以及拼接 1.3.5 boolean型以及undefined和null 1.4 获取变量类型 1.5 字面量 1.6 数据类型的转换 1.6.1 转换为字符串型 1.6.2 转换为数字型 1.6.3 转换为布尔型 2 运算符概括 2.1 算术运算符 2.2 前置递增运算符和后置递增运算符 2.
PrivacIN Week4课程回顾 | ZK应用实践
最新发布
Matrix_element的博客
10-24 1842
隐私学院【PrivacyIN】第一期ZK训练营第四课——《ZK Hands-on》如期开讲，主要介绍Circom电路开发和ZK应用实践。
前端JavaScript基础
快乐的程序袁
10-31 1436
JavaScript基础 1：JS概述 1.1：历史： 1995年出现在网景公司的浏览器中 1996年，IE3中，也出现了JS，叫做JScript 1997年，出现了国际标准规范 ECMAScript 2009年，出现了CommonJS规范，JS开始往服务器端发展，出现了Node.js 1.2：现状： JS即可以运行在浏览器中，也可以运行在服务器端 1.3：特点： 解释型语言，编译一行执行一行 弱类型语言， 基于对象 跨平台，可以运行在不同的操
【零散知识点总结2】
weixin_44543307的博客
03-09 3758
大部分知识点来源于网络，知道的可以在评论区贴上来源喔 内容涵盖：MySQL、Spring、Spring Boot、Spring Cloud、RabbitMQ、Kafka、 Linux 等技术栈 零散知识点总结2MySQLMySQL 中有哪几种锁？MySQL 中有哪些不同的表格？简述在 MySQL 数据库中 MyISAM 和 InnoDB 的区别 MySQL MySQL 中有哪几种锁？ 1、表级锁：开销小，加锁快；不会出现死锁；锁定粒度大，发生锁冲突的概率最高，并发度最低。 2、行级锁：开销大，加锁慢；会出现
layui实现table表格的增删改查
qq_44828153的博客
11-27 3471
layui实现表格的增删改查 效果如下： 官网:https://www.layui.com/demo/ 样式： body { margin: 10px; } .demo-carousel { height: 200px; line-height: 200px; text-align: center; } html <table class="layui-hide" id="demo" lay-filter
week1.1基本数据类型——每天一个JS小总结
qq_44828153的博客
07-30 1146
命名规范 变量五个基本数据类型 除了0都是true typeof两种用法 算术运算符 NaN 比较运算符 ==和=== 自己敲的 || 第二个值为假时还是返回第二个值 +prompt是转换成数字类型 作业： ...
week1.4函数上——每天一个JS小总结
qq_44828153的博客
08-05 294
week1.4函数 fn1（）。fn是指整个function，（）是指调用函数的运算符 1 垃圾回收机制，f2在里面能读出来，在外面不能读，f2被当作垃圾丢了 读完f1，直接让程序过了，就不读取f2 return相当于break，直接终止 函数执行完之后必须有一个结果，这个结果叫做：返回值。 使用return关键字来执行函数的返回值。 return关键...
CSS图片自适应
qq_44828153的博客
10-28 284
1.图片自适应填满整个屏幕 就是用背景图做的话，我想让这个图发生定位，但是还想让他们宽高100% 设置除static定位外，top:0,left:0,right:0,bottom:0 这个作用是;让明确宽高的盒子垂直水平居中,让无宽高的盒子填满父容器 效果如下： 代码如下： html <div id="text-center"> <div id="content"> <ul> <li class
week3.1Event事件——每天一个小总结
qq_44828153的博客
09-11 225
week3.1Event //点击事件 //点击li，改变内容的class名，同时改变自己兄弟元素的class名 function$(ele){ vare=null; if(ele[0]==='#')e=document.querySelector(ele); elsee=document.querySelectorAll(ele); returne; } //console...
SVA电子第一周总结：组织结构与管理流程分析
在提供的文件"Guangdian Week One Summary.ppt"中，我们可以看到这是一份关于SVA Electronics Co., Ltd.的企业管理总结报告，时间是2001年4月24日。报告的核心内容涉及公司的组织结构、管理流程以及初步诊断分析。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值