JS基础-分支语句+循环

香菜香菇
62 阅读3分钟

程序的执行顺序

image.png

代码块： 是多行执行代码的集合，通过一个花括号{}放到了一起

// 一个代码块
{
  name:'www',
  age:19
}

// 一个对象
var info = {
  name:'www',
  age:19
}

在JavaScript中，我们可以通过流程控制语句来决定如何执行一个代码块：

通常会通过一些关键字来告知js引擎代码要如何被执行 (比如分支语句、循环语句对应的关键字等)；

if分支语句

如果条件满足才能做某件事情，如果条件不满足就做另外一件事情

单分支语句：if

// 如果条件成立，则执行代码
if(判断条件){
  // 执行代码
}
  • 如果代码块中只有一行代码，那么{}可以省略
var price = 18
if(price > 20) price -= 2
  • 语句会计算圆括号内的表达式，并将计算结果转换为布尔型
// 数字 0、空字符串 “”、null、undefined 和 NaN 都会被转换成 false
if(12){
 //代码不会执行
}

多分支语句：if.. else..

if(判断条件){
  // 条件成立，执行的代码
}else{
  // 条件不成立，执行的代码
}

多分支结构： if.. else if.. else..

if(条件1){
  // 代码块1
}else if(条件2){
  // 代码2
}else{
  // 所有条件都不成立执行代码块3
}

三元运算符

// 如果条件（condition）为真，则返回 value1，否则返回 value2
 var result = condition ? value1 : value2;

逻辑运算符

image.png

  • || 逻辑或的本质

    • 从左到右依次计算操作数
    • 处理每一个操作数时，都将其转为布尔值，如果结果是true，就返回这个操作数的初始值
    • 转换结果都是 false，则返回最后一个操作数

  • && 逻辑与的本质

    • 与运算返回第一个假值，如果没有假值就返回最后一个值

  • ! 逻辑非的本质

    • 将操作数转化为布尔类型：true/false，返回相反的值
    • 两个非运算 !! 有时候用来将某个值转化为布尔类型

switch语句

它是通过判断表达式的结果（变量）是否等于case语句的常量，来执行相应的分支体，只能做值的相等判断，被比较的值必须是相同的类型才能进行匹配

var btnIndex = -1
switch (btnIndex) {
    case 0:
        console.log('点击了上一首歌');
        break; // 默认情况有case穿透
    case 1:
        console.log('点击了播放/暂停');
        break;
    default:
        console.log('不能点击');
}

循环语句

循环是一种重复运行同一代码的方法

while循环

// 如果条件一直成立（为true），那么会产生死循环,必须通过关闭页面来停止死循环

// 计算0~99的数字和
var count = 0
var sum = 0
while (count < 10) {
    sum += count
    count ++
}

// 计算0~99所有奇数(1、3、5...)的和
var count3 = 0
var sum = 0
while (count3 < 100){
    if(count3 % 2 !== 0){ // 余数不等于0
        sum += count3
    }
    count3 ++
}
// 优化：计算0~99所有奇数(1、3、5...)的和
var count3 = 1
var sum = 0
while (count3 < 100){
    sum += count3
    count3 += 2
}

// 计算0~99所有偶数的和
var count1 = 0
var sum1 = 0
while (count1 < 100) {
    sum1 += count1
    count1 += 2
}

do..while循环(不常用)

do..while的特点是不管条件成不成立，do循环体都会先执行一次

var num = 0
do{
    console.log(num);
    num ++
}while (num < 10)

for循环

for(var i = 0;i < 3;i++){
    // 循环代码块
}
image.png
  • for循环的嵌套
image.png 
// 案例一：在屏幕上显示包含很多❤的矩形
for (var i = 0; i < 6; i++) {
    document.write('<div>')
    for (var k = 0; k < 6; k++) {
        document.write('♥')
    }
    document.write('</div>')
}
// 案例二：在屏幕上显示一个三角的❤图像
for (var i = 0; i < 6; i++) {
    document.write('<div>')
    for (var k = 0; k < i+1; k++) {
        document.write('♥')
    }
    document.write('</div>')
}

// 案例三：在屏幕上显示一个九九乘法表
document.write('<table>')
for (var i = 0; i < 9; i++) {
    document.write('<tr>')
    for (var k = 0; k < i+1; k++) {
        console.log(i);
        document.write(`<td>${k+1}*${i+1}=${(k+1)*(i+1)}</td>`)
    }
    document.write('</tr>')
}
document.write('</table>')

<style>
table{
    border-collapse: collapse; /*合并边框*/
}
td{
    padding: 2px 4px;
    border: 1px solid orange;
}
</style>
  • 循环控制
// 需求：遇到bbb时，不在继续执行后续的迭代
// break：直接跳出循环, 循环结束
var arr = ['aaa', 'bbb', 'ccc']
for (var i = 0; i < arr.length; i++) {
    if (arr[i] === 'bbb') break
}

// 需求：不要打印bbb
// continue:本次循环体不再执行, 执行下一次的循环体
var arr = ['aaa', 'bbb', 'ccc']
for (var i = 0; i < arr.length; i++) {
    if (arr[i] === 'bbb') continue
}

猜数字游戏

var isSussess = false
var randomNum = Math.floor(Math.random() * 100) // 生成一个0-99的随机数
for (var i = 0; i < 7; i++) {
    var inputNum = Number(prompt('请输入你要猜的数字'))
    
    if(inputNum === randomNum){
        alert('猜对了')
        isSussess = true
        break
    }else if(inputNum > randomNum){
        alert('猜大了')
    }else {
        alert('猜小了')
    }
}
if(!isSussess){
    alert('你的机会用完了')
}
avatar
文章
阅读
粉丝