JavaScript 基本结构

JavaScript 程序由多个基本结构组成，这些结构定义了代码的组织方式和执行流程。理解 JavaScript 的基本结构对于编写结构良好、易于维护的代码至关重要。在本章节中，我们将学习 JavaScript 程序的基本组成部分。

JavaScript 程序的基本组成

一个典型的 JavaScript 程序包含以下几个基本组成部分：

变量声明：用于存储数据
函数定义：可重复使用的代码块
表达式和语句：执行特定操作
控制结构：控制程序执行流程
注释：解释代码功能

变量声明

变量是存储数据的容器，在 JavaScript 中有三种声明变量的方式：

// 使用 var（函数作用域，不推荐在现代 JavaScript 中使用）
var oldVariable = "这是旧的声明方式";

// 使用 let（块级作用域，推荐用于可变变量）
let mutableVariable = "这是一个可变变量";
mutableVariable = "变量值可以改变";

// 使用 const（块级作用域，推荐用于不可变变量）
const immutableVariable = "这是一个不可变变量";
// immutableVariable = "这会报错"; // TypeError: Assignment to constant variable.

函数定义

函数是可重复使用的代码块，用于执行特定任务。JavaScript 中有多种定义函数的方式：

函数声明

function greet(name) {
    return "你好，" + name + "！";
}

console.log(greet("张三")); // 输出：你好，张三！

函数表达式

const greetExpression = function(name) {
    return "你好，" + name + "！";
};

console.log(greetExpression("李四")); // 输出：你好，李四！

箭头函数

const greetArrow = (name) => {
    return "你好，" + name + "！";
};

// 简化写法（单行返回）
const greetSimple = (name) => "你好，" + name + "！";

// 更简化写法（单个参数可省略括号）
const greetMinimal = name => "你好，" + name + "！";

console.log(greetArrow("王五")); // 输出：你好，王五！

表达式和语句

表达式

表达式是产生值的代码片段：

// 简单表达式
5 + 3
"Hello" + " World"
true && false

// 复杂表达式
let result = (5 + 3) * 2 > 10 ? "大于10" : "小于等于10";

语句

语句是执行特定操作的代码片段：

// 声明语句
let x = 5;

// 赋值语句
x = 10;

// 条件语句
if (x > 5) {
    console.log("x 大于 5");
}

// 循环语句
for (let i = 0; i < 3; i++) {
    console.log("循环：" + i);
}

控制结构

控制结构用于控制程序的执行流程：

条件结构

// if...else 语句
let age = 18;

if (age >= 18) {
    console.log("成年人");
} else if (age >= 13) {
    console.log("青少年");
} else {
    console.log("儿童");
}

// switch 语句
let day = "Monday";

switch (day) {
    case "Monday":
        console.log("星期一");
        break;
    case "Tuesday":
        console.log("星期二");
        break;
    default:
        console.log("其他日期");
}

循环结构

// for 循环
for (let i = 0; i < 5; i++) {
    console.log("for 循环：" + i);
}

// while 循环
let count = 0;
while (count < 3) {
    console.log("while 循环：" + count);
    count++;
}

// do...while 循环
let num = 0;
do {
    console.log("do...while 循环：" + num);
    num++;
} while (num < 3);

// for...of 循环（遍历可迭代对象）
let fruits = ["苹果", "香蕉", "橙子"];
for (let fruit of fruits) {
    console.log("水果：" + fruit);
}

// for...in 循环（遍历对象属性）
let person = {name: "张三", age: 25, city: "北京"};
for (let key in person) {
    console.log(key + "：" + person[key]);
}

错误处理结构

try {
    // 可能出错的代码
    let result = riskyOperation();
} catch (error) {
    // 处理错误
    console.log("发生错误：" + error.message);
} finally {
    // 无论是否出错都会执行
    console.log("清理工作");
}

对象和数组结构

对象字面量

const person = {
    // 属性
    name: "张三",
    age: 25,
    
    // 方法
    greet: function() {
        return "你好，我是" + this.name;
    },
    
    // ES6 简写方法
    sayAge() {
        return "我今年" + this.age + "岁";
    }
};

console.log(person.greet()); // 你好，我是张三
console.log(person.sayAge()); // 我今年25岁

数组字面量

// 创建数组
const numbers = [1, 2, 3, 4, 5];
const mixed = [1, "字符串", true, {name: "张三"}];

// 数组操作
numbers.push(6); // 添加元素
numbers.pop(); // 删除最后一个元素
numbers.shift(); // 删除第一个元素
numbers.unshift(0); // 在开头添加元素

模块结构

现代 JavaScript 支持模块化开发：

导出

// math.js
export const PI = 3.14159;

export function add(a, b) {
    return a + b;
}

export function multiply(a, b) {
    return a * b;
}

// 默认导出
export default function subtract(a, b) {
    return a - b;
}

导入

// main.js
import subtract, { PI, add, multiply } from './math.js';

console.log(PI); // 3.14159
console.log(add(5, 3)); // 8
console.log(multiply(4, 2)); // 8
console.log(subtract(10, 3)); // 7

异步结构

JavaScript 支持异步编程：

Promise

const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("数据获取成功");
        }, 1000);
    });
};

fetchData()
    .then(result => console.log(result))
    .catch(error => console.log(error));

async/await

async function getData() {
    try {
        const result = await fetchData();
        console.log(result);
    } catch (error) {
        console.log("错误：" + error);
    }
}

getData();

代码组织结构

立即执行函数表达式 (IIFE)

(function() {
    // 私有作用域
    let privateVariable = "私有变量";
    
    console.log("这个函数会立即执行");
    
    // 可以返回值
    return "执行完成";
})();

闭包结构

function createCounter() {
    let count = 0;
    
    return function() {
        count++;
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

事件处理结构

// DOM 事件处理
document.getElementById("myButton").addEventListener("click", function(event) {
    console.log("按钮被点击了");
    console.log("事件对象：", event);
});

// 自定义事件
const customEvent = new CustomEvent("myEvent", {
    detail: { message: "自定义事件" }
});

document.addEventListener("myEvent", function(event) {
    console.log("接收到自定义事件：", event.detail.message);
});

// 触发自定义事件
document.dispatchEvent(customEvent);

类结构（ES6）

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    
    greet() {
        return "你好，我是" + this.name;
    }
    
    static getSpecies() {
        return "人类";
    }
}

class Student extends Person {
    constructor(name, age, grade) {
        super(name, age);
        this.grade = grade;
    }
    
    study() {
        return this.name + "正在学习";
    }
}

const student = new Student("小明", 18, "高三");
console.log(student.greet()); // 你好，我是小明
console.log(student.study()); // 小明正在学习

代码规范结构

命名规范

// 变量和函数使用驼峰命名法
let userName = "张三";
function calculateTotal() {
    // 函数体
}

// 常量使用全大写字母和下划线
const MAX_SIZE = 100;
const API_URL = "https://api.example.com";

// 类名使用帕斯卡命名法
class UserManager {
    // 类体
}

注释规范

/**
 * 计算两个数的和
 * @param {number} a - 第一个数
 * @param {number} b - 第二个数
 * @returns {number} 两数之和
 */
function add(a, b) {
    return a + b;
}

// 单行注释用于解释简单逻辑
let result = add(5, 3); // 计算 5 + 3

/*
 * 多行注释用于解释复杂逻辑
 * 这里可以详细说明算法思路
 */
if (result > 10) {
    console.log("结果大于10");
}

总结

JavaScript 程序的基本结构包括：

变量声明：使用 let、const 声明变量
函数定义：函数声明、函数表达式、箭头函数
表达式和语句：产生值和执行操作的代码
控制结构：条件语句、循环语句、错误处理
对象和数组：数据组织方式
模块结构：代码模块化组织
异步结构：处理异步操作
类结构：面向对象编程
事件处理：响应用户交互
代码规范：命名规范和注释规范

理解这些基本结构有助于编写结构清晰、易于维护的 JavaScript 代码。在下一章节中，我们将深入学习 JavaScript 的变量声明。

#JavaScript 基本结构

#JavaScript 程序的基本组成

#变量声明

#函数定义

#函数声明

#函数表达式

#箭头函数

#表达式和语句

#表达式

#语句

#控制结构

#条件结构

#循环结构

#错误处理结构

#对象和数组结构

#对象字面量

#数组字面量

#模块结构

#导出

#导入

#异步结构

#Promise

#async/await

#代码组织结构

#立即执行函数表达式 (IIFE)

#闭包结构

#事件处理结构

#类结构（ES6）

#代码规范结构

#命名规范

#注释规范

#总结

评论