JavaScript 大纲

news/2025/10/15 12:10:57/文章来源:https://www.cnblogs.com/ZhuXiaoMin/p/19143022

JavaScript 笔记

一、JavaScript 是什么

JavaScript (简称 JS) 是一种高级的、解释型的编程语言。它最初被设计用来“使网页动起来”，如今已发展成为一门功能全面、无处不在的编程语言。

核心地位：它与 HTML 和 CSS 并称为前端开发的三大基石。
- HTML：负责网页的结构和内容（像房子的骨架）。
- CSS：负责网页的样式和布局（像房子的装修）。
- JavaScript：负责网页的行为和交互（像房子的电器和智能系统，让房子“活”起来）。
重要提示：JavaScript 和 Java 除了名字相似外，没有任何关系。这是一个历史遗留的命名问题。

二、JavaScript 能做什么？

JS 的应用领域极其广泛，主要可以分为以下几个方面：

1. 前端 Web 开发 (浏览器端)

这是 JS 最传统的领域，用于创建动态和交互式的用户体验。

操作 DOM：动态地添加、删除、修改网页上的元素和内容。
处理事件：响应用户的操作，如点击、鼠标移动、键盘输入、表单提交等。
数据验证：在表单提交到服务器之前，先在前端进行初步的数据有效性检查。
动画效果：创建复杂的动画和过渡效果。
与 APIs 交互：从服务器获取数据（使用 fetch 或 XMLHttpRequest）并更新页面，而无需重新加载整个网页（这种技术称为 AJAX）。

2. 后端开发 (服务器端)

通过 Node.js 这个运行时环境，JS 可以用于编写服务器端的程序。

构建 Web 服务器：处理 HTTP 请求和响应。
操作数据库：连接和操作如 MongoDB、MySQL 等数据库。
API 开发：创建 RESTful API 或 GraphQL API 供前端或其他服务调用。

3. 移动应用开发

使用像 React Native、Ionic 或 NativeScript 等框架，可以用 JS 来开发跨平台的移动应用（iOS 和 Android）。

4. 桌面应用开发

使用 Electron 等框架，可以用 JS、HTML 和 CSS 来构建跨平台的桌面应用（如 VS Code、Slack、Discord 等都是用 Electron 开发的）。

5. 游戏开发

可用于开发浏览器游戏或使用游戏引擎（如 Three.js for 3D, Phaser）进行更复杂的游戏开发。

三、JavaScript 的核心概念（入门必学）

要学习 JS，你需要理解以下基本概念：

变量：用于存储数据的容器。使用 let, const (现代推荐) 或 var (旧方式) 来声明。

javascript
```
let message = "Hello"; // 可变的变量a
const pi = 3.14;      // 不可变的常量
```
数据类型：JS 是弱类型语言，常见类型有：
- 基本类型：String（字符串）、Number（数字）、Boolean（布尔值 true/false）、null、undefined、Symbol、BigInt。
- 引用类型：Object（对象）、Array（数组，是一种特殊的对象）、Function（函数）。
运算符：用于执行运算，如算术运算符 (+, -, *, /)、比较运算符 (==, ===, >, <)、逻辑运算符 (&&, ||, !) 等。

控制流：控制代码的执行顺序。

条件语句：if...else, switch

if (age >= 18) {console.log("Adult");
} else {console.log("Minor");
}

循环语句：for, while, do...while

for (let i = 0; i < 5; i++) {console.log(i);
}

函数：一段可重复使用的代码块，用于执行特定任务。

function greet(name) {return "Hello, " + name;
}
greet("World"); // 调用函数，输出 "Hello, World"

对象和数组：组织和管理数据的主要方式。

// 对象：键值对集合
let person = {name: "Alice",age: 30,sayHi: function() { console.log("Hi!"); }
};// 数组：有序列表
let fruits = ["Apple", "Banana", "Orange"];
console.log(fruits[0]); // 访问第一个元素："Apple"

异步编程：处理需要等待的操作（如网络请求、读取文件）。
- 回调函数 (Callbacks)：传统的异步处理方式，容易导致“回调地狱”。
- Promise：更现代的异步解决方案，链式调用 .then().catch() 使代码更清晰。
- Async/Await：基于 Promise 的语法糖，让异步代码看起来像同步代码，更易读写。
```
// 使用 Async/Await 获取数据
async function fetchData() {try {const response = await fetch('https://api.example.com/data');const data = await response.json();console.log(data);} catch (error) {console.error('Error:', error);}
}ja
```