喔唷网 - 网络从业者技术信息综合门户!

当前位置: 主页 > 教程技术 > 编程语言 > javascript

JavaScript流程控制 教你代码"走路"之前先学会"转弯"

时间 : 2025-04-23 11:04来源 : 喔唷网作者 : JavaScript教程点击 :
各位代码萌新,上一章我们学会了JavaScript的"单词"和"短句",现在该学习怎么写"小作文"啦!本章内容就像教机器人走路时要先学会转弯一样重要哦。 4.1 条件语句(if/else) - 代码的"选择题" if语句就像红

各位代码萌新,上一章我们学会了JavaScript的"单词"和"短句",现在该学习怎么写"小作文"啦!本章内容就像教机器人走路时要先学会转弯一样重要哦。

4.1 条件语句(if/else) - 代码的"选择题"

if语句就像红绿灯

let light = "绿色";

if (light === "绿色") {
  console.log("前进!");
} else if (light === "黄色") {
  console.log("减速...");
} else {
  console.log("停下!");
}

趣味小例子 - 奶茶店选择

let money = 20;
let milkTeaPrice = 15;

if (money >= milkTeaPrice) {
  console.log("恭喜买到奶茶!");
  money -= milkTeaPrice; // 扣钱
  console.log(`还剩${money}元`);
} else {
  console.log("余额不足,快去赚钱!");
}

小技巧if后面的条件可以放任何会返回true/false的表达式

4.2 多条件分支(switch) - 代码的"多选题"

当选项很多时,switch比一堆if else更清晰:

let day = "周三";
let todo;

switch (day) {
  case "周一":
    todo = "开会";
    break;
  case "周三":
    todo = "健身";
    break;
  case "周五":
    todo = "看电影";
    break;
  default:
    todo = "写代码";
}

console.log(`今天是${day},我要${todo}`);

注意:每个case后面要加break,不然会"穿透"执行下一个case!

4.3 循环语句(for/while) - 代码的"跑步机"

for循环 - 知道要跑多少圈

// 打印1-5的数字
for (let i = 1; i <= 5; i++) {
  console.log(`这是第${i}圈跑步`);
}

解析

  1. let i = 1:从1开始
  2. i <= 5:跑到5结束
  3. i++:每跑完一圈+1

while循环 - 不知道要跑多少圈

// 模拟吃豆子直到吃饱
let hunger = 10;
let beansEaten = 0;

while (hunger > 0) {
  console.log("吃一颗豆子");
  hunger -= 2; // 每颗豆子减少2点饥饿值
  beansEaten++;
}

console.log(`共吃了${beansEaten}颗豆子,现在饱了!`);

实战例子 - 数羊入睡

for (let sheep = 1; sheep <= 10; sheep++) {
  console.log(`数到第${sheep}只羊...`);
  if (sheep === 5) {
    console.log("Zzz... 睡着了");
    break; // 提前结束循环
  }
}

4.4 循环控制(break/continue) - 循环的"遥控器"

  • break:直接结束整个循环(像紧急停止按钮)
  • continue:跳过当前这一轮(像跳过一首不喜欢的歌)
// 打印1-10的奇数
for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    continue; // 偶数就跳过
  }
  console.log(i);
  
  if (i > 5) {
    break; // 数字大于5就停止
  }
}

4.5 异常处理(try/catch) - 代码的"安全气囊"

当代码可能出错时,用try/catch保护它:

try {
  // 尝试执行可能出错的代码
  let result = 10 / 0;
  console.log(result);
  
  let obj = null;
  console.log(obj.name); // 这里会报错!
} catch (error) {
  // 出错时执行这里
  console.log("哎呀出错了:" + error.message);
} finally {
  // 无论是否出错都会执行
  console.log("清理工作...");
}

真实场景例子 - 读取用户输入

let userInput = "123abc";

try {
  let number = parseInt(userInput);
  if (isNaN(number)) {
    throw new Error("输入的不是有效数字!"); // 手动抛出错误
  }
  console.log("输入的数字是:" + number);
} catch (err) {
  console.log(err.message);
}

本章总结

  1. if/else 让代码做选择题
  2. switch 处理多个固定选项
  3. for/while 让代码重复执行
  4. break/continue 控制循环流程
  5. try/catch 优雅处理错误

趣味练习

写个成绩判断程序:

let score = 85;
// 如果score >=90 输出"优秀"
// 80-89 输出"良好"
// 60-79 输出"及格"
// 低于60 输出"加油"
  1. 用循环打印九九乘法表的第一行(1x1=1 到 1x9=9)
  2. 改进数羊程序:每数3只羊就问"睡着了吗?",如果回答"是"就停止

生活小剧场

let wallet = 50;
let drinkPrice = 8;
let drinks = 0;

while (wallet >= drinkPrice) {
  console.log(`买第${++drinks}杯奶茶`);
  wallet -= drinkPrice;
  
  if (drinks >= 3) {
    console.log("今天不能再喝了!");
    break;
  }
}

console.log(`钱包余额:${wallet}元`);

下一章我们将进入函数的世界,让你的代码学会"分身术"!准备好成为JavaScript忍者了吗?

栏目列表

关联类容

热点推荐

栏目推荐

猜你喜欢