JavaScript 基本结构
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 中有多种定义函数的方式：
函数声明
javascript
function greet(name) {
return "你好，" + name + "！";
}
console.log(greet("张三")); // 输出：你好，张三！函数表达式
javascript
const greetExpression = function(name) {
return "你好，" + name + "！";
};
console.log(greetExpression("李四")); // 输出：你好，李四！箭头函数
javascript
const greetArrow = (name) => {
return "你好，" + name + "！";
};
// 简化写法（单行返回）
const greetSimple = (name) => "你好，" + name + "！";
// 更简化写法（单个参数可省略括号）
const greetMinimal = name => "你好，" + name + "！";
console.log(greetArrow("王五")); // 输出：你好，王五！表达式和语句
表达式
表达式是产生值的代码片段：
javascript
// 简单表达式
5 + 3
"Hello" + " World"
true && false
// 复杂表达式
let result = (5 + 3) * 2 > 10 ? "大于10" : "小于等于10";语句
语句是执行特定操作的代码片段：
javascript
// 声明语句
let x = 5;
// 赋值语句
x = 10;
// 条件语句
if (x > 5) {
console.log("x 大于 5");
}
// 循环语句
for (let i = 0; i < 3; i++) {
console.log("循环：" + i);
}控制结构
控制结构用于控制程序的执行流程：
条件结构
javascript
// 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("其他日期");
}循环结构
javascript
// 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]);
}错误处理结构
javascript
try {
// 可能出错的代码
let result = riskyOperation();
} catch (error) {
// 处理错误
console.log("发生错误：" + error.message);
} finally {
// 无论是否出错都会执行
console.log("清理工作");
}对象和数组结构
对象字面量
javascript
const person = {
// 属性
name: "张三",
age: 25,
// 方法
greet: function() {
return "你好，我是" + this.name;
},
// ES6 简写方法
sayAge() {
return "我今年" + this.age + "岁";
}
};
console.log(person.greet()); // 你好，我是张三
console.log(person.sayAge()); // 我今年25岁数组字面量
javascript
// 创建数组
const numbers = [1, 2, 3, 4, 5];
const mixed = [1, "字符串", true, {name: "张三"}];
// 数组操作
numbers.push(6); // 添加元素
numbers.pop(); // 删除最后一个元素
numbers.shift(); // 删除第一个元素
numbers.unshift(0); // 在开头添加元素模块结构
现代 JavaScript 支持模块化开发：
导出
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;
}导入
javascript
// 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
javascript
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("数据获取成功");
}, 1000);
});
};
fetchData()
.then(result => console.log(result))
.catch(error => console.log(error));async/await
javascript
async function getData() {
try {
const result = await fetchData();
console.log(result);
} catch (error) {
console.log("错误：" + error);
}
}
getData();代码组织结构
立即执行函数表达式 (IIFE)
javascript
(function() {
// 私有作用域
let privateVariable = "私有变量";
console.log("这个函数会立即执行");
// 可以返回值
return "执行完成";
})();闭包结构
javascript
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2事件处理结构
javascript
// 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）
javascript
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()); // 小明正在学习代码规范结构
命名规范
javascript
// 变量和函数使用驼峰命名法
let userName = "张三";
function calculateTotal() {
// 函数体
}
// 常量使用全大写字母和下划线
const MAX_SIZE = 100;
const API_URL = "https://api.example.com";
// 类名使用帕斯卡命名法
class UserManager {
// 类体
}注释规范
javascript
/**
* 计算两个数的和
* @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 的变量声明。