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

学习 JavaScript 最直接的入口，就是掌握变量、循环与函数这三块积木。变量负责存储与传递运行状态，循环负责组织重复执行的逻辑，而函数则把特定功能的指令打包以便反复调用。本文通过清晰的小段代码与原理图解，逐一演示它们的标准语法、运行表现与常见陷阱，帮助读者建立扎实的语法直觉。

一、变量：let、const 与 var 的选择与差异

在现代 JavaScript 规范（ES6+）中，声明变量主要使用 const 和 let，而早期的 var 仅在维护遗留系统时偶有出现。两者的根本区别在于“作用域范围”与“是否允许重新赋值”。

1. 常量 const 与普通变量 let

const 用于声明一旦初始化就不可再被重新赋值的标识符，适合绝大多数固定的配置值或对象引用；let 则用于后续会被更改的标识符，常见于计数器或随业务状态改变的值。

// 使用 const 声明固定值
const maxRetryLimit = 3;
// maxRetryLimit = 5; // 抛出错误：TypeError: Assignment to constant variable.

// 使用 let 声明可变状态
let currentAttempts = 0;
currentAttempts += 1;
console.log(currentAttempts); // 输出：1

2. 块级作用域与变量提升对比

let 与 const 遵循块级作用域（Block Scope），仅在声明它们的一对大括号 { ... } 内可见。而 var 仅具备函数级作用域，并且存在变量提升（Hoisting）机制，容易造成不易察觉的状态污染。

二、循环：for 与 while 流程控制

循环用于在条件满足时反复执行代码段。JavaScript 提供了多种循环语法，其中最经典的是标准 for 循环和 while 循环。

1. 标准 for 循环的执行步骤

标准 for 循环由初始化语句、条件判断表达式以及更新步进语句三部分组成，其执行逻辑具备严格的时序：

// 打印 1 到 4 的计数演示
for (let i = 1; i <= 4; i++) {
  console.log("当前计数：" + i);
}
// 示例输出：
// 当前计数：1
// 当前计数：2
// 当前计数：3
// 当前计数：4

2. while 与 do-while 循环

当执行次数无法预先计算、而是依赖外部状态变动时，while 循环是更自然的选择。只要条件维持为真，循环便会持续：

let stock = 3;
// 在库存大于0时模拟持续扣减
while (stock > 0) {
  console.log("消耗一件商品，剩余库存：" + (stock - 1));
  stock--;
}
// 示例输出：
// 消耗一件商品，剩余库存：2
// 消耗一件商品，剩余库存：1
// 消耗一件商品，剩余库存：0

三、函数：声明、箭头表达式与参数传递

函数是封装操作的最小组织单位。它接收输入参数，执行指定操作，并通过 return 语句将产出结果交回调用者。

1. 函数声明与表达式

在 JavaScript 中声明函数主要有两种常规写法：传统的 function 关键字声明，以及 ES6 引入的箭头函数（Arrow Function）。

// 形式一：传统函数声明
function calculateTotalPrice(unitPrice, quantity) {
  const total = unitPrice * quantity;
  return total;
}

// 形式二：箭头函数（精简语法）
const calculateDiscountPrice = (price, discountRate) => {
  return price * (1 - discountRate);
};

// 调用函数获取结果
const originalCost = calculateTotalPrice(50, 4);   // 200
const finalPay = calculateDiscountPrice(originalCost, 0.1); // 180
console.log("最终支付金额：" + finalPay); // 输出：最终支付金额：180

四、综合实例：统计商品清单总价

为了直观观察变量、循环与函数在实际开发中如何紧密配合，我们实现一个统计购物车商品总价的函数。该函数接收商品列表数组，使用 for 循环遍历数组累加金额，最后返回总价。

// 定义业务函数：计算商品清单总额
function computeCartTotal(cartItems) {
  // 1. 定义累加变量，使用 let 初始化为 0
  let totalAmount = 0;

  // 2. 使用 for 循环逐项遍历商品
  for (let i = 0; i < cartItems.length; i++) {
    const item = cartItems[i]; // 当前处理的商品项（使用 const 锁定）
    const subtotal = item.price * item.quantity;
    totalAmount += subtotal;
  }

  // 3. 返回统计结果
  return totalAmount;
}

// 模拟测试数据
const myCart = [
  { name: "笔记本", price: 15, quantity: 2 },
  { name: "钢笔", price: 25, quantity: 1 },
  { name: "收纳盒", price: 30, quantity: 3 }
];

// 执行调用
const result = computeCartTotal(myCart);
console.log("购物车结算总价为: " + result + " 元");
// 示例输出：购物车结算总价为: 145 元

结语

掌握了变量定义、循环迭代以及函数封装后，日常大部分前端交互和数据处理逻辑就已经具备了实现基础。在实际编码中，养成“优先 const、循环明确终止条件、函数单一职责”的习惯，能够让代码在易读性和可靠性上打下稳固的基础。