no message
This commit is contained in:
parent
d09fb5bf75
commit
0daf1bd097
@ -8,39 +8,45 @@
|
||||
```js
|
||||
class MyPromise {
|
||||
constructor(executor) {
|
||||
this.state = 'pending';
|
||||
this.value = undefined;
|
||||
this.callbacks = [];
|
||||
this.state = 'pending'; // 初始状态为 pending
|
||||
this.value = undefined; // 存储成功值或失败原因
|
||||
this.callbacks = []; // 存储 then 注册的回调函数
|
||||
|
||||
// 成功时调用，将状态改为 fulfilled
|
||||
const resolve = (value) => {
|
||||
if (this.state !== 'pending') return;
|
||||
if (this.state !== 'pending') return; // 状态只能改变一次
|
||||
this.state = 'fulfilled';
|
||||
this.value = value;
|
||||
this.callbacks.forEach(cb => cb.onFulfilled(value));
|
||||
this.callbacks.forEach(cb => cb.onFulfilled(value)); // 执行所有成功回调
|
||||
};
|
||||
|
||||
// 失败时调用，将状态改为 rejected
|
||||
const reject = (reason) => {
|
||||
if (this.state !== 'pending') return;
|
||||
this.state = 'rejected';
|
||||
this.value = reason;
|
||||
this.callbacks.forEach(cb => cb.onRejected(reason));
|
||||
this.callbacks.forEach(cb => cb.onRejected(reason)); // 执行所有失败回调
|
||||
};
|
||||
|
||||
// 立即执行 executor，捕获异常则 reject
|
||||
try { executor(resolve, reject); } catch (e) { reject(e); }
|
||||
}
|
||||
|
||||
then(onFulfilled, onRejected) {
|
||||
// 返回新 Promise 实现链式调用
|
||||
return new MyPromise((resolve, reject) => {
|
||||
const handle = (callback, fallback) => {
|
||||
try {
|
||||
const result = (callback || fallback)(this.value);
|
||||
const result = (callback || fallback)(this.value); // 执行回调
|
||||
// 如果返回值是 Promise，等待其完成
|
||||
result instanceof MyPromise ? result.then(resolve, reject) : resolve(result);
|
||||
} catch (e) { reject(e); }
|
||||
} catch (e) { reject(e); } // 回调报错则 reject
|
||||
};
|
||||
|
||||
// 根据当前状态决定立即执行还是存储回调
|
||||
if (this.state === 'fulfilled') handle(onFulfilled, v => v);
|
||||
else if (this.state === 'rejected') handle(onRejected, e => { throw e; });
|
||||
else this.callbacks.push({
|
||||
else this.callbacks.push({ // pending 状态先存储回调
|
||||
onFulfilled: () => handle(onFulfilled, v => v),
|
||||
onRejected: () => handle(onRejected, e => { throw e; })
|
||||
});
|
||||
@ -55,23 +61,24 @@ class MyPromise {
|
||||
> **解决**：多异步任务协调与超时兜底问题。
|
||||
|
||||
```js
|
||||
// Promise.all - 所有成功才成功
|
||||
// Promise.all - 所有成功才成功，一个失败则立即失败
|
||||
Promise.myAll = (promises) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const results = [];
|
||||
let count = 0;
|
||||
const results = []; // 存储所有结果
|
||||
let count = 0; // 记录完成数量
|
||||
promises.forEach((p, i) => {
|
||||
Promise.resolve(p).then(val => {
|
||||
results[i] = val;
|
||||
if (++count === promises.length) resolve(results);
|
||||
}, reject);
|
||||
results[i] = val; // 按索引存储，保证顺序
|
||||
if (++count === promises.length) resolve(results); // 全部完成则 resolve
|
||||
}, reject); // 任一失败立即 reject
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// Promise.race - 第一个完成就返回
|
||||
// Promise.race - 第一个完成就返回（无论成功失败）
|
||||
Promise.myRace = (promises) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 第一个 resolve/reject 的结果会被采纳，后续的会被忽略
|
||||
promises.forEach(p => Promise.resolve(p).then(resolve, reject));
|
||||
});
|
||||
};
|
||||
@ -83,21 +90,21 @@ Promise.myRace = (promises) => {
|
||||
> **解决**：高频事件触发导致的性能问题和重复请求。
|
||||
|
||||
```js
|
||||
// 防抖：停止触发后执行
|
||||
// 防抖：停止触发后才执行（适合搜索框输入）
|
||||
function debounce(fn, delay) {
|
||||
let timer = null;
|
||||
let timer = null; // 保存定时器 ID
|
||||
return function(...args) {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => fn.apply(this, args), delay);
|
||||
clearTimeout(timer); // 每次触发都清除上一个定时器
|
||||
timer = setTimeout(() => fn.apply(this, args), delay); // 重新设定定时器
|
||||
};
|
||||
}
|
||||
|
||||
// 节流：固定间隔执行
|
||||
// 节流：固定间隔执行（适合滚动事件）
|
||||
function throttle(fn, delay) {
|
||||
let last = 0;
|
||||
let last = 0; // 记录上次执行时间
|
||||
return function(...args) {
|
||||
const now = Date.now();
|
||||
if (now - last >= delay) {
|
||||
if (now - last >= delay) { // 距离上次执行超过 delay 才执行
|
||||
last = now;
|
||||
fn.apply(this, args);
|
||||
}
|
||||
@ -112,17 +119,22 @@ function throttle(fn, delay) {
|
||||
|
||||
```js
|
||||
function deepClone(obj, map = new WeakMap()) {
|
||||
// 基本类型和 null 直接返回
|
||||
if (obj === null || typeof obj !== 'object') return obj;
|
||||
// 特殊对象处理
|
||||
if (obj instanceof Date) return new Date(obj);
|
||||
if (obj instanceof RegExp) return new RegExp(obj);
|
||||
|
||||
if (map.has(obj)) return map.get(obj); // 处理循环引用
|
||||
// 处理循环引用：如果已拷贝过，直接返回缓存
|
||||
if (map.has(obj)) return map.get(obj);
|
||||
|
||||
// 创建新对象/数组
|
||||
const clone = Array.isArray(obj) ? [] : {};
|
||||
map.set(obj, clone);
|
||||
map.set(obj, clone); // 先存入 map，防止循环引用
|
||||
|
||||
// 递归拷贝每个属性
|
||||
for (const key in obj) {
|
||||
if (obj.hasOwnProperty(key)) {
|
||||
if (obj.hasOwnProperty(key)) { // 只拷贝自身属性
|
||||
clone[key] = deepClone(obj[key], map);
|
||||
}
|
||||
}
|
||||
@ -138,9 +150,11 @@ function deepClone(obj, map = new WeakMap()) {
|
||||
```js
|
||||
function curry(fn) {
|
||||
return function curried(...args) {
|
||||
// 如果参数数量足够，直接执行原函数
|
||||
if (args.length >= fn.length) {
|
||||
return fn.apply(this, args);
|
||||
}
|
||||
// 参数不够，返回新函数继续收集参数
|
||||
return (...nextArgs) => curried(...args, ...nextArgs);
|
||||
};
|
||||
}
|
||||
@ -148,8 +162,8 @@ function curry(fn) {
|
||||
// 使用示例
|
||||
const add = (a, b, c) => a + b + c;
|
||||
const curriedAdd = curry(add);
|
||||
curriedAdd(1)(2)(3); // 6
|
||||
curriedAdd(1, 2)(3); // 6
|
||||
curriedAdd(1)(2)(3); // 6 - 每次传一个参数
|
||||
curriedAdd(1, 2)(3); // 6 - 也可以一次传多个
|
||||
```
|
||||
|
||||
## 6. call / apply / bind 实现
|
||||
@ -158,30 +172,31 @@ curriedAdd(1, 2)(3); // 6
|
||||
> **解决**：this 指向问题，实现函数借用和预设参数。
|
||||
|
||||
```js
|
||||
// call
|
||||
// call - 立即执行，参数逐个传入
|
||||
Function.prototype.myCall = function(ctx, ...args) {
|
||||
ctx = ctx || window;
|
||||
const key = Symbol();
|
||||
ctx[key] = this;
|
||||
const result = ctx[key](...args);
|
||||
delete ctx[key];
|
||||
ctx = ctx || window; // ctx 为 null/undefined 时指向 window
|
||||
const key = Symbol(); // 用 Symbol 避免属性名冲突
|
||||
ctx[key] = this; // 将函数作为 ctx 的方法
|
||||
const result = ctx[key](...args); // 调用，此时 this 指向 ctx
|
||||
delete ctx[key]; // 清理临时属性
|
||||
return result;
|
||||
};
|
||||
|
||||
// apply
|
||||
// apply - 立即执行，参数以数组传入
|
||||
Function.prototype.myApply = function(ctx, args = []) {
|
||||
ctx = ctx || window;
|
||||
const key = Symbol();
|
||||
ctx[key] = this;
|
||||
const result = ctx[key](...args);
|
||||
const result = ctx[key](...args); // 展开数组参数
|
||||
delete ctx[key];
|
||||
return result;
|
||||
};
|
||||
|
||||
// bind
|
||||
// bind - 返回新函数，不立即执行
|
||||
Function.prototype.myBind = function(ctx, ...args) {
|
||||
const fn = this;
|
||||
const fn = this; // 保存原函数
|
||||
return function(...newArgs) {
|
||||
// 合并预设参数和新参数
|
||||
return fn.apply(ctx, [...args, ...newArgs]);
|
||||
};
|
||||
};
|
||||
@ -195,30 +210,36 @@ Function.prototype.myBind = function(ctx, ...args) {
|
||||
```js
|
||||
class EventEmitter {
|
||||
constructor() {
|
||||
this.events = {};
|
||||
this.events = {}; // 存储事件名 -> 监听器数组的映射
|
||||
}
|
||||
|
||||
// 订阅事件
|
||||
on(event, listener) {
|
||||
(this.events[event] ||= []).push(listener);
|
||||
return this;
|
||||
(this.events[event] ||= []).push(listener); // 添加监听器
|
||||
return this; // 返回 this 支持链式调用
|
||||
}
|
||||
|
||||
// 取消订阅
|
||||
off(event, listener) {
|
||||
if (this.events[event]) {
|
||||
// 过滤掉指定的监听器
|
||||
this.events[event] = this.events[event].filter(l => l !== listener);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
// 触发事件
|
||||
emit(event, ...args) {
|
||||
// 执行该事件的所有监听器
|
||||
(this.events[event] || []).forEach(listener => listener(...args));
|
||||
return this;
|
||||
}
|
||||
|
||||
// 一次性订阅，触发后自动取消
|
||||
once(event, listener) {
|
||||
const wrapper = (...args) => {
|
||||
listener(...args);
|
||||
this.off(event, wrapper);
|
||||
listener(...args); // 执行原始监听器
|
||||
this.off(event, wrapper); // 立即取消订阅
|
||||
};
|
||||
return this.on(event, wrapper);
|
||||
}
|
||||
|
||||
@ -6,20 +6,20 @@
|
||||
> **解决**：数据列表中存在重复项影响展示或数据处理的问题。
|
||||
|
||||
```js
|
||||
// 方法1: Set
|
||||
// 方法1: Set 自动去重，最简洁
|
||||
const unique1 = arr => [...new Set(arr)];
|
||||
|
||||
// 方法2: filter + indexOf
|
||||
// 方法2: filter + indexOf，只保留第一次出现的元素
|
||||
const unique2 = arr => arr.filter((v, i) => arr.indexOf(v) === i);
|
||||
|
||||
// 方法3: reduce
|
||||
// 方法3: reduce 累加，不存在才添加
|
||||
const unique3 = arr => arr.reduce((acc, v) => acc.includes(v) ? acc : [...acc, v], []);
|
||||
|
||||
// 方法4: 对象数组按属性去重
|
||||
const uniqueByKey = (arr, key) => {
|
||||
const map = new Map();
|
||||
const map = new Map(); // 用 Map 存储已出现的 key
|
||||
arr.forEach(item => !map.has(item[key]) && map.set(item[key], item));
|
||||
return [...map.values()];
|
||||
return [...map.values()]; // 返回去重后的值
|
||||
};
|
||||
```
|
||||
|
||||
@ -29,28 +29,30 @@ const uniqueByKey = (arr, key) => {
|
||||
> **解决**：嵌套数组不便于遍历、查找和渲染的问题。
|
||||
|
||||
```js
|
||||
// 递归实现
|
||||
// 递归实现：支持指定展开深度
|
||||
function flatten(arr, depth = Infinity) {
|
||||
return arr.reduce((acc, val) => {
|
||||
// 如果是数组且深度>0，递归展开
|
||||
return acc.concat(
|
||||
Array.isArray(val) && depth > 0 ? flatten(val, depth - 1) : val
|
||||
);
|
||||
}, []);
|
||||
}
|
||||
|
||||
// 迭代实现（使用栈）
|
||||
// 迭代实现（使用栈）：避免递归栈溢出
|
||||
function flattenIterative(arr) {
|
||||
const stack = [...arr];
|
||||
const stack = [...arr]; // 复制数组作为栈
|
||||
const result = [];
|
||||
while (stack.length) {
|
||||
const item = stack.pop();
|
||||
const item = stack.pop(); // 从栈顶取出
|
||||
// 是数组则展开压回栈，否则加入结果
|
||||
Array.isArray(item) ? stack.push(...item) : result.unshift(item);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
// 原生方法
|
||||
arr.flat(Infinity);
|
||||
// 原生方法（ES2019+）
|
||||
arr.flat(Infinity); // Infinity 表示完全展开
|
||||
```
|
||||
|
||||
## 3. 字符串反转
|
||||
@ -59,9 +61,10 @@ arr.flat(Infinity);
|
||||
> **解决**：JS 没有内置字符串反转方法，需要手工实现。
|
||||
|
||||
```js
|
||||
// 方法1：拆分成数组 -> 反转 -> 拼接
|
||||
const reverse = str => str.split('').reverse().join('');
|
||||
|
||||
// 或者使用扩展运算符
|
||||
// 方法2：使用扩展运算符（支持 Unicode 字符）
|
||||
const reverse2 = str => [...str].reverse().join('');
|
||||
```
|
||||
|
||||
@ -71,16 +74,19 @@ const reverse2 = str => [...str].reverse().join('');
|
||||
> **解决**：判断字符串正反读是否一致，常作为算法题输入校验或中间步骤。
|
||||
|
||||
```js
|
||||
// 方法1：清理后比较反转结果
|
||||
const isPalindrome = str => {
|
||||
// 转小写并去除非字母数字字符
|
||||
const clean = str.toLowerCase().replace(/[^a-z0-9]/g, '');
|
||||
return clean === clean.split('').reverse().join('');
|
||||
};
|
||||
|
||||
// 双指针法
|
||||
// 方法2：双指针法（性能更优）
|
||||
const isPalindrome2 = str => {
|
||||
const s = str.toLowerCase().replace(/[^a-z0-9]/g, '');
|
||||
let left = 0, right = s.length - 1;
|
||||
while (left < right) {
|
||||
// 从两端向中间比较
|
||||
if (s[left++] !== s[right--]) return false;
|
||||
}
|
||||
return true;
|
||||
@ -96,11 +102,12 @@ const isPalindrome2 = str => {
|
||||
function longestCommonPrefix(strs) {
|
||||
if (!strs.length) return '';
|
||||
|
||||
let prefix = strs[0];
|
||||
let prefix = strs[0]; // 以第一个字符串为初始前缀
|
||||
for (let i = 1; i < strs.length; i++) {
|
||||
// 逐步缩短前缀，直到它是当前字符串的前缀
|
||||
while (strs[i].indexOf(prefix) !== 0) {
|
||||
prefix = prefix.slice(0, -1);
|
||||
if (!prefix) return '';
|
||||
prefix = prefix.slice(0, -1); // 去掉最后一个字符
|
||||
if (!prefix) return ''; // 前缀为空，无公共前缀
|
||||
}
|
||||
}
|
||||
return prefix;
|
||||
@ -115,19 +122,21 @@ function longestCommonPrefix(strs) {
|
||||
> **解决**：将模板字符串中的占位符替换为实际数据，类似 Mustache/Handlebars 语法。
|
||||
|
||||
```js
|
||||
// 基础版：支持 {{key}} 语法
|
||||
function render(template, data) {
|
||||
// \{\{(\w+)\}\} 匹配 {{xxx}}，\w+ 捕获 key
|
||||
return template.replace(/\{\{(\w+)\}\}/g, (match, key) => {
|
||||
return data[key] !== undefined ? data[key] : match;
|
||||
return data[key] !== undefined ? data[key] : match; // 无值则保留原样
|
||||
});
|
||||
}
|
||||
|
||||
// 支持嵌套属性
|
||||
// 进阶版：支持嵌套属性 {{a.b.c}}
|
||||
function renderDeep(template, data) {
|
||||
return template.replace(/\{\{(.+?)\}\}/g, (match, path) => {
|
||||
const keys = path.trim().split('.');
|
||||
const keys = path.trim().split('.'); // 按 . 拆分路径
|
||||
let value = data;
|
||||
for (const key of keys) {
|
||||
value = value?.[key];
|
||||
value = value?.[key]; // 逐层取值，可选链防止报错
|
||||
if (value === undefined) return match;
|
||||
}
|
||||
return value;
|
||||
@ -146,13 +155,15 @@ renderDeep('{{user.info.name}}', { user: { info: { name: 'Tom' } } }); // "Tom"
|
||||
|
||||
```js
|
||||
function uniqueAndSort(arr, key, sortKey, order = 'asc') {
|
||||
// 去重
|
||||
// 第一步：按指定 key 去重
|
||||
const map = new Map();
|
||||
arr.forEach(item => !map.has(item[key]) && map.set(item[key], item));
|
||||
|
||||
// 排序
|
||||
// 第二步：按指定 sortKey 排序
|
||||
return [...map.values()].sort((a, b) => {
|
||||
return order === 'asc' ? a[sortKey] - b[sortKey] : b[sortKey] - a[sortKey];
|
||||
return order === 'asc'
|
||||
? a[sortKey] - b[sortKey] // 升序
|
||||
: b[sortKey] - a[sortKey]; // 降序
|
||||
});
|
||||
}
|
||||
|
||||
@ -160,7 +171,7 @@ function uniqueAndSort(arr, key, sortKey, order = 'asc') {
|
||||
const users = [
|
||||
{ id: 1, name: 'Tom', age: 20 },
|
||||
{ id: 2, name: 'Jerry', age: 18 },
|
||||
{ id: 1, name: 'Tom2', age: 25 }
|
||||
{ id: 1, name: 'Tom2', age: 25 } // id 重复，会被过滤
|
||||
];
|
||||
uniqueAndSort(users, 'id', 'age'); // 按id去重，按age升序排序
|
||||
uniqueAndSort(users, 'id', 'age'); // 按 id 去重，按 age 升序排序
|
||||
```
|
||||
|
||||
@ -9,28 +9,29 @@
|
||||
|
||||
```js
|
||||
function reverseList(head) {
|
||||
let prev = null, curr = head;
|
||||
let prev = null, curr = head; // prev 记录前一个节点
|
||||
while (curr) {
|
||||
const next = curr.next;
|
||||
curr.next = prev;
|
||||
prev = curr;
|
||||
curr = next;
|
||||
const next = curr.next; // 暂存下一个节点
|
||||
curr.next = prev; // 将当前节点指向前一个（反转）
|
||||
prev = curr; // prev 前移
|
||||
curr = next; // curr 前移
|
||||
}
|
||||
return prev;
|
||||
return prev; // prev 就是新的头节点
|
||||
}
|
||||
```
|
||||
|
||||
### 环形链表判断
|
||||
|
||||
```js
|
||||
// 快慢指针法：如果有环，快指针一定会追上慢指针
|
||||
function hasCycle(head) {
|
||||
let slow = head, fast = head;
|
||||
while (fast?.next) {
|
||||
slow = slow.next;
|
||||
fast = fast.next.next;
|
||||
if (slow === fast) return true;
|
||||
let slow = head, fast = head; // 两指针都从头开始
|
||||
while (fast?.next) { // fast 能继续走两步
|
||||
slow = slow.next; // 慢指针走一步
|
||||
fast = fast.next.next; // 快指针走两步
|
||||
if (slow === fast) return true; // 相遇说明有环
|
||||
}
|
||||
return false;
|
||||
return false; // fast 走到结尾，无环
|
||||
}
|
||||
```
|
||||
|
||||
@ -38,20 +39,20 @@ function hasCycle(head) {
|
||||
|
||||
```js
|
||||
function mergeTwoLists(l1, l2) {
|
||||
const dummy = { next: null };
|
||||
const dummy = { next: null }; // 哑节点，简化处理
|
||||
let curr = dummy;
|
||||
while (l1 && l2) {
|
||||
while (l1 && l2) { // 两个链表都有剩余节点
|
||||
if (l1.val <= l2.val) {
|
||||
curr.next = l1;
|
||||
curr.next = l1; // 取较小的节点
|
||||
l1 = l1.next;
|
||||
} else {
|
||||
curr.next = l2;
|
||||
l2 = l2.next;
|
||||
}
|
||||
curr = curr.next;
|
||||
curr = curr.next; // 移动当前指针
|
||||
}
|
||||
curr.next = l1 || l2;
|
||||
return dummy.next;
|
||||
curr.next = l1 || l2; // 接上剩余部分
|
||||
return dummy.next; // 返回哑节点的下一个即真正头节点
|
||||
}
|
||||
```
|
||||
|
||||
@ -65,30 +66,30 @@ function mergeTwoLists(l1, l2) {
|
||||
### 遍历（前中后序）
|
||||
|
||||
```js
|
||||
// 前序：根-左-右
|
||||
// 前序遍历：根 -> 左 -> 右（先访问根节点）
|
||||
const preorder = (root, res = []) => {
|
||||
if (!root) return res;
|
||||
res.push(root.val);
|
||||
preorder(root.left, res);
|
||||
preorder(root.right, res);
|
||||
res.push(root.val); // 访问根
|
||||
preorder(root.left, res); // 递归左子树
|
||||
preorder(root.right, res); // 递归右子树
|
||||
return res;
|
||||
};
|
||||
|
||||
// 中序：左-根-右
|
||||
// 中序遍历：左 -> 根 -> 右（二叉搜索树得到有序数组）
|
||||
const inorder = (root, res = []) => {
|
||||
if (!root) return res;
|
||||
inorder(root.left, res);
|
||||
res.push(root.val);
|
||||
inorder(root.right, res);
|
||||
inorder(root.left, res); // 先左
|
||||
res.push(root.val); // 再根
|
||||
inorder(root.right, res); // 后右
|
||||
return res;
|
||||
};
|
||||
|
||||
// 后序：左-右-根
|
||||
// 后序遍历：左 -> 右 -> 根（常用于删除操作）
|
||||
const postorder = (root, res = []) => {
|
||||
if (!root) return res;
|
||||
postorder(root.left, res);
|
||||
postorder(root.right, res);
|
||||
res.push(root.val);
|
||||
postorder(root.left, res); // 先左
|
||||
postorder(root.right, res); // 再右
|
||||
res.push(root.val); // 最后根
|
||||
return res;
|
||||
};
|
||||
```
|
||||
@ -96,8 +97,9 @@ const postorder = (root, res = []) => {
|
||||
### 求最大深度
|
||||
|
||||
```js
|
||||
// 递归求最大深度：左右子树深度的较大值 + 1
|
||||
const maxDepth = root => {
|
||||
if (!root) return 0;
|
||||
if (!root) return 0; // 空节点深度为 0
|
||||
return 1 + Math.max(maxDepth(root.left), maxDepth(root.right));
|
||||
};
|
||||
```
|
||||
@ -105,9 +107,12 @@ const maxDepth = root => {
|
||||
### 路径和
|
||||
|
||||
```js
|
||||
// 判断是否存在根到叶子的路径，使得路径上所有节点值之和等于目标值
|
||||
function hasPathSum(root, targetSum) {
|
||||
if (!root) return false;
|
||||
// 叶子节点：检查剩余值是否等于当前节点值
|
||||
if (!root.left && !root.right) return targetSum === root.val;
|
||||
// 递归检查左右子树，目标值减去当前节点值
|
||||
return hasPathSum(root.left, targetSum - root.val)
|
||||
|| hasPathSum(root.right, targetSum - root.val);
|
||||
}
|
||||
@ -123,14 +128,17 @@ function hasPathSum(root, targetSum) {
|
||||
### 用栈实现队列
|
||||
|
||||
```js
|
||||
// 使用两个栈实现队列：入栈和出栈
|
||||
class MyQueue {
|
||||
constructor() {
|
||||
this.inStack = [];
|
||||
this.outStack = [];
|
||||
this.inStack = []; // 入队栈
|
||||
this.outStack = []; // 出队栈
|
||||
}
|
||||
|
||||
// 入队：直接压入 inStack
|
||||
push(x) { this.inStack.push(x); }
|
||||
|
||||
// 出队：从 outStack 取，如果空则把 inStack 全部倒入 outStack
|
||||
pop() {
|
||||
if (!this.outStack.length) {
|
||||
while (this.inStack.length) this.outStack.push(this.inStack.pop());
|
||||
@ -138,6 +146,7 @@ class MyQueue {
|
||||
return this.outStack.pop();
|
||||
}
|
||||
|
||||
// 查看队首：同 pop 逻辑，但不弹出
|
||||
peek() {
|
||||
if (!this.outStack.length) {
|
||||
while (this.inStack.length) this.outStack.push(this.inStack.pop());
|
||||
@ -145,6 +154,7 @@ class MyQueue {
|
||||
return this.outStack[this.outStack.length - 1];
|
||||
}
|
||||
|
||||
// 判断是否为空
|
||||
empty() { return !this.inStack.length && !this.outStack.length; }
|
||||
}
|
||||
```
|
||||
@ -153,16 +163,18 @@ class MyQueue {
|
||||
|
||||
```js
|
||||
function isValid(s) {
|
||||
// 右括号到左括号的映射
|
||||
const map = { ')': '(', ']': '[', '}': '{' };
|
||||
const stack = [];
|
||||
for (const c of s) {
|
||||
if (map[c]) {
|
||||
if (map[c]) { // 如果是右括号
|
||||
// 栈顶必须是对应的左括号
|
||||
if (stack.pop() !== map[c]) return false;
|
||||
} else {
|
||||
stack.push(c);
|
||||
stack.push(c); // 左括号入栈
|
||||
}
|
||||
}
|
||||
return !stack.length;
|
||||
return !stack.length; // 栈必须为空才有效
|
||||
}
|
||||
```
|
||||
|
||||
@ -176,12 +188,13 @@ function isValid(s) {
|
||||
### 两数之和
|
||||
|
||||
```js
|
||||
// 用哈希表存储已遍历的数字及其索引
|
||||
function twoSum(nums, target) {
|
||||
const map = new Map();
|
||||
for (let i = 0; i < nums.length; i++) {
|
||||
const diff = target - nums[i];
|
||||
if (map.has(diff)) return [map.get(diff), i];
|
||||
map.set(nums[i], i);
|
||||
const diff = target - nums[i]; // 计算需要的配对数字
|
||||
if (map.has(diff)) return [map.get(diff), i]; // 找到则返回两个索引
|
||||
map.set(nums[i], i); // 存储当前数字和索引
|
||||
}
|
||||
return [];
|
||||
}
|
||||
@ -190,13 +203,14 @@ function twoSum(nums, target) {
|
||||
### 字母异位词分组
|
||||
|
||||
```js
|
||||
// 异位词排序后结果相同，以此为 key 分组
|
||||
function groupAnagrams(strs) {
|
||||
const map = new Map();
|
||||
for (const s of strs) {
|
||||
const key = [...s].sort().join('');
|
||||
map.set(key, (map.get(key) || []).concat(s));
|
||||
const key = [...s].sort().join(''); // 排序后作为 key
|
||||
map.set(key, (map.get(key) || []).concat(s)); // 加入对应分组
|
||||
}
|
||||
return [...map.values()];
|
||||
return [...map.values()]; // 返回所有分组
|
||||
}
|
||||
```
|
||||
|
||||
@ -210,12 +224,14 @@ function groupAnagrams(strs) {
|
||||
### 快速排序
|
||||
|
||||
```js
|
||||
// 快速排序：分治思想，选取基准值分区
|
||||
function quickSort(arr) {
|
||||
if (arr.length <= 1) return arr;
|
||||
const pivot = arr[Math.floor(arr.length / 2)];
|
||||
const left = arr.filter(x => x < pivot);
|
||||
const middle = arr.filter(x => x === pivot);
|
||||
const right = arr.filter(x => x > pivot);
|
||||
if (arr.length <= 1) return arr; // 基准情况
|
||||
const pivot = arr[Math.floor(arr.length / 2)]; // 选取中间元素为基准值
|
||||
const left = arr.filter(x => x < pivot); // 小于基准值
|
||||
const middle = arr.filter(x => x === pivot); // 等于基准值
|
||||
const right = arr.filter(x => x > pivot); // 大于基准值
|
||||
// 递归排序左右部分，合并结果
|
||||
return [...quickSort(left), ...middle, ...quickSort(right)];
|
||||
}
|
||||
```
|
||||
@ -223,20 +239,24 @@ function quickSort(arr) {
|
||||
### 归并排序
|
||||
|
||||
```js
|
||||
// 归并排序：分治思想，先拆分再合并
|
||||
function mergeSort(arr) {
|
||||
if (arr.length <= 1) return arr;
|
||||
const mid = Math.floor(arr.length / 2);
|
||||
const left = mergeSort(arr.slice(0, mid));
|
||||
const right = mergeSort(arr.slice(mid));
|
||||
return merge(left, right);
|
||||
const left = mergeSort(arr.slice(0, mid)); // 递归排序左半部分
|
||||
const right = mergeSort(arr.slice(mid)); // 递归排序右半部分
|
||||
return merge(left, right); // 合并两个有序数组
|
||||
}
|
||||
|
||||
// 合并两个有序数组
|
||||
function merge(left, right) {
|
||||
const result = [];
|
||||
let i = 0, j = 0;
|
||||
// 双指针比较，取较小的元素
|
||||
while (i < left.length && j < right.length) {
|
||||
result.push(left[i] < right[j] ? left[i++] : right[j++]);
|
||||
}
|
||||
// 拼接剩余部分
|
||||
return result.concat(left.slice(i), right.slice(j));
|
||||
}
|
||||
```
|
||||
@ -251,32 +271,36 @@ function merge(left, right) {
|
||||
### 基础二分查找
|
||||
|
||||
```js
|
||||
// 标准二分查找：在有序数组中查找目标值
|
||||
function binarySearch(arr, target) {
|
||||
let left = 0, right = arr.length - 1;
|
||||
while (left <= right) {
|
||||
const mid = Math.floor((left + right) / 2);
|
||||
if (arr[mid] === target) return mid;
|
||||
const mid = Math.floor((left + right) / 2); // 计算中间位置
|
||||
if (arr[mid] === target) return mid; // 找到目标
|
||||
// 根据大小关系缩小范围
|
||||
arr[mid] < target ? (left = mid + 1) : (right = mid - 1);
|
||||
}
|
||||
return -1;
|
||||
return -1; // 未找到
|
||||
}
|
||||
```
|
||||
|
||||
### 旋转数组查找
|
||||
|
||||
```js
|
||||
// 旋转数组查找：数组被旋转过，如 [4,5,6,7,0,1,2]
|
||||
function searchRotated(nums, target) {
|
||||
let left = 0, right = nums.length - 1;
|
||||
while (left <= right) {
|
||||
const mid = Math.floor((left + right) / 2);
|
||||
if (nums[mid] === target) return mid;
|
||||
|
||||
// 左半边有序
|
||||
if (nums[left] <= nums[mid]) {
|
||||
// 判断哪一半是有序的
|
||||
if (nums[left] <= nums[mid]) { // 左半边有序
|
||||
// target 在左半边有序区间内
|
||||
if (target >= nums[left] && target < nums[mid]) right = mid - 1;
|
||||
else left = mid + 1;
|
||||
} else {
|
||||
// 右半边有序
|
||||
} else { // 右半边有序
|
||||
// target 在右半边有序区间内
|
||||
if (target > nums[mid] && target <= nums[right]) left = mid + 1;
|
||||
else right = mid - 1;
|
||||
}
|
||||
@ -297,8 +321,8 @@ function searchRotated(nums, target) {
|
||||
```js
|
||||
// 时间复杂度 O(2^n)，存在大量重复计算
|
||||
function fib(n) {
|
||||
if (n <= 1) return n;
|
||||
return fib(n - 1) + fib(n - 2);
|
||||
if (n <= 1) return n; // 基准情况：F(0)=0, F(1)=1
|
||||
return fib(n - 1) + fib(n - 2); // 递归调用
|
||||
}
|
||||
```
|
||||
|
||||
@ -308,8 +332,8 @@ function fib(n) {
|
||||
// 时间复杂度 O(n)，空间复杂度 O(n)
|
||||
function fib(n, memo = {}) {
|
||||
if (n <= 1) return n;
|
||||
if (memo[n]) return memo[n];
|
||||
return memo[n] = fib(n - 1, memo) + fib(n - 2, memo);
|
||||
if (memo[n]) return memo[n]; // 已计算过，直接返回缓存
|
||||
return memo[n] = fib(n - 1, memo) + fib(n - 2, memo); // 计算并缓存
|
||||
}
|
||||
```
|
||||
|
||||
@ -319,9 +343,9 @@ function fib(n, memo = {}) {
|
||||
// 时间复杂度 O(n)，空间复杂度 O(n)
|
||||
function fib(n) {
|
||||
if (n <= 1) return n;
|
||||
const dp = [0, 1];
|
||||
const dp = [0, 1]; // dp[i] 表示第 i 位斐波那契数
|
||||
for (let i = 2; i <= n; i++) {
|
||||
dp[i] = dp[i - 1] + dp[i - 2];
|
||||
dp[i] = dp[i - 1] + dp[i - 2]; // 状态转移方程
|
||||
}
|
||||
return dp[n];
|
||||
}
|
||||
@ -333,9 +357,9 @@ function fib(n) {
|
||||
// 时间复杂度 O(n)，空间复杂度 O(1)
|
||||
function fib(n) {
|
||||
if (n <= 1) return n;
|
||||
let prev = 0, curr = 1;
|
||||
let prev = 0, curr = 1; // 只保留前两个值
|
||||
for (let i = 2; i <= n; i++) {
|
||||
[prev, curr] = [curr, prev + curr];
|
||||
[prev, curr] = [curr, prev + curr]; // 滚动更新
|
||||
}
|
||||
return curr;
|
||||
}
|
||||
@ -345,26 +369,30 @@ function fib(n) {
|
||||
|
||||
```js
|
||||
// 时间复杂度 O(log n)，适合求极大位数
|
||||
// 原理：|F(n) | |1 1|^(n-1) |F(1)|
|
||||
// |F(n-1)| = |1 0| * |F(0)|
|
||||
function fib(n) {
|
||||
if (n <= 1) return n;
|
||||
|
||||
// 2x2 矩阵乘法
|
||||
const multiply = (a, b) => [
|
||||
[a[0][0] * b[0][0] + a[0][1] * b[1][0], a[0][0] * b[0][1] + a[0][1] * b[1][1]],
|
||||
[a[1][0] * b[0][0] + a[1][1] * b[1][0], a[1][0] * b[0][1] + a[1][1] * b[1][1]]
|
||||
];
|
||||
|
||||
// 快速幂：计算 m^p
|
||||
const power = (m, p) => {
|
||||
let result = [[1, 0], [0, 1]]; // 单位矩阵
|
||||
while (p > 0) {
|
||||
if (p & 1) result = multiply(result, m);
|
||||
m = multiply(m, m);
|
||||
p >>= 1;
|
||||
if (p & 1) result = multiply(result, m); // 奇数幂则乘一次
|
||||
m = multiply(m, m); // 底数平方
|
||||
p >>= 1; // 指数减半
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
const matrix = [[1, 1], [1, 0]];
|
||||
return power(matrix, n - 1)[0][0];
|
||||
return power(matrix, n - 1)[0][0]; // 结果在左上角
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -7,28 +7,30 @@
|
||||
|
||||
```js
|
||||
async function limitConcurrency(tasks, limit) {
|
||||
const results = [];
|
||||
const executing = [];
|
||||
const results = []; // 存储所有任务结果
|
||||
const executing = []; // 当前正在执行的任务
|
||||
|
||||
for (const [index, task] of tasks.entries()) {
|
||||
// 包装任务为 Promise
|
||||
const p = Promise.resolve().then(() => task()).then(res => {
|
||||
results[index] = res;
|
||||
executing.splice(executing.indexOf(p), 1);
|
||||
results[index] = res; // 存储结果，保证顺序
|
||||
executing.splice(executing.indexOf(p), 1); // 完成后从执行列表移除
|
||||
});
|
||||
executing.push(p);
|
||||
|
||||
// 如果达到并发上限，等待任一任务完成
|
||||
if (executing.length >= limit) {
|
||||
await Promise.race(executing);
|
||||
}
|
||||
}
|
||||
|
||||
await Promise.all(executing);
|
||||
await Promise.all(executing); // 等待剩余任务完成
|
||||
return results;
|
||||
}
|
||||
|
||||
// 使用示例
|
||||
// 使用示例：批量请求，最多 3 个并发
|
||||
const tasks = urls.map(url => () => fetch(url));
|
||||
await limitConcurrency(tasks, 3); // 最多3个并发
|
||||
await limitConcurrency(tasks, 3);
|
||||
```
|
||||
|
||||
### 异步任务调度器
|
||||
@ -36,25 +38,29 @@ await limitConcurrency(tasks, 3); // 最多3个并发
|
||||
```js
|
||||
class Scheduler {
|
||||
constructor(limit) {
|
||||
this.limit = limit;
|
||||
this.queue = [];
|
||||
this.running = 0;
|
||||
this.limit = limit; // 最大并发数
|
||||
this.queue = []; // 等待队列
|
||||
this.running = 0; // 当前运行中的任务数
|
||||
}
|
||||
|
||||
// 添加任务，返回 Promise
|
||||
add(promiseCreator) {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 将任务和对应的 resolve/reject 存入队列
|
||||
this.queue.push({ promiseCreator, resolve, reject });
|
||||
this.run();
|
||||
this.run(); // 尝试执行
|
||||
});
|
||||
}
|
||||
|
||||
// 执行队列中的任务
|
||||
run() {
|
||||
// 未达上限且队列有任务时，取出执行
|
||||
while (this.running < this.limit && this.queue.length) {
|
||||
const { promiseCreator, resolve, reject } = this.queue.shift();
|
||||
this.running++;
|
||||
promiseCreator()
|
||||
.then(resolve, reject)
|
||||
.finally(() => { this.running--; this.run(); });
|
||||
.finally(() => { this.running--; this.run(); }); // 完成后继续执行下一个
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -68,28 +74,30 @@ class Scheduler {
|
||||
> **解决**：相同输入重复计算浪费性能，用空间换时间。
|
||||
|
||||
```js
|
||||
// 基础版：永久缓存
|
||||
function memoize(fn) {
|
||||
const cache = new Map();
|
||||
const cache = new Map(); // 缓存存储
|
||||
return function(...args) {
|
||||
const key = JSON.stringify(args);
|
||||
if (cache.has(key)) return cache.get(key);
|
||||
const result = fn.apply(this, args);
|
||||
cache.set(key, result);
|
||||
const key = JSON.stringify(args); // 参数序列化作为 key
|
||||
if (cache.has(key)) return cache.get(key); // 命中缓存
|
||||
const result = fn.apply(this, args); // 执行原函数
|
||||
cache.set(key, result); // 存入缓存
|
||||
return result;
|
||||
};
|
||||
}
|
||||
|
||||
// 支持过期时间
|
||||
// 进阶版：支持过期时间 TTL
|
||||
function memoizeWithTTL(fn, ttl = 60000) {
|
||||
const cache = new Map();
|
||||
return function(...args) {
|
||||
const key = JSON.stringify(args);
|
||||
const cached = cache.get(key);
|
||||
// 检查缓存是否存在且未过期
|
||||
if (cached && Date.now() - cached.time < ttl) {
|
||||
return cached.value;
|
||||
}
|
||||
const result = fn.apply(this, args);
|
||||
cache.set(key, { value: result, time: Date.now() });
|
||||
cache.set(key, { value: result, time: Date.now() }); // 存储值和时间戳
|
||||
return result;
|
||||
};
|
||||
}
|
||||
@ -103,11 +111,13 @@ function memoizeWithTTL(fn, ttl = 60000) {
|
||||
> **解决**：将 URL 查询字符串转换为结构化对象，方便业务使用。
|
||||
|
||||
```js
|
||||
// 方法1：字符串分割法
|
||||
function parseQuery(url) {
|
||||
const query = url.split('?')[1] || '';
|
||||
const query = url.split('?')[1] || ''; // 取 ? 后的部分
|
||||
return query.split('&').reduce((acc, pair) => {
|
||||
const [key, value] = pair.split('=').map(decodeURIComponent);
|
||||
const [key, value] = pair.split('=').map(decodeURIComponent); // 解码
|
||||
if (key) {
|
||||
// 处理重复 key：转为数组
|
||||
acc[key] = acc[key]
|
||||
? [].concat(acc[key], value)
|
||||
: value;
|
||||
@ -116,9 +126,10 @@ function parseQuery(url) {
|
||||
}, {});
|
||||
}
|
||||
|
||||
// 使用正则
|
||||
// 方法2：正则表达式
|
||||
function parseQueryRegex(url) {
|
||||
const result = {};
|
||||
// 匹配 ?key=value 或 &key=value
|
||||
url.replace(/[?&]([^=&#]+)=([^&#]*)/g, (_, key, value) => {
|
||||
result[decodeURIComponent(key)] = decodeURIComponent(value);
|
||||
});
|
||||
@ -126,7 +137,7 @@ function parseQueryRegex(url) {
|
||||
}
|
||||
|
||||
// 示例: "https://example.com?a=1&b=2&a=3"
|
||||
// => { a: ['1', '3'], b: '2' }
|
||||
// => { a: ['1', '3'], b: '2' } // a 有两个值
|
||||
```
|
||||
|
||||
---
|
||||
@ -138,23 +149,23 @@ function parseQueryRegex(url) {
|
||||
|
||||
```js
|
||||
function findCommonAncestor(node1, node2) {
|
||||
const ancestors = new Set();
|
||||
const ancestors = new Set(); // 存储 node1 的所有祖先
|
||||
|
||||
// 收集 node1 的所有祖先
|
||||
// 第一步：收集 node1 的所有祖先节点
|
||||
let current = node1;
|
||||
while (current) {
|
||||
ancestors.add(current);
|
||||
current = current.parentNode;
|
||||
}
|
||||
|
||||
// 查找 node2 的祖先中第一个在 ancestors 中的节点
|
||||
// 第二步：遍历 node2 的祖先，找第一个在 ancestors 中的
|
||||
current = node2;
|
||||
while (current) {
|
||||
if (ancestors.has(current)) return current;
|
||||
if (ancestors.has(current)) return current; // 找到公共祖先
|
||||
current = current.parentNode;
|
||||
}
|
||||
|
||||
return null;
|
||||
return null; // 无公共祖先
|
||||
}
|
||||
|
||||
// 原生方法（现代浏览器）
|
||||
@ -169,31 +180,32 @@ function findCommonAncestor(node1, node2) {
|
||||
> **解决**：首屏加载慢、一次性加载大量数据卡顿的问题。
|
||||
|
||||
```js
|
||||
// IntersectionObserver 实现懒加载
|
||||
// 使用 IntersectionObserver 实现懒加载
|
||||
function lazyLoad(selector) {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
if (entry.isIntersecting) { // 元素进入可视区域
|
||||
const img = entry.target;
|
||||
img.src = img.dataset.src;
|
||||
observer.unobserve(img);
|
||||
img.src = img.dataset.src; // 将 data-src 赋值给 src
|
||||
observer.unobserve(img); // 停止观察该元素
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 观察所有带指定选择器的图片
|
||||
document.querySelectorAll(selector).forEach(img => observer.observe(img));
|
||||
}
|
||||
|
||||
// 无限滚动
|
||||
// 无限滚动：滚动到底部时加载更多
|
||||
function infiniteScroll(container, loadMore) {
|
||||
const observer = new IntersectionObserver(([entry]) => {
|
||||
if (entry.isIntersecting) loadMore();
|
||||
if (entry.isIntersecting) loadMore(); // 触底则加载更多
|
||||
});
|
||||
|
||||
// 监听底部占位元素
|
||||
// 创建底部哨兵元素
|
||||
const sentinel = document.createElement('div');
|
||||
container.appendChild(sentinel);
|
||||
observer.observe(sentinel);
|
||||
observer.observe(sentinel); // 观察哨兵元素
|
||||
}
|
||||
```
|
||||
|
||||
@ -205,24 +217,28 @@ function infiniteScroll(container, loadMore) {
|
||||
> **解决**：内存有限时如何淘汰最久未使用的数据，保留热点数据。
|
||||
|
||||
```js
|
||||
// LRU (Least Recently Used) 最近最少使用缓存
|
||||
// 利用 Map 的有序性：插入顺序即为访问顺序
|
||||
class LRUCache {
|
||||
constructor(capacity) {
|
||||
this.capacity = capacity;
|
||||
this.cache = new Map();
|
||||
this.capacity = capacity; // 最大容量
|
||||
this.cache = new Map(); // Map 保持插入顺序
|
||||
}
|
||||
|
||||
get(key) {
|
||||
if (!this.cache.has(key)) return -1;
|
||||
const value = this.cache.get(key);
|
||||
// 访问后移动到最后（标记为最近使用）
|
||||
this.cache.delete(key);
|
||||
this.cache.set(key, value);
|
||||
return value;
|
||||
}
|
||||
|
||||
put(key, value) {
|
||||
if (this.cache.has(key)) this.cache.delete(key);
|
||||
this.cache.set(key, value);
|
||||
if (this.cache.has(key)) this.cache.delete(key); // 已存在则先删除
|
||||
this.cache.set(key, value); // 重新插入到最后
|
||||
if (this.cache.size > this.capacity) {
|
||||
// 超出容量，删除最早插入的（Map 的第一个 key）
|
||||
this.cache.delete(this.cache.keys().next().value);
|
||||
}
|
||||
}
|
||||
@ -237,19 +253,21 @@ class LRUCache {
|
||||
> **解决**：JS 数字最大安全整数 2^53-1 限制，大数运算精度丢失问题。
|
||||
|
||||
```js
|
||||
// 模拟竖式加法，从个位开始相加
|
||||
function addBigNumbers(a, b) {
|
||||
const maxLen = Math.max(a.length, b.length);
|
||||
// 对齐长度，前面补 0
|
||||
a = a.padStart(maxLen, '0');
|
||||
b = b.padStart(maxLen, '0');
|
||||
|
||||
let carry = 0, result = '';
|
||||
let carry = 0, result = ''; // carry 进位
|
||||
for (let i = maxLen - 1; i >= 0; i--) {
|
||||
const sum = +a[i] + +b[i] + carry;
|
||||
result = (sum % 10) + result;
|
||||
carry = Math.floor(sum / 10);
|
||||
const sum = +a[i] + +b[i] + carry; // 当前位相加
|
||||
result = (sum % 10) + result; // 取个位数
|
||||
carry = Math.floor(sum / 10); // 计算进位
|
||||
}
|
||||
|
||||
return carry ? carry + result : result;
|
||||
return carry ? carry + result : result; // 最高位有进位则补上
|
||||
}
|
||||
|
||||
// 示例: addBigNumbers("12345678901234567890", "98765432109876543210")
|
||||
|
||||
@ -9,15 +9,15 @@
|
||||
|
||||
```js
|
||||
function diff(oldVNode, newVNode) {
|
||||
const patches = [];
|
||||
const patches = []; // 存储所有差异
|
||||
|
||||
// 节点不存在
|
||||
// 新节点不存在，删除老节点
|
||||
if (!newVNode) {
|
||||
patches.push({ type: 'REMOVE' });
|
||||
return patches;
|
||||
}
|
||||
|
||||
// 类型不同，替换节点
|
||||
// 类型不同或文本不同或标签不同，直接替换
|
||||
if (typeof oldVNode !== typeof newVNode ||
|
||||
(typeof oldVNode === 'string' && oldVNode !== newVNode) ||
|
||||
oldVNode.tag !== newVNode.tag) {
|
||||
@ -25,7 +25,7 @@ function diff(oldVNode, newVNode) {
|
||||
return patches;
|
||||
}
|
||||
|
||||
// 比较属性
|
||||
// 比较属性差异
|
||||
if (newVNode.props) {
|
||||
const propsPatches = diffProps(oldVNode.props || {}, newVNode.props);
|
||||
if (Object.keys(propsPatches).length) {
|
||||
@ -33,32 +33,35 @@ function diff(oldVNode, newVNode) {
|
||||
}
|
||||
}
|
||||
|
||||
// 比较子节点
|
||||
// 递归比较子节点
|
||||
diffChildren(oldVNode.children || [], newVNode.children || [], patches);
|
||||
|
||||
return patches;
|
||||
}
|
||||
|
||||
// 属性对比
|
||||
function diffProps(oldProps, newProps) {
|
||||
const patches = {};
|
||||
// 新增或修改的属性
|
||||
// 检查新增或修改的属性
|
||||
for (const key in newProps) {
|
||||
if (newProps[key] !== oldProps[key]) {
|
||||
patches[key] = newProps[key];
|
||||
}
|
||||
}
|
||||
// 删除的属性
|
||||
// 检查删除的属性
|
||||
for (const key in oldProps) {
|
||||
if (!(key in newProps)) {
|
||||
patches[key] = undefined;
|
||||
patches[key] = undefined; // 标记为删除
|
||||
}
|
||||
}
|
||||
return patches;
|
||||
}
|
||||
|
||||
// 子节点对比
|
||||
function diffChildren(oldChildren, newChildren, patches) {
|
||||
const len = Math.max(oldChildren.length, newChildren.length);
|
||||
for (let i = 0; i < len; i++) {
|
||||
// 递归对比每个子节点
|
||||
const childPatches = diff(oldChildren[i], newChildren[i]);
|
||||
if (childPatches.length) {
|
||||
patches.push({ type: 'CHILDREN', index: i, patches: childPatches });
|
||||
@ -77,34 +80,37 @@ function diffChildren(oldChildren, newChildren, patches) {
|
||||
### Vue 2 (Object.defineProperty)
|
||||
|
||||
```js
|
||||
// Vue 2 使用 Object.defineProperty 劫持 getter/setter
|
||||
function observe(obj) {
|
||||
if (typeof obj !== 'object' || obj === null) return;
|
||||
|
||||
Object.keys(obj).forEach(key => {
|
||||
let value = obj[key];
|
||||
const dep = new Set();
|
||||
const dep = new Set(); // 依赖收集器，存储依赖该属性的效果函数
|
||||
|
||||
observe(value); // 递归处理嵌套对象
|
||||
|
||||
Object.defineProperty(obj, key, {
|
||||
get() {
|
||||
// 读取时收集依赖
|
||||
if (currentEffect) dep.add(currentEffect);
|
||||
return value;
|
||||
},
|
||||
set(newVal) {
|
||||
if (newVal === value) return;
|
||||
if (newVal === value) return; // 值未变化则不触发
|
||||
value = newVal;
|
||||
observe(newVal);
|
||||
dep.forEach(fn => fn());
|
||||
observe(newVal); // 新值也要响应式化
|
||||
dep.forEach(fn => fn()); // 触发所有依赖更新
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
let currentEffect = null;
|
||||
// 注册副作用函数，自动追踪依赖
|
||||
function watchEffect(fn) {
|
||||
currentEffect = fn;
|
||||
fn();
|
||||
currentEffect = fn; // 设置当前执行的效果函数
|
||||
fn(); // 执行时触发 getter，完成依赖收集
|
||||
currentEffect = null;
|
||||
}
|
||||
```
|
||||
@ -112,42 +118,48 @@ function watchEffect(fn) {
|
||||
### Vue 3 (Proxy)
|
||||
|
||||
```js
|
||||
// Vue 3 使用 Proxy 代理对象
|
||||
function reactive(obj) {
|
||||
return new Proxy(obj, {
|
||||
get(target, key, receiver) {
|
||||
track(target, key);
|
||||
track(target, key); // 收集依赖
|
||||
const result = Reflect.get(target, key, receiver);
|
||||
// 嵌套对象也要转为响应式
|
||||
return typeof result === 'object' ? reactive(result) : result;
|
||||
},
|
||||
set(target, key, value, receiver) {
|
||||
const result = Reflect.set(target, key, value, receiver);
|
||||
trigger(target, key);
|
||||
trigger(target, key); // 触发更新
|
||||
return result;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 依赖存储结构：WeakMap<target, Map<key, Set<effect>>>
|
||||
const targetMap = new WeakMap();
|
||||
let activeEffect = null;
|
||||
|
||||
// 收集依赖
|
||||
function track(target, key) {
|
||||
if (!activeEffect) return;
|
||||
let depsMap = targetMap.get(target);
|
||||
if (!depsMap) targetMap.set(target, (depsMap = new Map()));
|
||||
let dep = depsMap.get(key);
|
||||
if (!dep) depsMap.set(key, (dep = new Set()));
|
||||
dep.add(activeEffect);
|
||||
dep.add(activeEffect); // 将当前效果函数加入依赖集合
|
||||
}
|
||||
|
||||
// 触发更新
|
||||
function trigger(target, key) {
|
||||
const depsMap = targetMap.get(target);
|
||||
if (!depsMap) return;
|
||||
depsMap.get(key)?.forEach(effect => effect());
|
||||
depsMap.get(key)?.forEach(effect => effect()); // 执行所有依赖的效果函数
|
||||
}
|
||||
|
||||
// 注册效果函数
|
||||
function effect(fn) {
|
||||
activeEffect = fn;
|
||||
fn();
|
||||
fn(); // 执行时触发 getter，完成依赖收集
|
||||
activeEffect = null;
|
||||
}
|
||||
```
|
||||
@ -160,26 +172,29 @@ function effect(fn) {
|
||||
> **解决**：函数组件无状态，通过闭包和数组模拟类组件的状态能力。
|
||||
|
||||
```js
|
||||
let state = [];
|
||||
let stateIndex = 0;
|
||||
let state = []; // 全局状态数组
|
||||
let stateIndex = 0; // 当前状态索引
|
||||
|
||||
function useState(initialValue) {
|
||||
const currentIndex = stateIndex;
|
||||
const currentIndex = stateIndex; // 闭包保存当前索引
|
||||
// 首次调用时初始化
|
||||
state[currentIndex] = state[currentIndex] ?? initialValue;
|
||||
|
||||
const setState = (newValue) => {
|
||||
// 支持函数式更新：setState(prev => prev + 1)
|
||||
state[currentIndex] = typeof newValue === 'function'
|
||||
? newValue(state[currentIndex])
|
||||
: newValue;
|
||||
render(); // 触发重新渲染
|
||||
};
|
||||
|
||||
stateIndex++;
|
||||
stateIndex++; // 下一个 useState 使用下一个索引
|
||||
return [state[currentIndex], setState];
|
||||
}
|
||||
|
||||
// 渲染函数：重置索引，重新执行组件
|
||||
function render() {
|
||||
stateIndex = 0; // 重置索引
|
||||
stateIndex = 0; // 重置索引，这就是为什么 Hooks 不能在条件语句中调用
|
||||
// 调用组件函数...
|
||||
}
|
||||
```
|
||||
@ -192,23 +207,24 @@ function render() {
|
||||
> **解决**：函数组件中处理生命周期和副作用，替代类组件的 componentDidMount 等。
|
||||
|
||||
```js
|
||||
let effectIndex = 0;
|
||||
let effects = [];
|
||||
let effectIndex = 0; // 当前 effect 索引
|
||||
let effects = []; // 存储所有 effect 信息
|
||||
|
||||
function useEffect(callback, deps) {
|
||||
const currentIndex = effectIndex;
|
||||
const prevDeps = effects[currentIndex]?.deps;
|
||||
const prevDeps = effects[currentIndex]?.deps; // 上次的依赖数组
|
||||
|
||||
// 判断依赖是否变化
|
||||
const hasChanged = !prevDeps ||
|
||||
deps.some((dep, i) => !Object.is(dep, prevDeps[i]));
|
||||
|
||||
if (hasChanged) {
|
||||
// 执行清理函数
|
||||
// 执行上次的清理函数
|
||||
effects[currentIndex]?.cleanup?.();
|
||||
|
||||
// 延迟执行 effect
|
||||
// 异步执行 effect（模拟 React 的行为）
|
||||
Promise.resolve().then(() => {
|
||||
const cleanup = callback();
|
||||
const cleanup = callback(); // 执行 effect，返回清理函数
|
||||
effects[currentIndex] = { deps, cleanup };
|
||||
});
|
||||
}
|
||||
@ -226,18 +242,22 @@ function useEffect(callback, deps) {
|
||||
|
||||
```js
|
||||
function createStore(reducer) {
|
||||
let state;
|
||||
const listeners = [];
|
||||
let state; // 应用状态
|
||||
const listeners = []; // 订阅的监听器列表
|
||||
|
||||
// 获取当前状态
|
||||
const getState = () => state;
|
||||
|
||||
// 发起 action，更新状态
|
||||
const dispatch = (action) => {
|
||||
state = reducer(state, action);
|
||||
listeners.forEach(listener => listener());
|
||||
state = reducer(state, action); // 通过 reducer 计算新状态
|
||||
listeners.forEach(listener => listener()); // 通知所有订阅者
|
||||
};
|
||||
|
||||
// 订阅状态变化
|
||||
const subscribe = (listener) => {
|
||||
listeners.push(listener);
|
||||
// 返回取消订阅函数
|
||||
return () => {
|
||||
const index = listeners.indexOf(listener);
|
||||
listeners.splice(index, 1);
|
||||
@ -249,12 +269,12 @@ function createStore(reducer) {
|
||||
return { getState, dispatch, subscribe };
|
||||
}
|
||||
|
||||
// 使用示例
|
||||
// 使用示例：计数器 reducer
|
||||
const reducer = (state = { count: 0 }, action) => {
|
||||
switch (action.type) {
|
||||
case 'INCREMENT': return { count: state.count + 1 };
|
||||
case 'DECREMENT': return { count: state.count - 1 };
|
||||
default: return state;
|
||||
default: return state; // 未知 action 返回原状态
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
@ -11,17 +11,18 @@
|
||||
function lazyLoadImages() {
|
||||
const observer = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
if (entry.isIntersecting) { // 图片进入可视区域
|
||||
const img = entry.target;
|
||||
img.src = img.dataset.src;
|
||||
img.src = img.dataset.src; // 加载真实图片
|
||||
img.classList.remove('lazy');
|
||||
observer.unobserve(img);
|
||||
observer.unobserve(img); // 加载完成后停止观察
|
||||
}
|
||||
});
|
||||
}, {
|
||||
rootMargin: '50px' // 提前50px开始加载
|
||||
rootMargin: '50px' // 提前 50px 开始加载，优化体验
|
||||
});
|
||||
|
||||
// 观察所有带 lazy 类的图片
|
||||
document.querySelectorAll('img.lazy').forEach(img => observer.observe(img));
|
||||
}
|
||||
|
||||
@ -34,17 +35,19 @@ function lazyLoadImages() {
|
||||
function lazyLoadScroll() {
|
||||
const lazyImages = document.querySelectorAll('img.lazy');
|
||||
|
||||
// 节流处理，避免频繁触发
|
||||
const loadImage = throttle(() => {
|
||||
lazyImages.forEach(img => {
|
||||
// 图片顶部进入视口下方 100px 范围内
|
||||
if (img.getBoundingClientRect().top < window.innerHeight + 100) {
|
||||
img.src = img.dataset.src;
|
||||
img.classList.remove('lazy');
|
||||
}
|
||||
});
|
||||
}, 200);
|
||||
}, 200); // 每 200ms 最多执行一次
|
||||
|
||||
window.addEventListener('scroll', loadImage);
|
||||
loadImage(); // 初始加载
|
||||
loadImage(); // 初始加载可见的图片
|
||||
}
|
||||
```
|
||||
|
||||
@ -134,16 +137,17 @@ new VirtualList({
|
||||
> **解决**：滚动事件每秒触发数十次，频繁执行回调导致页面卡顿。
|
||||
|
||||
```js
|
||||
// 节流函数
|
||||
// 节流函数：确保最后一次触发也会执行
|
||||
function throttle(fn, delay) {
|
||||
let lastTime = 0;
|
||||
let timer = null;
|
||||
let lastTime = 0; // 上次执行时间
|
||||
let timer = null; // 定时器 ID
|
||||
|
||||
return function(...args) {
|
||||
const now = Date.now();
|
||||
const remaining = delay - (now - lastTime);
|
||||
const remaining = delay - (now - lastTime); // 剩余等待时间
|
||||
|
||||
if (remaining <= 0) {
|
||||
// 已超过等待时间，立即执行
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
@ -151,6 +155,7 @@ function throttle(fn, delay) {
|
||||
lastTime = now;
|
||||
fn.apply(this, args);
|
||||
} else if (!timer) {
|
||||
// 未到时间且没有定时器，设置定时器保证最后一次执行
|
||||
timer = setTimeout(() => {
|
||||
lastTime = Date.now();
|
||||
timer = null;
|
||||
@ -160,11 +165,11 @@ function throttle(fn, delay) {
|
||||
};
|
||||
}
|
||||
|
||||
// 应用场景
|
||||
// 应用场景示例
|
||||
window.addEventListener('scroll', throttle(() => {
|
||||
console.log('滚动位置:', window.scrollY);
|
||||
// 吸顶效果、返回顶部按钮显示等
|
||||
}, 100));
|
||||
}, 100)); // 每 100ms 最多执行一次
|
||||
|
||||
window.addEventListener('resize', throttle(() => {
|
||||
console.log('窗口大小:', window.innerWidth, window.innerHeight);
|
||||
@ -179,31 +184,31 @@ window.addEventListener('resize', throttle(() => {
|
||||
> **解决**：setTimeout/setInterval 动画帧率不稳定，rAF 与屏幕刷新率同步，动画更流畅。
|
||||
|
||||
```js
|
||||
// 使用 rAF 实现平滑滚动
|
||||
// 使用 requestAnimationFrame 实现平滑滚动
|
||||
function smoothScrollTo(target, duration = 500) {
|
||||
const start = window.scrollY;
|
||||
const distance = target - start;
|
||||
const startTime = performance.now();
|
||||
const start = window.scrollY; // 起始位置
|
||||
const distance = target - start; // 滚动距离
|
||||
const startTime = performance.now(); // 高精度起始时间
|
||||
|
||||
function step(currentTime) {
|
||||
const elapsed = currentTime - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
const elapsed = currentTime - startTime; // 已经过的时间
|
||||
const progress = Math.min(elapsed / duration, 1); // 进度 0-1
|
||||
|
||||
// 缓动函数
|
||||
// 缓动函数：easeOutCubic，动画先快后慢
|
||||
const easeProgress = 1 - Math.pow(1 - progress, 3);
|
||||
window.scrollTo(0, start + distance * easeProgress);
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(step);
|
||||
requestAnimationFrame(step); // 继续下一帧
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(step);
|
||||
requestAnimationFrame(step); // 开始动画
|
||||
}
|
||||
|
||||
// rAF 节流
|
||||
// rAF 节流：与屏幕刷新率同步
|
||||
function rafThrottle(fn) {
|
||||
let ticking = false;
|
||||
let ticking = false; // 是否已请求下一帧
|
||||
return function(...args) {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(() => {
|
||||
@ -224,20 +229,23 @@ function rafThrottle(fn) {
|
||||
> **解决**：耗时JS计算阻塞主线程导致页面卡顿，Worker 在后台线程执行不影响UI。
|
||||
|
||||
```js
|
||||
// main.js
|
||||
const worker = new Worker('worker.js');
|
||||
// 主线程 (main.js)
|
||||
const worker = new Worker('worker.js'); // 创建后台线程
|
||||
|
||||
// 发送数据给 Worker
|
||||
worker.postMessage({ type: 'heavyTask', data: largeArray });
|
||||
|
||||
// 接收 Worker 返回的结果
|
||||
worker.onmessage = (e) => {
|
||||
console.log('处理结果:', e.data);
|
||||
};
|
||||
|
||||
// worker.js
|
||||
// Worker 线程 (worker.js)
|
||||
self.onmessage = (e) => {
|
||||
if (e.data.type === 'heavyTask') {
|
||||
// 在后台线程执行耗时计算，不影响主线程 UI
|
||||
const result = e.data.data.map(item => /* 耗时计算 */);
|
||||
self.postMessage(result);
|
||||
self.postMessage(result); // 返回结果给主线程
|
||||
}
|
||||
};
|
||||
```
|
||||
@ -250,6 +258,7 @@ self.onmessage = (e) => {
|
||||
> **解决**：长任务占据主线程超过50ms导致用户交互无响应，分片执行保证响应性。
|
||||
|
||||
```js
|
||||
// 时间切片：将长任务分成小块执行
|
||||
async function timeSlice(tasks, chunkSize = 5) {
|
||||
const results = [];
|
||||
|
||||
@ -261,27 +270,28 @@ async function timeSlice(tasks, chunkSize = 5) {
|
||||
results.push(task());
|
||||
}
|
||||
|
||||
// 让出主线程
|
||||
// 让出主线程，让浏览器有机会处理用户交互
|
||||
await new Promise(resolve => setTimeout(resolve, 0));
|
||||
// 或使用 requestIdleCallback
|
||||
}
|
||||
|
||||
return results;
|
||||
}
|
||||
|
||||
// 使用 requestIdleCallback
|
||||
// 使用 requestIdleCallback：在浏览器空闲时执行
|
||||
function processInIdle(tasks) {
|
||||
let index = 0;
|
||||
|
||||
function work(deadline) {
|
||||
// 当前帧还有剩余时间时执行任务
|
||||
while (index < tasks.length && deadline.timeRemaining() > 0) {
|
||||
tasks[index++]();
|
||||
}
|
||||
// 如果还有任务，等待下次空闲时继续
|
||||
if (index < tasks.length) {
|
||||
requestIdleCallback(work);
|
||||
}
|
||||
}
|
||||
|
||||
requestIdleCallback(work);
|
||||
requestIdleCallback(work); // 开始执行
|
||||
}
|
||||
```
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user