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

掌握 JavaScript 的基础语法，核心在于理解变量的内存绑定与生命周期、循环结构的流程控制与迭代边界，以及函数的作用域封闭与模块化复用。本文不铺垫宽泛的行业背景，直接从变量、循环和函数三项核心概念切入，通过规范的代码范式、行为对照与可运行实例，拆解语法运行背后的执行逻辑与常见易错点。

一、变量声明与内存绑定（let、const 与 var）

在 ECMAScript 规范中，变量是存储数据引用的具名标识符。现代 JavaScript 开发中主要使用 const 与 let，而早期的 var 因存在作用域逃逸和不可控的状态覆盖，除维护遗留项目外应全面避免使用。

三个声明关键字的核心区别体现在作用域限制、声明提升行为以及可变性约束上：

• const（优先选用）：块级作用域。声明时必须显式赋初值，且变量标识符与内存地址的绑定不可变更。对于基本数据类型，其值不可修改；对于对象或数组等引用类型，不能对变量名重新赋值，但可以修改对象内部的属性或数组元素。
• let（状态需要改变时选用）：块级作用域。仅在由大括号 { ... } 包裹的代码块内生效。支持后续重新赋值，适合用作计数器、累加值或后续可能被重新计算的中间变量。
• var（应避免使用）：函数作用域。缺乏块级隔离能力，在代码块内部声明的变量会渗透到外部环境中。同时存在变量提升机制，在声明语句前读取不会抛出错误而是返回 undefined，极易掩盖逻辑缺陷。

源码示例：变量声明与可变性实测

// 1. const 声明基本类型与引用类型
const MAX_RETRY_COUNT = 3;
// MAX_RETRY_COUNT = 5; // 执行时报错：TypeError: Assignment to constant variable.

const serverConfig = {
  host: '127.0.0.1',
  port: 8080,
  active: true
};

// 允许修改引用类型内部的属性
serverConfig.port = 9000;
console.log('修改后的端口：', serverConfig.port);

// 2. let 在代码块中的生命周期
let currentAttempt = 0;
if (serverConfig.active) {
  let blockScopedMsg = '服务运行中';
  currentAttempt++;
  console.log(`[块内] ${blockScopedMsg}，当前尝试次数：${currentAttempt}`);
}

// console.log(blockScopedMsg); // 执行时报错：ReferenceError: blockScopedMsg is not defined
console.log(`[块外] 最终尝试次数：${currentAttempt}`);

二、循环控制与数据迭代（for、while 与 for...of）

循环语句用于在满足特定条件时重复执行逻辑块。JavaScript 提供了多种循环形式，需依据遍历对象及控制精细度进行选择：

• 标准 for 循环：基于索引计数，适用于已知循环轮数、需要按固定步长前进，或需要精确根据下标操作数组的场景。
• while 循环：基于布尔条件驱动，在进入循环体前求值。适合轮询任务或循环终止条件依赖运行时动态状态（而非固定数组长度）的场景。
• for...of 循环：ES6 引入的可迭代对象遍历语法，可直接提取数组或集合中的每一个元素实体，语法简洁且避免了下标越界风险。

源码示例：三种典型循环用法与控制指令

const transactions = [120, -45, 300, -80, 500, -10];

// 1. 标准 for 循环：配合 break / continue 精确控制
let positiveTotal = 0;
for (let i = 0; i < transactions.length; i++) {
  const current = transactions[i];
  
  // 过滤无效或负向支出
  if (current <= 0) {
    continue; // 跳过后续逻辑，直接进入 i++
  }
  
  positiveTotal += current;
  
  // 单笔达到 500 时触发熔断退出
  if (current >= 500) {
    console.log(`[for] 检测到大额交易 ${current}，提前终止循环扫描`);
    break;
  }
}
console.log('[for] 正向交易累计金额：', positiveTotal);

// 2. while 循环：动态退避或直到满足目标
let balance = 1000;
let month = 0;
while (balance > 800) {
  balance -= 75; // 每月固定扣减
  month++;
}
console.log(`[while] 经过 ${month} 个月后，账户余额降至：${balance}`);

// 3. for...of 循环：优雅遍历集合元素
const tags = ['javascript', 'web', 'node'];
const formattedTags = [];
for (const tag of tags) {
  formattedTags.push(`#${tag.toUpperCase()}`);
}
console.log('[for...of] 格式化标签：', formattedTags.join(' '));

三、函数定义与调用模式（声明、表达式与箭头函数）

函数是 JavaScript 中组织逻辑复用、封装私有作用域的核心单元。在现代开发中，主要存在三种定义方式：

• 函数声明（Function Declaration）：通过 function name() {} 定义。具有完整的声明提升特性，可在代码定义前直接调用，适合作文件顶级的基础工具函数。
• 函数表达式（Function Expression）：将匿名或具名函数赋值给 const 变量。受限于变量初始化时机，不能在赋值前调用，能明确代码执行时序。
• 箭头函数（Arrow Function）：ES6 引入的紧凑语法 () => {}。其不具备自己的 this、arguments、super 或 new.target，内部 this 严格继承自外层词法上下文，特别适合作为数组方法的回调或内联简短函数。

源码示例：函数封装与默认参数

// 1. 函数声明：具备声明提升，且包含参数默认值
function calculateFinalPrice(basePrice, discountRate = 0.1, taxRate = 0.05) {
  // 卫语句：校验入参合法性
  if (typeof basePrice !== 'number' || basePrice <= 0) {
    throw new Error('基础金额必须为大于零的数值');
  }
  
  const discounted = basePrice * (1 - discountRate);
  const finalPrice = discounted * (1 + taxRate);
  
  return Number(finalPrice.toFixed(2));
}

// 2. 箭头函数：紧凑纯函数
const applyCoupon = (price, couponValue) => Math.max(0, price - couponValue);

// 3. 执行调用
const productPrice = 200;
const priceAfterDiscount = calculateFinalPrice(productPrice, 0.2); // 基础 200，打八折后加税
const finalPaid = applyCoupon(priceAfterDiscount, 15);

console.log('打折计税后金额：', priceAfterDiscount);
console.log('使用优惠券最终实付：', finalPaid);

四、综合实战：变量、循环与函数协同构建数据处理管道

在真实业务开发中，变量、循环与函数通常紧密配合。函数负责边界隔离与业务逻辑封装，const / let 确保状态不可变与可控流动，循环则负责集合数据的有序消费。以下示例展示一个典型的数据汇总管道：接收订单列表，进行过滤、分类累加并输出结构化统计报表。

综合源码实现

/**
 * 统计有效订单的总金额与分类分布
 * @param {Array<Object>} orders 原始订单集合
 * @param {number} minAmount 过滤的最低有效金额
 * @returns {Object} 汇总结果
 */
function processOrderAnalytics(orders, minAmount = 10) {
  // 使用 const 声明不可变的分类结果对象与计数器
  const summary = {
    validCount: 0,
    totalRevenue: 0,
    categoryBreakdown: {}
  };

  // 卫语句
  if (!Array.isArray(orders)) {
    return summary;
  }

  // 使用 for...of 遍历数组
  for (const order of orders) {
    const { id, amount, category, status } = order;

    // 过滤取消的订单及低于最小金额的记录
    if (status !== 'completed' || amount < minAmount) {
      continue;
    }

    // 更新可变状态
    summary.validCount++;
    summary.totalRevenue += amount;

    // 统计各品类营收
    if (!summary.categoryBreakdown[category]) {
      summary.categoryBreakdown[category] = 0;
    }
    summary.categoryBreakdown[category] += amount;
  }

  // 格式化输出总营收
  summary.totalRevenue = Number(summary.totalRevenue.toFixed(2));
  return summary;
}

// 模拟待处理数据集
const mockOrders = [
  { id: 'OD1001', amount: 89.5, category: 'book', status: 'completed' },
  { id: 'OD1002', amount: 5.0,  category: 'stationery', status: 'completed' }, // 金额过低
  { id: 'OD1003', amount: 240.0, category: 'digital', status: 'cancelled' },   // 状态已取消
  { id: 'OD1004', amount: 156.0, category: 'book', status: 'completed' },
  { id: 'OD1005', amount: 320.0, category: 'digital', status: 'completed' }
];

// 执行数据管道处理
const analyticsResult = processOrderAnalytics(mockOrders, 20);
console.log('数据统计报表：', JSON.stringify(analyticsResult, null, 2));

五、核心要点与排错总结

在编写 JavaScript 基础逻辑时，绝大多数常见运行时错误都集中在变量定义越界、循环边界偏移或函数返回值缺失这几类模式中。通过建立清晰的编码约束，可以大幅降低调试成本。