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的数
相关文章
|
19天前
|
JavaScript
在循环内错误使用函数定义(js的问题)
在循环内错误使用函数定义(js的问题)
11 0
|
21天前
|
JavaScript
JS使用循环求100内奇数之和
JS使用循环求100内奇数之和
16 1
|
1天前
|
JavaScript 索引
JS 几种循环遍历
JS 几种循环遍历
3 0
JS 几种循环遍历
|
27天前
|
开发框架 JavaScript 前端开发
描述JavaScript事件循环机制,并举例说明在游戏循环更新中的应用。
JavaScript的事件循环机制是单线程处理异步操作的关键,由调用栈、事件队列和Web APIs构成。调用栈执行函数,遇到异步操作时交给Web APIs,完成后回调函数进入事件队列。当调用栈空时,事件循环取队列中的任务执行。在游戏开发中,事件循环驱动游戏循环更新,包括输入处理、逻辑更新和渲染。示例代码展示了如何模拟游戏循环,实际开发中常用框架提供更高级别的抽象。
11 1
|
1月前
|
JavaScript 前端开发 API
JavaScript循环遍历常用的7种方法以及常用的数组 API
JavaScript循环遍历常用的7种方法以及常用的数组 API
35 0
|
1月前
|
XML JavaScript 前端开发
vue项目中使用bpmn.js详细流程(结合activiti版)
vue项目中使用bpmn.js详细流程(结合activiti版)
36 0
|
1月前
|
JavaScript
js循环的几种方法
js循环的几种方法
15 2
|
1月前
|
JavaScript 前端开发
javascript中的循环
javascript中的循环
|
2月前
|
存储 缓存 JavaScript
解密迭代艺术:精通JavaScript中的for循环技巧
解密迭代艺术:精通JavaScript中的for循环技巧
27 0
|
3月前
|
前端开发 JavaScript 索引
【面试题】JavaScript高级循环方法
【面试题】JavaScript高级循环方法