异常教程

JavaScript 语句（建议收藏）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在编程的世界中，JavaScript 语句如同建筑中的砖石，是构建应用程序的最小逻辑单元。无论是实现简单的页面交互，还是开发复杂的前端框架，理解并掌握 JavaScript 语句的语法、执行逻辑和应用场景，都是开发者进阶的关键一步。本文将从基础到进阶，通过代码示例和生活化比喻，系统解析 JavaScript 语句的核心概念，帮助读者建立清晰的编程思维模型。

一、JavaScript 语句的定义与基本语法

1.1 语句的定义与作用

JavaScript 语句（JavaScript Statement）是编程语言中的最小执行单元，用于描述程序需要完成的单个操作。例如：

console.log("Hello World"); // 输出语句  
let age = 25; // 声明变量语句

语句通常以分号 ; 结尾（但 ES6 后可省略），其核心作用是向 JavaScript 引擎发出指令，例如声明变量、执行计算或控制程序流程。

1.2 基本语句类型分类

JavaScript 语句可分为以下三类：
| 类型 | 作用说明 | 典型示例 |
|----------------|-----------------------------------|----------------------------|
| 声明语句 | 定义变量或函数 | let name = "Alice" |
| 表达式语句 | 执行计算并可能返回值 | const result = 2 + 3 |
| 控制语句 | 决定程序的执行流程 | if (condition) { ... } |

比喻：可将语句想象为“指令卡片”，不同类型的卡片对应不同的操作，例如“声明卡片”用于定义数据容器，“控制卡片”决定程序走向。

二、控制流程语句：程序的“交通灯”

2.1 条件语句：让程序“做选择”

条件语句（if、else、switch）如同交通灯，根据条件表达式的真假，控制代码块的执行路径。

示例 1：温度预警系统

let temperature = 38.5;  
if (temperature >= 37.5) {  
  console.log("高温预警：体温异常，请就医！");  
} else {  
  console.log("体温正常");  
}

关键点：

  • 条件表达式必须返回布尔值（true 或 false）
  • 使用大括号 {} 将多行代码包裹为代码块

示例 2：多分支选择（switch）

let day = "Monday";  
switch (day) {  
  case "Monday":  
    console.log("工作日");  
    break;  
  case "Saturday":  
  case "Sunday":  
    console.log("周末");  
    break;  
  default:  
    console.log("未知日期");  
}

技巧：break 关键字用于终止后续匹配，省略时会发生“穿透执行”。

2.2 循环语句：重复任务的“传送门”

循环语句（for、while、do...while）允许程序重复执行某段代码，避免冗余代码。

示例 3：倒计时功能（for 循环）

for (let i = 5; i >= 0; i--) {  
  console.log(`距离发射还有 ${i} 秒！`);  
}  
console.log("点火发射！");

参数解析：

  1. 初始化 let i = 5：定义循环计数器
  2. 条件判断 i >= 0：每次循环前检查条件
  3. 更新表达式 i--：每次循环后修改计数器

示例 4：猜数字游戏（while 循环）

let secretNumber = Math.floor(Math.random() * 10) + 1;  
let guess;  
while (guess !== secretNumber) {  
  guess = prompt("猜一个1-10的数字");  
  if (guess < secretNumber) {  
    alert("太小了！");  
  } else if (guess > secretNumber) {  
    alert("太大了！");  
  }  
}  
alert("恭喜你猜中了！");

循环陷阱：需确保循环条件最终变为 false，否则会导致无限循环。

三、函数与作用域：语句的“封装艺术”

3.1 函数语句：可复用的代码“积木”

函数通过 function 关键字将一系列语句封装为独立单元，支持参数传递和返回值。

// 声明函数  
function calculateTax(income, taxRate = 0.2) {  
  return income * taxRate;  
}  

// 调用函数  
const tax = calculateTax(50000);  
console.log(`应缴税款：${tax} 元`);

关键特性：

  • 参数默认值（taxRate = 0.2）
  • return 关键字返回计算结果

3.2 作用域与变量声明：变量的“房间”

JavaScript 变量的作用域决定了其可见范围，直接影响代码的可维护性。

示例 5：变量作用域对比

// 全局作用域  
let globalVar = "全局变量";  

function exampleScope() {  
  // 函数作用域（ES5）  
  var localVar = "局部变量";  
  console.log(globalVar); // 可访问全局变量  
}  

exampleScope();  
console.log(localVar); // 报错：localVar 未定义

ES6 块级作用域（let 和 const）

if (true) {  
  let blockVar = "块级变量"; // 仅在代码块内有效  
}  
console.log(blockVar); // 报错：blockVar 未定义

比喻：全局变量如同“公共客厅”，函数内变量是“私人房间”，而块级变量是“临时储物柜”，合理使用能避免命名冲突。

四、高级语句与错误处理：程序的“安全网”

4.1 异常处理：try...catch

通过 try 和 catch 语句，可捕获并处理运行时错误，避免程序崩溃。

try {  
  const invalid = nonExistentFunction(); // 触发错误  
} catch (error) {  
  console.error("发生错误：", error.message);  
} finally {  
  console.log("无论是否报错，都会执行此代码");  
}

4.2 with 语句（谨慎使用）

with 可简化对对象属性的访问，但因可能引发作用域冲突，ES5 已不推荐使用。

const user = { name: "Bob", age: 30 };  
with (user) {  
  console.log(name, age); // 简化写法  
}

五、实战案例：构建天气查询工具

5.1 需求分析

根据用户输入的温度和湿度，输出对应的穿衣建议。

5.2 代码实现

function suggestClothing(temperature, humidity) {  
  let advice = "";  
  if (temperature < 10) {  
    advice += "建议穿厚外套和保暖衣物。";  
  } else if (temperature >= 10 && temperature <= 25) {  
    advice += "适合穿轻便外套或针织衫。";  
  } else {  
    advice += "建议穿短袖和透气衣物。";  
  }  

  if (humidity >= 70) {  
    advice += "湿度较高，注意携带雨具。";  
  }  

  return advice;  
}  

// 调用函数并输出结果  
const result = suggestClothing(22, 65);  
console.log(result); // 输出："适合穿轻便外套或针织衫。"

5.3 优化点

  • 使用函数封装逻辑，提升代码复用性
  • 通过条件嵌套实现多维度判断
  • 返回字符串拼接结果，便于后续扩展

六、最佳实践与常见误区

6.1 语句书写规范

  • 避免长行语句：超过 80 字符的语句应拆分
  • 统一缩进风格：推荐 2 空格或 4 空格（团队需统一）
  • 合理使用空格：如 if (condition) { 中的空格提升可读性

6.2 常见错误与解决

错误类型典型表现解决方案
语法错误缺少分号或括号使用 ESLint 工具进行代码检查
逻辑错误条件判断写反通过调试器逐步跟踪程序执行流程
作用域问题变量未定义检查变量声明位置和作用域范围

结论

JavaScript 语句是构建动态网页和复杂应用的核心工具，其掌握程度直接影响代码的健壮性和可维护性。从基础的变量声明到复杂的函数嵌套，从条件判断到循环控制，每个语句都是编程思维的具象化表达。通过本文的学习，读者应能系统理解语句的分类、执行逻辑和应用场景，并通过案例实践巩固知识。建议读者在实际项目中多加应用，结合调试工具和代码规范，逐步提升编程能力。记住：代码的优雅不在于复杂，而在于精准与简洁。

（全文约 2200 字）

最新发布

查看更多文章