JavaScript基础语法实例：变量、函数与循环的代码演示

在 JavaScript 程序运行过程中，变量负责保存程序运行所需的状态与数据，函数用于封装可复用的逻辑操作，循环则负责驱动数据的批量处理与重复执行。掌握这三者的语法规则及其交互方式，是理解现代前端及 Node.js 应用程序执行逻辑的核心基石。本文将通过独立规范的代码示例与结构图示，逐项解析变量声明、函数定义与各类循环的语法细节与应用方法。

一、变量的声明机制与作用域管理

变量是程序在内存中开辟用于存储数据的具名容器。现代 JavaScript（ECMAScript 6+）推荐使用 const 与 let 取代早期的 var，以获得更安全严谨的作用域隔离与可维护性。

1. const、let 与 var 的核心差异

• const（常量声明）：用于声明不可重新赋值的引用。声明时必须立即初始化。使用 const 并不会冻结对象内部属性的修改，但禁止修改变量本身的内存指针。
• let（变量声明）：拥有块级作用域（Block Scope），仅在当前被 { } 包裹的代码块内生效。允许后续更新赋值，但不允许在同一作用域内重复声明。
• var（传统声明）：属于函数作用域或全局作用域，存在声明提升（Hoisting）现象，且允许重复声明，极易引发变量覆盖与作用域泄漏问题，现代项目中应避免使用。

2. 变量声明与作用域代码示例

// 1. const 声明：基本值不可重新赋值，复合对象属性可修改
const MAX_RETRY_COUNT = 3;
const serverConfig = {
  host: "127.0.0.1",
  port: 8080
};

// 允许修改对象属性
serverConfig.port = 9000; 

// 尝试重新分配变量本身会抛出异常
// serverConfig = {}; // TypeError: Assignment to constant variable.

// 2. let 声明：支持更新，严格限制于块级作用域
let activeSessionCount = 0;
activeSessionCount += 1;

if (activeSessionCount > 0) {
  let statusMessage = "服务正在处理请求";
  console.log(statusMessage); // 输出: 服务正在处理请求
}

// 块作用域外无法访问内部变量
// console.log(statusMessage); // ReferenceError: statusMessage is not defined

二、函数的定义、参数传递与执行逻辑

函数是将特定功能集中包装的可执行单元。通过将逻辑拆分为函数，开发者可以实现代码复用、职责解耦与数据隔离。

1. 函数结构与数据传递机制

函数通过“形参”（Parameters）定义接收的数据契约，调用端通过“实参”（Arguments）传入实际值。函数内部经过运算处理后，通过 return 语句将产出结果交回调用方，并立即退出当前函数执行上下文。

2. 函数声明与箭头函数代码演示

// 1. 标准函数声明（具名函数）
function calculateFinalPrice(basePrice, discountRate = 0.1) {
  // 边界条件防御性校验
  if (basePrice < 0 || discountRate < 0 || discountRate > 1) {
    throw new Error("参数取值不在合法区间");
  }
  const discountAmount = basePrice * discountRate;
  const payableAmount = basePrice - discountAmount;
  return payableAmount;
}

// 2. 箭头函数声明（现代紧凑语法）
const formatCurrency = (amount, currencySymbol = "¥") => {
  return `${currencySymbol}${amount.toFixed(2)}`;
};

// 执行函数调用
const rawPrice = 299;
const actualPay = calculateFinalPrice(rawPrice, 0.2);
const formattedText = formatCurrency(actualPay);

console.log("最终支付价格:", formattedText); // 输出: 最终支付价格: ¥239.20

三、循环结构的流程控制与状态迭代

循环用于重复执行指定的代码块，直到指定的终止条件满足为止。在处理数组元素、批量运算及轮询状态时，循环是必不可少的流程控制工具。

1. 常用循环结构的运行原理

• 标准 for 循环：最经典的循环形式，明确包含“计数器初始化”、“循环条件评估”与“步进表达式更新”，控制力最精确。
• while 循环：在每次迭代执行前检查条件表达式。若初始条件即为假，则循环体一次都不会执行。
• for...of 循环：专为可迭代对象（如 Array、Set、Map）设计的现代化遍历语法，直接获取集合成员值，代码最为简洁直观。

2. 循环语法与跳出控制演示

// 1. 标准 for 循环：基于索引遍历
const scores = [85, 92, 78, 96, 60];
let totalScore = 0;

for (let i = 0; i < scores.length; i++) {
  totalScore += scores[i];
}
const averageScore = totalScore / scores.length;
console.log(`平均分数为: ${averageScore.toFixed(1)}`); // 输出: 平均分数为: 82.2

// 2. while 循环与 break/continue 中断控制
let targetValue = 50;
let currentValue = 1;
let iterationSteps = 0;

while (currentValue < targetValue) {
  iterationSteps++;
  currentValue *= 2;
  
  if (iterationSteps > 100) {
    console.warn("达到安全步数上限，提前退出");
    break; // 防止死循环的安全熔断
  }
}
console.log(`经过 ${iterationSteps} 次翻倍计算，数值达到: ${currentValue}`); 
// 输出: 经过 6 次翻倍计算，数值达到: 64

// 3. for...of 遍历数组
const tags = ["前端", "JavaScript", "ECMAScript"];
for (const tag of tags) {
  if (tag === "前端") continue; // 跳过当前轮次，直接进入下一个元素
  console.log(`处理标签: [${tag}]`);
}

四、综合实例：变量、函数与循环的协同应用

在实际生产业务中，变量、函数与循环通常相互配合工作：通过变量保存数据集与最终统计值，通过函数封装原子化业务规则，再通过循环驱动数据流水线批处理。

代码实例：电商订单结算统计脚本

// 1. 数据与状态准备（使用 const 与 let）
const orderItems = [
  { id: 101, name: "无线机械键盘", price: 399, quantity: 2, isTaxFree: false },
  { id: 102, name: "人机工程鼠标", price: 189, quantity: 1, isTaxFree: false },
  { id: 103, name: "定制超大桌垫", price: 59, quantity: 3, isTaxFree: true }
];

const TAX_RATE = 0.13; // 增值税率 13%
let totalPayableAmount = 0; // 累计应付金额
const itemSummaries = [];

// 2. 逻辑函数定义
// 计算单项明细的实际费用
function calculateItemTotal(item, taxRate) {
  const subtotal = item.price * item.quantity;
  const tax = item.isTaxFree ? 0 : subtotal * taxRate;
  return {
    subtotal: subtotal,
    tax: tax,
    grandTotal: subtotal + tax
  };
}

// 格式化输出行文本
const generateReportLine = (name, costInfo) => {
  return `${name.padEnd(8, " ")} | 小计: ¥${costInfo.subtotal.toFixed(2)} | 税额: ¥${costInfo.tax.toFixed(2)} | 合计: ¥${costInfo.grandTotal.toFixed(2)}`;
};

// 3. 循环遍历与数据驱动
console.log("----- 订单结算明细汇总 -----");
for (const item of orderItems) {
  // 调用函数执行单条数据的独立计算
  const cost = calculateItemTotal(item, TAX_RATE);
  
  // 累计全局状态变量
  totalPayableAmount += cost.grandTotal;
  
  // 格式化并收集记录
  const reportLine = generateReportLine(item.name, cost);
  itemSummaries.push(reportLine);
  console.log(reportLine);
}

console.log("----------------------------");
console.log(`订单总计应付金额: ¥${totalPayableAmount.toFixed(2)}`);

五、编码规范与核心避坑指南

1. 优先采用 const 声明：在声明变量时，默认使用 const。只有当该变量在后续逻辑中确实需要发生重新赋值时，才将其退化为 let。这能够最大程度降低无意间篡改数据指针引起的隐蔽缺陷。
2. 保持函数的单一职责与纯度：一个函数应尽量只负责一个功能维度的计算或格式化，尽量避免在函数内部直接修改外部变量（副作用）。使用纯函数能够让单元测试和代码重构变得更加容易。
3. 谨防死循环风险：在使用 while 或缺少确定递增计数的循环时，务必确保循环体内存在向退出条件推进的状态改变，必要时增加计数安全边界阈值防止进程挂起。