
# 学习笔记 - 我的技术成长之路

## 为什么要写学习笔记

在技术领域，知识更新非常快，学习笔记不仅能帮助我巩固所学，还能让我在未来回顾时快速找回当时的思考。

### 笔记的价值

1. **记忆强化**：书写过程本身就是一种记忆强化
2. **知识梳理**：整理笔记时需要思考和归纳
3. **快速回顾**：需要时可以快速查阅
4. **分享交流**：帮助他人，也获得反馈

## 学习笔记分类

我将学习笔记分为以下几个类别：

### 前端技术
- JavaScript/TypeScript
- React/Vue/Next.js
- CSS/Tailwind/动画
- 浏览器原理

### 后端技术
- Node.js/Python/Go
- 数据库/缓存
- API设计/微服务
- 性能优化

### 算法与数据结构
- 经典算法实现
- 复杂度分析
- LeetCode解题记录
- 面试准备

### 系统设计
- 架构设计原则
- 分布式系统
- 高可用方案
- 设计模式

## 笔记整理方法

### 1. 结构化记录

```
├── 核心概念
├── 代码示例
├── 原理图解
├── 实践心得
└── 参考资料
```

### 2. 使用Markdown

Markdown 是最适合写技术笔记的格式：
- 支持代码高亮
- 易于版本控制
- 跨平台兼容

### 3. 定期回顾

每周花时间回顾本周的笔记，每月做一次总结。

## 开始你的学习之旅

```javascript
// 学习的路上，每一天都在进步
const learning = {
  day: 0,
  knowledge: 0,
  
  study(topic) {
    this.day++;
    this.knowledge += Math.random() * 10;
    console.log(`Day ${this.day}: 学习了 ${topic}`);
  },
  
  review() {
    this.knowledge *= 1.1; // 回顾让知识更牢固
    console.log('复习完成，知识巩固！');
  }
};

learning.study('JavaScript闭包');
learning.study('React Hooks');
learning.review();
```

## 结语

学习是一个持续的过程，希望这些笔记能记录我的成长轨迹，也希望能帮助到正在学习路上的你。

> 「Stay hungry, stay foolish.」 - Steve Jobs

记录我的技术学习历程，分享学习心得和笔记整理方法。

学习笔记 - 我的技术成长之路


# JavaScript闭包深入理解

## 什么是闭包

**闭包（Closure）** 是指函数能够记住并访问其词法作用域，即使该函数在其词法作用域之外执行。

## 闭包的形成条件

1. 函数嵌套
2. 内部函数引用外部函数的变量
3. 内部函数被外部引用

```javascript
function outer() {
  const outerVar = '外部变量';
  
  function inner() {
    console.log(outerVar); // inner函数可以访问outerVar
  }
  
  return inner;
}

const innerFunc = outer();
innerFunc(); // 输出: 外部变量
```

## 闭包的应用场景

### 1. 数据私有化

```javascript
function createCounter() {
  let count = 0;
  
  return {
    increment() {
      count++;
      return count;
    },
    decrement() {
      count--;
      return count;
    },
    getCount() {
      return count;
    }
  };
}

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

### 2. 函数柯里化

```javascript
function multiply(a) {
  return function(b) {
    return a * b;
  };
}

const double = multiply(2);
const triple = multiply(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15
```

### 3. 模块化

```javascript
const module = (function() {
  const privateVar = '私有变量';
  
  function privateMethod() {
    return privateVar;
  }
  
  return {
    publicMethod() {
      return privateMethod();
    }
  };
})();

console.log(module.publicMethod()); // 私有变量
console.log(module.privateVar); // undefined
```

## 闭包与内存管理

闭包会导致外部函数的作用域不会被垃圾回收，因为内部函数仍然引用着它。

```javascript
function createHeavyObject() {
  const heavyData = new Array(1000000).fill('data');
  
  return function() {
    return heavyData.length;
  };
}

const getLength = createHeavyObject();
// heavyData 仍然被引用，不会被回收
```

**注意**：合理使用闭包，避免不必要的内存泄漏。

## 总结

闭包是JavaScript中非常重要的概念，掌握它对于理解作用域、模块化和函数式编程都非常有帮助。

深入理解JavaScript闭包的概念、原理和应用场景。

JavaScript闭包深入理解

# 二分查找算法详解

## 什么是二分查找

**二分查找（Binary Search）** 是一种高效的搜索算法，适用于有序数组。

## 核心思想

每次将搜索范围缩小一半，直到找到目标元素或搜索范围为空。

## 时间复杂度

- **最优情况**：O(1) - 目标元素在中间
- **最坏情况**：O(log n) - 需要不断缩小范围

## 实现方式

### 方式一：递归实现

```javascript
function binarySearchRecursive(arr, target, left, right) {
 if (left > right) return -1;
 
 const mid = Math.floor((left + right) / 2);
 
 if (arr[mid] === target) {
 return mid;
 } else if (arr[mid] < target) {
 return binarySearchRecursive(arr, target, mid + 1, right);
 } else {
 return binarySearchRecursive(arr, target, left, mid - 1);
 }
}

const arr = [1, 3, 5, 7, 9, 11, 13];
console.log(binarySearchRecursive(arr, 7, 0, arr.length - 1)); // 3
```

### 方式二：迭代实现

```javascript
function binarySearchIterative(arr, target) {
 let left = 0;
 let right = arr.length - 1;
 
 while (left <= right) {
 const mid = Math.floor((left + right) / 2);
 
 if (arr[mid] === target) {
 return mid;
 } else if (arr[mid] < target) {
 left = mid + 1;
 } else {
 right = mid - 1;
 }
 }
 
 return -1;
}

const arr = [1, 3, 5, 7, 9, 11, 13];
console.log(binarySearchIterative(arr, 9)); // 4
```

## 常见变形

### 查找第一个等于目标的元素

```javascript
function findFirstEqual(arr, target) {
 let left = 0;
 let right = arr.length - 1;
 let result = -1;
 
 while (left <= right) {
 const mid = Math.floor((left + right) / 2);
 
 if (arr[mid] === target) {
 result = mid;
 right = mid - 1; // 继续向左查找
 } else if (arr[mid] < target) {
 left = mid + 1;
 } else {
 right = mid - 1;
 }
 }
 
 return result;
}

const arr = [1, 2, 2, 2, 3, 4];
console.log(findFirstEqual(arr, 2)); // 1
```

### 查找最后一个小于等于目标的元素

```javascript
function findLastLessOrEqual(arr, target) {
 let left = 0;
 let right = arr.length - 1;
 let result = -1;
 
 while (left <= right) {
 const mid = Math.floor((left + right) / 2);
 
 if (arr[mid] <= target) {
 result = mid;
 left = mid + 1; // 继续向右查找
 } else {
 right = mid - 1;
 }
 }
 
 return result;
}

const arr = [1, 3, 5, 7, 9];
console.log(findLastLessOrEqual(arr, 6)); // 2
```

## 应用场景

1. **有序数组查找**：数据库索引、排序后的列表
2. **二分答案**：在可能的答案范围内二分查找
3. **边界查找**：寻找插入位置、上下界

## LeetCode推荐题目

- [704. Binary Search](https://leetcode.com/problems/binary-search/)
- [35. Search Insert Position](https://leetcode.com/problems/search-insert-position/)
- [34. Find First and Last Position of Element in Sorted Array](https://leetcode.com/problems/find-first-and-last-position-of-element-in-sorted-array/)
- [153. Find Minimum in Rotated Sorted Array](https://leetcode.com/problems/find-minimum-in-rotated-sorted-array/)

## 总结

二分查找是非常高效的搜索算法，但要求数组必须有序。掌握二分查找及其各种变形，对于解决算法问题非常有帮助。

深入理解二分查找算法的原理、实现和应用场景。

二分查找算法详解

深入理解事件循环的原理、实现和应用场景。

事件循环

# Promise 详解

## Promise 规范

_规范_： Promise 是一套专门处理异步场景的规范，它能有效的避免回调地狱的产生，使用异步代码更加清晰，简洁，统一。

这套规范最早诞生于前端社区， 规范名称为 **[Promise A+](https://promisesaplus.com/)**

Promise A+ 规定

1. 所有的异步场景，都可以看做一个异步任务，每个异步任务，在JS中应该表现为一个*对象*
2. 每个任务对象都应该有两个阶段和三个状态
 - 阶段：未决状态（unsettled）、已决状态（settled）
 - 状态：挂起状态（pending）、成功状态（fulfilled）、失败状态（rejected）
3. 状态流转
 - 挂起->成功 称为resolve;可能有一个相关的数据
 - 挂起->失败 称为reject; 可能有一个失败的原因
4. 可以针对任务进行后续处理，针对完成的后续处理称之为 onFulfilled ，针对失败的后续处理称之为 onRejected

## Promise API

ES6 提供了一套API, 实现了 Promise A+ 规范

### catch方法

`.catch(onRejected)` === `.then(null,onRejected)`

`.then(onFulfilled,onRejected)` === `.then(onFulfilled).catch(onRejected)`

### 链式调用

1. then方法 必定会返回一个新的Promise对象，也可以理解后续处理也是一个任务
2. 新任务的状态取决于后续处理的结果
 - 没有相关的后续处理， 新任务的状态和前任务的状态一致，数据为前任务的数据
 - 如果有后续处理，但是后续处理还没有执行，则新任务挂在状态
 - 后续处理执行完成后，新任务的状态和数据会根据后续处理的结果而改变
 - 后续处理失败，新任务的状态为失败状态，数据为后续处理的失败原因
 - 后续执行返回一个新的Promise对象，新任务的状态和数据会根据后续处理的结果而改变

### 静态方法

 

| 方法 | 描述 |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| Promise.resolve(data) | 将一个成功状态的Promise对象返回 |
| Promise.reject(reason) | 将一个失败状态的Promise对象返回 |
| Promise.all([]) | 返回一个任务数组， 全部成功则成功,数据为数组 任何一个失败则失败,数据为失败的任务数据 |
| Promise.any([]) | 任一成功 → 该成功值 全部失败报错提示 `AggregateError: All promises were rejected` |
| Promise.allSettled([]) | 全部完成（不论成功/失败） 返回数据格式 `[{"status": "rejected","reason": 1},{"status": "fulfilled","value": 2}]` ,没有失败情况 |
| Promise.race([]) | 返回最先处理好的任务，状态为最先 |

### 消除回调

有了Promise 异步任务有了统一的处理方式
有了统一的处理方式，ES官方就可以对其进一步优化
ES7 提供了 async/await 语法糖，进一步简化了异步代码的编写
`async` 函数的返回值是一个 Promise 对象，`await` 关键字 后面的表达式，必须是一个 Promise 对象，否则会报错

## 练习题

1. 练习1

```javascript
const promise = new Promise((resolve, reject) => {
 console.log(1);
 resolve();
 console.log(2);
});
promise.then(() => {
 console.log(3);
});
console.log(4);
```

> 1 2 3 4

```javascript
const promise = new Promise((resolve, reject) => {
 console.log(1);
 setTimeout(() => {
 console.log(2);
 resolve();
 console.log(3);
 }, 0);
});

promise.then(() => {
 console.log(4);
});
console.log(5);
```

> 1 5 2 3 4

2. 练习2

```javascript
Promise.resolve()
 .then(() => {
 console.log(0);
 return Promise.resolve(4);
 })
 .then((res) => console.log(res));

Promise.resolve()
 .then(() => console.log(1))
 .then(() => console.log(2))
 .then(() => console.log(3))

 .then(() => console.log(5))
 .then(() => console.log(6));
```

> 0, 1, 2, 3, 4, 5, 6

```javascript
async function m() {
 const n = await 1;
 console.log(n);
}
m();
console.log(2);
```

> 2, 1

```javascript
async function m() {
 console.log(0);
 const n = await 1;
 console.log(n);
}
(async () => {
 await m();
 console.log(2);
})();
console.log(3);
```

> 0, 3, 1, 2

```javascript
async function m1() {
 return 1;
}
async function m2() {
 const n = await m1();
 console.log(n);
 return 2;
}
async function m3() {
 const n = m2();
 console.log(n);
 return 3;
}
m3().then((n) => console.log(n));
m3();
console.log(4);
```

> promise:pending, promise:pending, 4, 1, 3, 1

```javascript
var a;
var b = new Promise((resolve) => {
 console.log("promise1");
 setTimeout(() => {
 resolve();
 }, 1000);
})
 .then(() => {
 console.log("promise2");
 })
 .then(() => {
 console.log("promise3");
 })
 .then(() => {
 console.log("promise4");
 });

a = new Promise(async (resolve) => {
 console.log(a);
 await b;
 console.log(a);
 console.log("after1");
 await a;
 resolve(true);
 console.log("after2");
});
console.log("end");
```

> promise1, undefined, end, promise2, promise3, promise4, promise:pending

```javascript
async function m1() {
 return 1;
}
async function m2() {
 const n = await m1();
 console.log(n);
 return 2;
}
async function m3() {
 const n = await m2();
 console.log(n);
 return 3;
}
m3().then((n) => console.log(n));
m3();
console.log(4);
```

> 4,1, 1, 2, 2, 3

```javascript
async function async1() {
 console.log("async1 start");
 await async2();
 console.log("async1 end");
}
async function async2() {
 console.log("async2");
}

console.log("script start");
setTimeout(() => {
 console.log("setTimeout");
}, 0);
async1();
new Promise((resolve) => {
 console.log("promise1");
 resolve();
}).then(() => {
 console.log("promise2");
});
console.log("script end");
```

> script start , async1 start , async2 , promise1 script end, async1 end, promise2 setTimeout

## 手写Promise

```javascript
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";

const runMicroTask = (task) => {
 // node 环境
 if (process.nextTick) {
 return process.nextTick(task);
 }
 // 浏览器环境
 if (window.queueMicrotask) {
 return window.queueMicrotask(task);
 }
 // 其他环境
 return setTimeout(task, 0);
};

const isLikePromise = (promise) => {
 return (
 promise && typeof promise === "object" && typeof promise.then === "function"
 );
};

const isPromise = (promise) => {
 return promise instanceof MyPromise;
};

class MyPromise {
 _state = PENDING;
 _value = undefined;
 #tasks = [];
 constructor(executor) {
 try {
 executor(this._resolve.bind(this), this._reject.bind(this));
 } catch (error) {
 this._reject(error);
 }
 }

 #changeState(state, value) {
 if (this._state !== PENDING) return;
 this._state = state;
 this._value = value;
 this.#runTasks();
 }
 _resolve(value) {
 this.#changeState(FULFILLED, value);
 }
 _reject(reason) {
 this.#changeState(REJECTED, reason);
 }

 #runTasks() {
 if (this._state === PENDING) return;

 while (this.#tasks[0]) {
 const task = this.#tasks.shift();
 this.#runOneTask(task);
 }
 }
 #runOneTask({ onFulfilled, onRejected, resolve, reject }) {
 runMicroTask(() => {
 let executor;
 if (this._state === FULFILLED) {
 executor = onFulfilled;
 } else if (this._state === REJECTED) {
 executor = onRejected;
 }

 if (typeof executor !== "function") {
 if (this._state === FULFILLED) {
 resolve(this._value);
 } else {
 reject(this._value);
 }
 return;
 }

 try {
 const result = executor(this._value);
 if (isLikePromise(result)) {
 result.then(resolve, reject);
 } else {
 if (this._state === FULFILLED) {
 resolve(result);
 } else {
 reject(result);
 }
 }
 } catch (err) {
 reject(err);
 }
 });
 }
 then(onFulfilled, onRejected) {
 return new MyPromise((resolve, reject) => {
 this.#tasks.push({
 onFulfilled,
 onRejected,
 resolve,
 reject,
 });
 this.#runTasks();
 });
 }
 cache(onRejected) {
 return this.then(null, onRejected);
 }
 finally(onFinally) {
 return this.then(
 (data) => {
 onFinally();
 return data;
 },
 (err) => {
 onFinally();
 throw err;
 },
 );
 }
}
```

### 手写Promise.resolve

```javascript
Promise.resolve = (reason) => {
 if (isPromise(data)) {
 return data;
 }
 return new MyPromise((resolve, reject) => {
 if (isLikePromise(data)) {
 data.then(resolve, reject);
 } else {
 resolve(data);
 }
 });
};
```

### 手写Promise.reject

```javascript
Promise.reject = (reason) => {
 return new MyPromise((resolve, reject) => {
 reject(reason);
 });
};
```

### 手写Promise.all

```javascript
MyPromise.all = (promises) => {
 return new MyPromise((resolve, reject) => {
 const results = [];
 let count = 0;
 for (const promise of promises) {
 MyPromise.resolve(promise).then((data) => {
 results[count] = data;
 count++;
 if (count === promises.length) {
 resolve(results);
 }
 });
 }
 });
};
```

### 手写Promise.allSettled

```javascript
MyPromise.allSettled = (promises) => {
 return new MyPromise((resolve, reject) => {
 const results = [];
 let count = 0;
 for (const promise of promises) {
 MyPromise.resolve(promise).then(
 (data) => {
 results[count] = {
 status: "fulfilled",
 value: data,
 };
 count++;
 if (count === promises.length) {
 resolve(results);
 }
 },
 (err) => {
 results[count] = {
 status: "rejected",
 reason: err,
 };
 count++;
 if (count === promises.length) {
 resolve(results);
 }
 },
 );
 }
 });
};
```

### 手写Promise.race

```javascript
MyPromise.race = (promises) => {
 return new MyPromise((resolve, reject) => {
 for (const promise of promises) {
 MyPromise.resolve(promise).then(resolve, reject);
 }
 });
};
```

深入理解Promise的原理、实现和应用场景。

学习笔记

学习笔记 - 我的技术成长之路

JavaScript闭包深入理解

二分查找算法详解

事件循环

Promise详解