166 lines
4.6 KiB
Markdown
166 lines
4.6 KiB
Markdown
|
---
|
||
|
|
tags: [前端, JavaScript, 基础]
|
||
|
|
create time: 2026-04-24 18:41
|
||
|
|
---
|
||
|
|
|
||
|
|
# JavaScript 基础
|
||
|
|
|
||
|
|
## 概述
|
||
|
|
|
||
|
|
JavaScript 是前端唯一的专业编程语言。它让网页从静态内容变成动态交互：点击按钮弹出对话框、表单验证、数据异步加载、动画效果……所有这些都需要 JS。
|
||
|
|
|
||
|
|
思考题：JavaScript 是单线程语言，那它如何实现"异步"而不阻塞页面？
|
||
|
|
|
||
|
|
## 正文
|
||
|
|
|
||
|
|
### 1. 变量与数据类型
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
// 三种变量声明方式
|
||
|
|
let name = "Alice"; // let：块级作用域，可重新赋值
|
||
|
|
const age = 25; // const：块级作用域，不可重新赋值
|
||
|
|
var old = 10; // var：函数作用域（老旧写法，尽量少用）
|
||
|
|
|
||
|
|
// JavaScript 的主要数据类型
|
||
|
|
let text = "Hello"; // string
|
||
|
|
let num = 42; // number
|
||
|
|
let flag = true; // boolean
|
||
|
|
let empty = null; // null：有意为空
|
||
|
|
let notDefined; // undefined：未赋值
|
||
|
|
let list = [1, 2, 3]; // array
|
||
|
|
let person = { name: "Alice" }; // object
|
||
|
|
```
|
||
|
|
|
||
|
|
```mermaid
|
||
|
|
graph LR
|
||
|
|
A[JavaScript 数据类型] --> B[原始类型 Primitive]
|
||
|
|
A --> C[引用类型 Reference]
|
||
|
|
B --> D[string]
|
||
|
|
B --> E[number]
|
||
|
|
B --> F[boolean]
|
||
|
|
B --> G[null]
|
||
|
|
B --> H[undefined]
|
||
|
|
B --> I[Symbol]
|
||
|
|
B --> J[BigInt]
|
||
|
|
C --> K[array]
|
||
|
|
C --> L[object]
|
||
|
|
C --> M[Function]
|
||
|
|
```
|
||
|
|
|
||
|
|
> **提问：** `typeof null` 返回 `"object"` 是 JavaScript 的历史 bug 吗？为什么这个 bug 至今没有修复？
|
||
|
|
|
||
|
|
### 2. 函数
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
// 函数声明
|
||
|
|
function add(a, b) {
|
||
|
|
return a + b;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 箭头函数（ES6+ 推荐）
|
||
|
|
const multiply = (a, b) => a * b;
|
||
|
|
|
||
|
|
// 默认参数
|
||
|
|
const greet = (name = "World") => `Hello, ${name}!`;
|
||
|
|
|
||
|
|
// 函数作为参数（高阶函数）
|
||
|
|
const numbers = [1, 2, 3, 4, 5];
|
||
|
|
const doubled = numbers.map(n => n * 2); // [2, 4, 6, 8, 10]
|
||
|
|
const evens = numbers.filter(n => n % 2 === 0); // [2, 4]
|
||
|
|
const sum = numbers.reduce((acc, n) => acc + n, 0); // 15
|
||
|
|
```
|
||
|
|
|
||
|
|
> **核心概念：** map / filter / reduce 是函数式编程的核心三件套，也是 React 中处理数据的核心模式。
|
||
|
|
|
||
|
|
### 3. DOM 操作
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
// 获取元素
|
||
|
|
const btn = document.getElementById("submit-btn");
|
||
|
|
const items = document.querySelectorAll(".item");
|
||
|
|
|
||
|
|
// 修改内容
|
||
|
|
btn.textContent = "点击我";
|
||
|
|
btn.innerHTML = "<strong>加粗文字</strong>";
|
||
|
|
|
||
|
|
// 修改样式
|
||
|
|
btn.style.backgroundColor = "blue";
|
||
|
|
btn.classList.add("active"); // 添加 class
|
||
|
|
btn.classList.toggle("hidden"); // 切换 class
|
||
|
|
|
||
|
|
// 创建元素
|
||
|
|
const newDiv = document.createElement("div");
|
||
|
|
newDiv.textContent = "动态创建的元素";
|
||
|
|
document.body.appendChild(newDiv);
|
||
|
|
|
||
|
|
// 事件监听
|
||
|
|
btn.addEventListener("click", () => {
|
||
|
|
alert("按钮被点击了！");
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
### 4. 异步编程 — 前端最核心的难点
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
// 方式一：Promise
|
||
|
|
fetch("https://api.example.com/users")
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => console.log(data))
|
||
|
|
.catch(error => console.error(error));
|
||
|
|
|
||
|
|
// 方式二：async/await（推荐，更直观）
|
||
|
|
async function getUsers() {
|
||
|
|
try {
|
||
|
|
const response = await fetch("https://api.example.com/users");
|
||
|
|
const data = await response.json();
|
||
|
|
console.log(data);
|
||
|
|
} catch (error) {
|
||
|
|
console.error("请求失败:", error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
```mermaid
|
||
|
|
sequenceDiagram
|
||
|
|
participant U as 用户
|
||
|
|
participant B as 浏览器
|
||
|
|
participant S as 服务器
|
||
|
|
U->>B: 点击按钮
|
||
|
|
B->>B: 触发 async 函数
|
||
|
|
B->>S: fetch 请求发送
|
||
|
|
Note over B: 页面不卡顿！（非阻塞）
|
||
|
|
S-->>B: 返回 JSON 数据
|
||
|
|
B->>B: .then() / await 处理数据
|
||
|
|
B->>U: 更新页面内容
|
||
|
|
```
|
||
|
|
|
||
|
|
> **提问：** `Promise` 的三种状态（pending / fulfilled / rejected）是如何流转的？为什么 `async/await` 本质上是 Promise 的语法糖？
|
||
|
|
|
||
|
|
### 5. 作用域与闭包
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
// 作用域链
|
||
|
|
function outer() {
|
||
|
|
let count = 0; // 外层函数变量
|
||
|
|
|
||
|
|
return function() { // 内部函数"记住"了外层的 count
|
||
|
|
count++;
|
||
|
|
return count;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
const counter = outer();
|
||
|
|
console.log(counter()); // 1
|
||
|
|
console.log(counter()); // 2
|
||
|
|
console.log(counter()); // 3
|
||
|
|
```
|
||
|
|
|
||
|
|
> **思考：** 闭包是 JS 中最强大的特性之一，但它也被广泛用于实现单例模式、数据隐藏和回调函数。你能想到闭包在真实项目中的哪些应用场景？
|
||
|
|
|
||
|
|
## 关联笔记
|
||
|
|
|
||
|
|
- [[HTML 基础]] — JS 操作 HTML 的 DOM 树
|
||
|
|
- [[CSS 基础]] — JS 动态修改 CSS 样式
|
||
|
|
- [[TypeScript 基础]] — 给 JS 加上类型系统
|
||
|
|
- [[30.areas/finance/Investment lessons/2024.Current trading lessons.md]]
|