JavaScript流程控制(顺序,分支,循环)

简介: JavaScript流程控制(顺序,分支,循环)

流程控制


程序的三种基本结构


顺序结构


从上到下执行的代码就是顺序结构


程序默认就是由上到下顺序执行的

分支结构


根据不同的情况,执行对应代码


循环结构


循环结构:重复做一件事情


分支结构


if语句


语法结构


if (/* 条件表达式 */) {
  // 执行语句
}
if (/* 条件表达式 */){
  // 成立执行语句
} else {
  // 否则执行语句
}
if (/* 条件1 */){
  // 成立执行语句
} else if (/* 条件2 */){
  // 成立执行语句
} else if (/* 条件3 */){
  // 成立执行语句
} else {
  // 最后默认执行语句
}


案例:


求两个数的最大数


判断一个数是偶数还是奇数


分数转换,把百分制转换成ABCDE <60 E 60-70 D 70-80 C 80-90 B 90 - 100 A


作业:


判断一个年份是闰年还是平年


闰年:能被4整除,但不能被100整除的年份 或者 能被400整除的年份


判断一个人的年龄是否满18岁(是否成年)


三元运算符


表达式1 ? 表达式2 : 表达式3
是对if……else语句的一种简化写法


案例:


是否年满18岁


从两个数中找最大值


switch语句


语法格式:


switch (expression) {
  case 常量1:
    语句;
    break;
  case 常量2:
    语句;
    break;
  case 常量3:
    语句;
    break;
  case 常量n:
    语句;
    break;
  default:
    语句;
    break;
}


break可以省略,如果省略,代码会继续执行下一个case
switch 语句在比较值时使用的是全等操作符, 因此不会发生类型转换(例如,字符串'10' 不等于数值 10)


案例:


显示星期几


素质教育(把分数变成ABCDE)千万不要写100个case哟


布尔类型的隐式转换


流程控制语句会把后面的值隐式转换成布尔类型


转换为true   非空字符串  非0数字  true 任何对象
转换成false  空字符串  0  false  null  undefined


// 结果是什么?
var a = !!'123';


案例


var message;
// 会自动把message转换成false
if (message) {     
  // todo...
}


循环结构


在javascript中,循环语句有三种,while、do…while、for循环。


while语句


基本语法:


// 当循环条件为true时,执行循环体,
// 当循环条件为false时,结束循环。
while (循环条件) {
  //循环体
}


代码示例:


// 计算1-100之间所有数的和
// 初始化变量
var i = 1;
var sum = 0;
// 判断条件
while (i <= 100) {
  // 循环体
  sum += i;
  // 自增
  i++;
}
console.log(sum);


案例:


打印100以内 7的倍数


打印100以内所有偶数


打印100以内所有偶数的和


作业:


打印100以内的奇数


打印100以内的奇数的和


do…while语句


do…while循环和while循环非常像,二者经常可以相互替代,但是do…while的特点是不管条件成不成立,都会执行一次。


基础语法:


do {
  // 循环体;
} while (循环条件);


代码示例:


// 初始化变量
var i = 1;
var sum = 0;
do {
  sum += i;//循环体
  i++;//自增
} while (i <= 100);//循环条件


案例:


求100以内所有3的倍数的和
使用do-while循环:输出询问“我爱你,嫁给我吧?”,选择“你喜欢我吗?(y/n):",如果输入为y则打印”我们形影不离“,若输入为n,则继续询问 


for语句


while和do…while一般用来解决无法确认次数的循环。for循环一般在循环次数确定的时候比较方便


for循环语法:


// for循环的表达式之间用的是;号分隔的,千万不要写成,
for (初始化表达式1; 判断表达式2; 自增表达式3) {
  // 循环体4
}


执行顺序:1243 ---- 243 -----243(直到循环条件变成false)


  1. 初始化表达式


  1. 判断表达式


  1. 自增表达式


  1. 循环体


案例:


打印1-100之间所有数
求1-100之间所有数的和
求1-100之间所有数的平均值
求1-100之间所有偶数的和
同时求1-100之间所有偶数和奇数的和
打印正方形
// 使用拼字符串的方法的原因
// console.log 输出重复内容的问题
// console.log 默认输出内容介绍后有换行
var start = '';
for (var i = 0; i < 10; i++) {
  for (var j = 0; j < 10; j++) {
    start += '* ';
  }
  start += '\n';
}
console.log(start);
打印直角三角形
var start = '';
for (var i = 0; i < 10; i++) {
  for (var j = i; j < 10; j++) {
    start += '* ';
  }
  start += '\n';
}
console.log(start);
打印9*9乘法表
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);


作业:


求1-100之间所有数的乘积
求1-100之间所有奇数的和
计算1-100之间能3整除的数的和
计算1-100之间不能被7整除的数的和
// 讲解思路。如果不会写程序,可以先把数学公式准备好
本金10000元存入银行,年利率是千分之三,每过1年,将本金和利息相加作为新的本金。计算5年后,获得的本金是多少?
有个人想知道,一年之内一对兔子能繁殖多少对?于是就筑了一道围墙把一对兔子关在里面。已知一对兔子每个月可以生一对小兔子,而一对兔子从出生后第3个月起每月生一对小兔子。假如一年内没有发生死亡现象,那么,一对兔子一年内(12个月)能繁殖成多少对?(兔子的规律为数列,1,1,2,3,5,8,13,21)


continue和break


break:立即跳出整个循环,即循环结束,开始执行循环后面的内容(直接跳到大括号)


continue:立即跳出当前循环,继续下一次循环(跳到i++的地方)


案例:


求整数1~100的累加值,但要求碰到个位为3的数则停止累加
求整数1~100的累加值,但要求跳过所有个位为3的数
相关文章
|
2月前
|
JavaScript 前端开发
js循环有几种
js循环有几种
39 0
|
1月前
|
监控 JavaScript 算法
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。
|
1月前
|
JavaScript
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画,js循环动画,简单的画面设计。非常丝滑有意思,欢迎对此代码感兴趣的朋友前来下载参考。
30 2
|
3月前
|
JavaScript 前端开发 索引
|
2月前
|
JavaScript
自动循环提交js
自动循环提交js
22 0
|
1月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
29 1
JavaScript中的原型 保姆级文章一文搞懂
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
107 2
|
1月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
21 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
155 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
90 4