no message
This commit is contained in:
parent
1ec3a43ab6
commit
49843e4d7a
205
algorithm/01-js-basics.md
Normal file
205
algorithm/01-js-basics.md
Normal file
@ -0,0 +1,205 @@
|
|||||||
|
# JS 基础与手写实现
|
||||||
|
|
||||||
|
## 1. 手写 Promise
|
||||||
|
|
||||||
|
```js
|
||||||
|
class MyPromise {
|
||||||
|
constructor(executor) {
|
||||||
|
this.state = 'pending';
|
||||||
|
this.value = undefined;
|
||||||
|
this.callbacks = [];
|
||||||
|
|
||||||
|
const resolve = (value) => {
|
||||||
|
if (this.state !== 'pending') return;
|
||||||
|
this.state = 'fulfilled';
|
||||||
|
this.value = value;
|
||||||
|
this.callbacks.forEach(cb => cb.onFulfilled(value));
|
||||||
|
};
|
||||||
|
|
||||||
|
const reject = (reason) => {
|
||||||
|
if (this.state !== 'pending') return;
|
||||||
|
this.state = 'rejected';
|
||||||
|
this.value = reason;
|
||||||
|
this.callbacks.forEach(cb => cb.onRejected(reason));
|
||||||
|
};
|
||||||
|
|
||||||
|
try { executor(resolve, reject); } catch (e) { reject(e); }
|
||||||
|
}
|
||||||
|
|
||||||
|
then(onFulfilled, onRejected) {
|
||||||
|
return new MyPromise((resolve, reject) => {
|
||||||
|
const handle = (callback, fallback) => {
|
||||||
|
try {
|
||||||
|
const result = (callback || fallback)(this.value);
|
||||||
|
result instanceof MyPromise ? result.then(resolve, reject) : resolve(result);
|
||||||
|
} catch (e) { reject(e); }
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.state === 'fulfilled') handle(onFulfilled, v => v);
|
||||||
|
else if (this.state === 'rejected') handle(onRejected, e => { throw e; });
|
||||||
|
else this.callbacks.push({
|
||||||
|
onFulfilled: () => handle(onFulfilled, v => v),
|
||||||
|
onRejected: () => handle(onRejected, e => { throw e; })
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 2. Promise.all / Promise.race
|
||||||
|
|
||||||
|
```js
|
||||||
|
// Promise.all - 所有成功才成功
|
||||||
|
Promise.myAll = (promises) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const results = [];
|
||||||
|
let count = 0;
|
||||||
|
promises.forEach((p, i) => {
|
||||||
|
Promise.resolve(p).then(val => {
|
||||||
|
results[i] = val;
|
||||||
|
if (++count === promises.length) resolve(results);
|
||||||
|
}, reject);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Promise.race - 第一个完成就返回
|
||||||
|
Promise.myRace = (promises) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
promises.forEach(p => Promise.resolve(p).then(resolve, reject));
|
||||||
|
});
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## 3. 防抖与节流
|
||||||
|
|
||||||
|
```js
|
||||||
|
// 防抖：停止触发后执行
|
||||||
|
function debounce(fn, delay) {
|
||||||
|
let timer = null;
|
||||||
|
return function(...args) {
|
||||||
|
clearTimeout(timer);
|
||||||
|
timer = setTimeout(() => fn.apply(this, args), delay);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 节流：固定间隔执行
|
||||||
|
function throttle(fn, delay) {
|
||||||
|
let last = 0;
|
||||||
|
return function(...args) {
|
||||||
|
const now = Date.now();
|
||||||
|
if (now - last >= delay) {
|
||||||
|
last = now;
|
||||||
|
fn.apply(this, args);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 4. 深拷贝（处理循环引用）
|
||||||
|
|
||||||
|
```js
|
||||||
|
function deepClone(obj, map = new WeakMap()) {
|
||||||
|
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); // 处理循环引用
|
||||||
|
|
||||||
|
const clone = Array.isArray(obj) ? [] : {};
|
||||||
|
map.set(obj, clone);
|
||||||
|
|
||||||
|
for (const key in obj) {
|
||||||
|
if (obj.hasOwnProperty(key)) {
|
||||||
|
clone[key] = deepClone(obj[key], map);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return clone;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 5. 函数柯里化
|
||||||
|
|
||||||
|
```js
|
||||||
|
function curry(fn) {
|
||||||
|
return function curried(...args) {
|
||||||
|
if (args.length >= fn.length) {
|
||||||
|
return fn.apply(this, args);
|
||||||
|
}
|
||||||
|
return (...nextArgs) => curried(...args, ...nextArgs);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用示例
|
||||||
|
const add = (a, b, c) => a + b + c;
|
||||||
|
const curriedAdd = curry(add);
|
||||||
|
curriedAdd(1)(2)(3); // 6
|
||||||
|
curriedAdd(1, 2)(3); // 6
|
||||||
|
```
|
||||||
|
|
||||||
|
## 6. call / apply / bind 实现
|
||||||
|
|
||||||
|
```js
|
||||||
|
// call
|
||||||
|
Function.prototype.myCall = function(ctx, ...args) {
|
||||||
|
ctx = ctx || window;
|
||||||
|
const key = Symbol();
|
||||||
|
ctx[key] = this;
|
||||||
|
const result = ctx[key](...args);
|
||||||
|
delete ctx[key];
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
// apply
|
||||||
|
Function.prototype.myApply = function(ctx, args = []) {
|
||||||
|
ctx = ctx || window;
|
||||||
|
const key = Symbol();
|
||||||
|
ctx[key] = this;
|
||||||
|
const result = ctx[key](...args);
|
||||||
|
delete ctx[key];
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
// bind
|
||||||
|
Function.prototype.myBind = function(ctx, ...args) {
|
||||||
|
const fn = this;
|
||||||
|
return function(...newArgs) {
|
||||||
|
return fn.apply(ctx, [...args, ...newArgs]);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## 7. 事件总线 EventEmitter
|
||||||
|
|
||||||
|
```js
|
||||||
|
class EventEmitter {
|
||||||
|
constructor() {
|
||||||
|
this.events = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
on(event, listener) {
|
||||||
|
(this.events[event] ||= []).push(listener);
|
||||||
|
return 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);
|
||||||
|
};
|
||||||
|
return this.on(event, wrapper);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
145
algorithm/02-array-string.md
Normal file
145
algorithm/02-array-string.md
Normal file
@ -0,0 +1,145 @@
|
|||||||
|
# 数组与字符串操作
|
||||||
|
|
||||||
|
## 1. 数组去重（多种方法）
|
||||||
|
|
||||||
|
```js
|
||||||
|
// 方法1: Set
|
||||||
|
const unique1 = arr => [...new Set(arr)];
|
||||||
|
|
||||||
|
// 方法2: filter + indexOf
|
||||||
|
const unique2 = arr => arr.filter((v, i) => arr.indexOf(v) === i);
|
||||||
|
|
||||||
|
// 方法3: reduce
|
||||||
|
const unique3 = arr => arr.reduce((acc, v) => acc.includes(v) ? acc : [...acc, v], []);
|
||||||
|
|
||||||
|
// 方法4: 对象数组按属性去重
|
||||||
|
const uniqueByKey = (arr, key) => {
|
||||||
|
const map = new Map();
|
||||||
|
arr.forEach(item => !map.has(item[key]) && map.set(item[key], item));
|
||||||
|
return [...map.values()];
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## 2. 扁平化数组
|
||||||
|
|
||||||
|
```js
|
||||||
|
// 递归实现
|
||||||
|
function flatten(arr, depth = Infinity) {
|
||||||
|
return arr.reduce((acc, val) => {
|
||||||
|
return acc.concat(
|
||||||
|
Array.isArray(val) && depth > 0 ? flatten(val, depth - 1) : val
|
||||||
|
);
|
||||||
|
}, []);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 迭代实现（使用栈）
|
||||||
|
function flattenIterative(arr) {
|
||||||
|
const stack = [...arr];
|
||||||
|
const result = [];
|
||||||
|
while (stack.length) {
|
||||||
|
const item = stack.pop();
|
||||||
|
Array.isArray(item) ? stack.push(...item) : result.unshift(item);
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 原生方法
|
||||||
|
arr.flat(Infinity);
|
||||||
|
```
|
||||||
|
|
||||||
|
## 3. 字符串反转
|
||||||
|
|
||||||
|
```js
|
||||||
|
const reverse = str => str.split('').reverse().join('');
|
||||||
|
|
||||||
|
// 或者使用扩展运算符
|
||||||
|
const reverse2 = str => [...str].reverse().join('');
|
||||||
|
```
|
||||||
|
|
||||||
|
## 4. 判断回文
|
||||||
|
|
||||||
|
```js
|
||||||
|
const isPalindrome = str => {
|
||||||
|
const clean = str.toLowerCase().replace(/[^a-z0-9]/g, '');
|
||||||
|
return clean === clean.split('').reverse().join('');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 双指针法
|
||||||
|
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;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## 5. 最长公共前缀
|
||||||
|
|
||||||
|
```js
|
||||||
|
function longestCommonPrefix(strs) {
|
||||||
|
if (!strs.length) return '';
|
||||||
|
|
||||||
|
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 '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return prefix;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 示例: ["flower","flow","flight"] => "fl"
|
||||||
|
```
|
||||||
|
|
||||||
|
## 6. 模板字符串解析
|
||||||
|
|
||||||
|
```js
|
||||||
|
function render(template, data) {
|
||||||
|
return template.replace(/\{\{(\w+)\}\}/g, (match, key) => {
|
||||||
|
return data[key] !== undefined ? data[key] : match;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 支持嵌套属性
|
||||||
|
function renderDeep(template, data) {
|
||||||
|
return template.replace(/\{\{(.+?)\}\}/g, (match, path) => {
|
||||||
|
const keys = path.trim().split('.');
|
||||||
|
let value = data;
|
||||||
|
for (const key of keys) {
|
||||||
|
value = value?.[key];
|
||||||
|
if (value === undefined) return match;
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用示例
|
||||||
|
render('Hello, {{name}}!', { name: 'World' }); // "Hello, World!"
|
||||||
|
renderDeep('{{user.info.name}}', { user: { info: { name: 'Tom' } } }); // "Tom"
|
||||||
|
```
|
||||||
|
|
||||||
|
## 7. 数组按属性去重并排序
|
||||||
|
|
||||||
|
```js
|
||||||
|
function uniqueAndSort(arr, key, sortKey, order = 'asc') {
|
||||||
|
// 去重
|
||||||
|
const map = new Map();
|
||||||
|
arr.forEach(item => !map.has(item[key]) && map.set(item[key], item));
|
||||||
|
|
||||||
|
// 排序
|
||||||
|
return [...map.values()].sort((a, b) => {
|
||||||
|
return order === 'asc' ? a[sortKey] - b[sortKey] : b[sortKey] - a[sortKey];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 示例
|
||||||
|
const users = [
|
||||||
|
{ id: 1, name: 'Tom', age: 20 },
|
||||||
|
{ id: 2, name: 'Jerry', age: 18 },
|
||||||
|
{ id: 1, name: 'Tom2', age: 25 }
|
||||||
|
];
|
||||||
|
uniqueAndSort(users, 'id', 'age'); // 按id去重，按age升序排序
|
||||||
|
```
|
||||||
268
algorithm/03-data-structure.md
Normal file
268
algorithm/03-data-structure.md
Normal file
@ -0,0 +1,268 @@
|
|||||||
|
# 数据结构与算法
|
||||||
|
|
||||||
|
## 1. 链表
|
||||||
|
|
||||||
|
### 反转链表
|
||||||
|
|
||||||
|
```js
|
||||||
|
function reverseList(head) {
|
||||||
|
let prev = null, curr = head;
|
||||||
|
while (curr) {
|
||||||
|
const next = curr.next;
|
||||||
|
curr.next = prev;
|
||||||
|
prev = curr;
|
||||||
|
curr = next;
|
||||||
|
}
|
||||||
|
return 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;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 合并有序链表
|
||||||
|
|
||||||
|
```js
|
||||||
|
function mergeTwoLists(l1, l2) {
|
||||||
|
const dummy = { next: null };
|
||||||
|
let curr = dummy;
|
||||||
|
while (l1 && l2) {
|
||||||
|
if (l1.val <= l2.val) {
|
||||||
|
curr.next = l1;
|
||||||
|
l1 = l1.next;
|
||||||
|
} else {
|
||||||
|
curr.next = l2;
|
||||||
|
l2 = l2.next;
|
||||||
|
}
|
||||||
|
curr = curr.next;
|
||||||
|
}
|
||||||
|
curr.next = l1 || l2;
|
||||||
|
return dummy.next;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. 二叉树
|
||||||
|
|
||||||
|
### 遍历（前中后序）
|
||||||
|
|
||||||
|
```js
|
||||||
|
// 前序：根-左-右
|
||||||
|
const preorder = (root, res = []) => {
|
||||||
|
if (!root) return 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);
|
||||||
|
return res;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 后序：左-右-根
|
||||||
|
const postorder = (root, res = []) => {
|
||||||
|
if (!root) return res;
|
||||||
|
postorder(root.left, res);
|
||||||
|
postorder(root.right, res);
|
||||||
|
res.push(root.val);
|
||||||
|
return res;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### 求最大深度
|
||||||
|
|
||||||
|
```js
|
||||||
|
const maxDepth = root => {
|
||||||
|
if (!root) return 0;
|
||||||
|
return 1 + Math.max(maxDepth(root.left), maxDepth(root.right));
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### 路径和
|
||||||
|
|
||||||
|
```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);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. 栈与队列
|
||||||
|
|
||||||
|
### 用栈实现队列
|
||||||
|
|
||||||
|
```js
|
||||||
|
class MyQueue {
|
||||||
|
constructor() {
|
||||||
|
this.inStack = [];
|
||||||
|
this.outStack = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
push(x) { this.inStack.push(x); }
|
||||||
|
|
||||||
|
pop() {
|
||||||
|
if (!this.outStack.length) {
|
||||||
|
while (this.inStack.length) this.outStack.push(this.inStack.pop());
|
||||||
|
}
|
||||||
|
return this.outStack.pop();
|
||||||
|
}
|
||||||
|
|
||||||
|
peek() {
|
||||||
|
if (!this.outStack.length) {
|
||||||
|
while (this.inStack.length) this.outStack.push(this.inStack.pop());
|
||||||
|
}
|
||||||
|
return this.outStack[this.outStack.length - 1];
|
||||||
|
}
|
||||||
|
|
||||||
|
empty() { return !this.inStack.length && !this.outStack.length; }
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 有效的括号
|
||||||
|
|
||||||
|
```js
|
||||||
|
function isValid(s) {
|
||||||
|
const map = { ')': '(', ']': '[', '}': '{' };
|
||||||
|
const stack = [];
|
||||||
|
for (const c of s) {
|
||||||
|
if (map[c]) {
|
||||||
|
if (stack.pop() !== map[c]) return false;
|
||||||
|
} else {
|
||||||
|
stack.push(c);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return !stack.length;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. 哈希表
|
||||||
|
|
||||||
|
### 两数之和
|
||||||
|
|
||||||
|
```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);
|
||||||
|
}
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 字母异位词分组
|
||||||
|
|
||||||
|
```js
|
||||||
|
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));
|
||||||
|
}
|
||||||
|
return [...map.values()];
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. 排序算法
|
||||||
|
|
||||||
|
### 快速排序
|
||||||
|
|
||||||
|
```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);
|
||||||
|
return [...quickSort(left), ...middle, ...quickSort(right)];
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 归并排序
|
||||||
|
|
||||||
|
```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);
|
||||||
|
}
|
||||||
|
|
||||||
|
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));
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. 二分查找
|
||||||
|
|
||||||
|
### 基础二分查找
|
||||||
|
|
||||||
|
```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;
|
||||||
|
arr[mid] < target ? (left = mid + 1) : (right = mid - 1);
|
||||||
|
}
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 旋转数组查找
|
||||||
|
|
||||||
|
```js
|
||||||
|
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 (target >= nums[left] && target < nums[mid]) right = mid - 1;
|
||||||
|
else left = mid + 1;
|
||||||
|
} else {
|
||||||
|
// 右半边有序
|
||||||
|
if (target > nums[mid] && target <= nums[right]) left = mid + 1;
|
||||||
|
else right = mid - 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
```
|
||||||
235
algorithm/04-practical-scenarios.md
Normal file
235
algorithm/04-practical-scenarios.md
Normal file
@ -0,0 +1,235 @@
|
|||||||
|
# 实际场景与逻辑题
|
||||||
|
|
||||||
|
## 1. 并发控制（限制并发请求数）
|
||||||
|
|
||||||
|
```js
|
||||||
|
async function limitConcurrency(tasks, limit) {
|
||||||
|
const results = [];
|
||||||
|
const executing = [];
|
||||||
|
|
||||||
|
for (const [index, task] of tasks.entries()) {
|
||||||
|
const p = Promise.resolve().then(() => task()).then(res => {
|
||||||
|
results[index] = res;
|
||||||
|
executing.splice(executing.indexOf(p), 1);
|
||||||
|
});
|
||||||
|
executing.push(p);
|
||||||
|
|
||||||
|
if (executing.length >= limit) {
|
||||||
|
await Promise.race(executing);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
await Promise.all(executing);
|
||||||
|
return results;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用示例
|
||||||
|
const tasks = urls.map(url => () => fetch(url));
|
||||||
|
await limitConcurrency(tasks, 3); // 最多3个并发
|
||||||
|
```
|
||||||
|
|
||||||
|
### 异步任务调度器
|
||||||
|
|
||||||
|
```js
|
||||||
|
class Scheduler {
|
||||||
|
constructor(limit) {
|
||||||
|
this.limit = limit;
|
||||||
|
this.queue = [];
|
||||||
|
this.running = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
add(promiseCreator) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
this.queue.push({ promiseCreator, resolve, reject });
|
||||||
|
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(); });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. 缓存函数（Memoization）
|
||||||
|
|
||||||
|
```js
|
||||||
|
function memoize(fn) {
|
||||||
|
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);
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 支持过期时间
|
||||||
|
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() });
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. 解析 URL 参数
|
||||||
|
|
||||||
|
```js
|
||||||
|
function parseQuery(url) {
|
||||||
|
const query = url.split('?')[1] || '';
|
||||||
|
return query.split('&').reduce((acc, pair) => {
|
||||||
|
const [key, value] = pair.split('=').map(decodeURIComponent);
|
||||||
|
if (key) {
|
||||||
|
acc[key] = acc[key]
|
||||||
|
? [].concat(acc[key], value)
|
||||||
|
: value;
|
||||||
|
}
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用正则
|
||||||
|
function parseQueryRegex(url) {
|
||||||
|
const result = {};
|
||||||
|
url.replace(/[?&]([^=&#]+)=([^&#]*)/g, (_, key, value) => {
|
||||||
|
result[decodeURIComponent(key)] = decodeURIComponent(value);
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 示例: "https://example.com?a=1&b=2&a=3"
|
||||||
|
// => { a: ['1', '3'], b: '2' }
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. DOM 查找最近公共祖先
|
||||||
|
|
||||||
|
```js
|
||||||
|
function findCommonAncestor(node1, node2) {
|
||||||
|
const ancestors = new Set();
|
||||||
|
|
||||||
|
// 收集 node1 的所有祖先
|
||||||
|
let current = node1;
|
||||||
|
while (current) {
|
||||||
|
ancestors.add(current);
|
||||||
|
current = current.parentNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查找 node2 的祖先中第一个在 ancestors 中的节点
|
||||||
|
current = node2;
|
||||||
|
while (current) {
|
||||||
|
if (ancestors.has(current)) return current;
|
||||||
|
current = current.parentNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 原生方法（现代浏览器）
|
||||||
|
// node1.compareDocumentPosition(node2)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. 懒加载/无限滚动
|
||||||
|
|
||||||
|
```js
|
||||||
|
// IntersectionObserver 实现懒加载
|
||||||
|
function lazyLoad(selector) {
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
const img = entry.target;
|
||||||
|
img.src = img.dataset.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();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 监听底部占位元素
|
||||||
|
const sentinel = document.createElement('div');
|
||||||
|
container.appendChild(sentinel);
|
||||||
|
observer.observe(sentinel);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. LRU 缓存
|
||||||
|
|
||||||
|
```js
|
||||||
|
class LRUCache {
|
||||||
|
constructor(capacity) {
|
||||||
|
this.capacity = capacity;
|
||||||
|
this.cache = new 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.size > this.capacity) {
|
||||||
|
this.cache.delete(this.cache.keys().next().value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. 大数相加
|
||||||
|
|
||||||
|
```js
|
||||||
|
function addBigNumbers(a, b) {
|
||||||
|
const maxLen = Math.max(a.length, b.length);
|
||||||
|
a = a.padStart(maxLen, '0');
|
||||||
|
b = b.padStart(maxLen, '0');
|
||||||
|
|
||||||
|
let carry = 0, result = '';
|
||||||
|
for (let i = maxLen - 1; i >= 0; i--) {
|
||||||
|
const sum = +a[i] + +b[i] + carry;
|
||||||
|
result = (sum % 10) + result;
|
||||||
|
carry = Math.floor(sum / 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
return carry ? carry + result : result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 示例: addBigNumbers("12345678901234567890", "98765432109876543210")
|
||||||
|
```
|
||||||
245
algorithm/05-framework-algorithms.md
Normal file
245
algorithm/05-framework-algorithms.md
Normal file
@ -0,0 +1,245 @@
|
|||||||
|
# 框架相关算法
|
||||||
|
|
||||||
|
## 1. 虚拟DOM Diff 算法
|
||||||
|
|
||||||
|
### 简化版 Diff 实现
|
||||||
|
|
||||||
|
```js
|
||||||
|
function diff(oldVNode, newVNode) {
|
||||||
|
const patches = [];
|
||||||
|
|
||||||
|
// 节点不存在
|
||||||
|
if (!newVNode) {
|
||||||
|
patches.push({ type: 'REMOVE' });
|
||||||
|
return patches;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 类型不同，替换节点
|
||||||
|
if (typeof oldVNode !== typeof newVNode ||
|
||||||
|
(typeof oldVNode === 'string' && oldVNode !== newVNode) ||
|
||||||
|
oldVNode.tag !== newVNode.tag) {
|
||||||
|
patches.push({ type: 'REPLACE', node: newVNode });
|
||||||
|
return patches;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 比较属性
|
||||||
|
if (newVNode.props) {
|
||||||
|
const propsPatches = diffProps(oldVNode.props || {}, newVNode.props);
|
||||||
|
if (Object.keys(propsPatches).length) {
|
||||||
|
patches.push({ type: 'PROPS', props: propsPatches });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 比较子节点
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. Vue 响应式原理
|
||||||
|
|
||||||
|
### Vue 2 (Object.defineProperty)
|
||||||
|
|
||||||
|
```js
|
||||||
|
function observe(obj) {
|
||||||
|
if (typeof obj !== 'object' || obj === null) return;
|
||||||
|
|
||||||
|
Object.keys(obj).forEach(key => {
|
||||||
|
let value = obj[key];
|
||||||
|
const dep = new Set();
|
||||||
|
|
||||||
|
observe(value); // 递归处理嵌套对象
|
||||||
|
|
||||||
|
Object.defineProperty(obj, key, {
|
||||||
|
get() {
|
||||||
|
if (currentEffect) dep.add(currentEffect);
|
||||||
|
return value;
|
||||||
|
},
|
||||||
|
set(newVal) {
|
||||||
|
if (newVal === value) return;
|
||||||
|
value = newVal;
|
||||||
|
observe(newVal);
|
||||||
|
dep.forEach(fn => fn());
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
let currentEffect = null;
|
||||||
|
function watchEffect(fn) {
|
||||||
|
currentEffect = fn;
|
||||||
|
fn();
|
||||||
|
currentEffect = null;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Vue 3 (Proxy)
|
||||||
|
|
||||||
|
```js
|
||||||
|
function reactive(obj) {
|
||||||
|
return new Proxy(obj, {
|
||||||
|
get(target, key, receiver) {
|
||||||
|
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);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
function trigger(target, key) {
|
||||||
|
const depsMap = targetMap.get(target);
|
||||||
|
if (!depsMap) return;
|
||||||
|
depsMap.get(key)?.forEach(effect => effect());
|
||||||
|
}
|
||||||
|
|
||||||
|
function effect(fn) {
|
||||||
|
activeEffect = fn;
|
||||||
|
fn();
|
||||||
|
activeEffect = null;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. React useState 简单模拟
|
||||||
|
|
||||||
|
```js
|
||||||
|
let state = [];
|
||||||
|
let stateIndex = 0;
|
||||||
|
|
||||||
|
function useState(initialValue) {
|
||||||
|
const currentIndex = stateIndex;
|
||||||
|
state[currentIndex] = state[currentIndex] ?? initialValue;
|
||||||
|
|
||||||
|
const setState = (newValue) => {
|
||||||
|
state[currentIndex] = typeof newValue === 'function'
|
||||||
|
? newValue(state[currentIndex])
|
||||||
|
: newValue;
|
||||||
|
render(); // 触发重新渲染
|
||||||
|
};
|
||||||
|
|
||||||
|
stateIndex++;
|
||||||
|
return [state[currentIndex], setState];
|
||||||
|
}
|
||||||
|
|
||||||
|
function render() {
|
||||||
|
stateIndex = 0; // 重置索引
|
||||||
|
// 调用组件函数...
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. useEffect 简单模拟
|
||||||
|
|
||||||
|
```js
|
||||||
|
let effectIndex = 0;
|
||||||
|
let effects = [];
|
||||||
|
|
||||||
|
function useEffect(callback, deps) {
|
||||||
|
const currentIndex = effectIndex;
|
||||||
|
const prevDeps = effects[currentIndex]?.deps;
|
||||||
|
|
||||||
|
const hasChanged = !prevDeps ||
|
||||||
|
deps.some((dep, i) => !Object.is(dep, prevDeps[i]));
|
||||||
|
|
||||||
|
if (hasChanged) {
|
||||||
|
// 执行清理函数
|
||||||
|
effects[currentIndex]?.cleanup?.();
|
||||||
|
|
||||||
|
// 延迟执行 effect
|
||||||
|
Promise.resolve().then(() => {
|
||||||
|
const cleanup = callback();
|
||||||
|
effects[currentIndex] = { deps, cleanup };
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
effectIndex++;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. 简易 Redux
|
||||||
|
|
||||||
|
```js
|
||||||
|
function createStore(reducer) {
|
||||||
|
let state;
|
||||||
|
const listeners = [];
|
||||||
|
|
||||||
|
const getState = () => state;
|
||||||
|
|
||||||
|
const dispatch = (action) => {
|
||||||
|
state = reducer(state, action);
|
||||||
|
listeners.forEach(listener => listener());
|
||||||
|
};
|
||||||
|
|
||||||
|
const subscribe = (listener) => {
|
||||||
|
listeners.push(listener);
|
||||||
|
return () => {
|
||||||
|
const index = listeners.indexOf(listener);
|
||||||
|
listeners.splice(index, 1);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
dispatch({ type: '@@INIT' }); // 初始化 state
|
||||||
|
|
||||||
|
return { getState, dispatch, subscribe };
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用示例
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
```
|
||||||
269
algorithm/06-performance.md
Normal file
269
algorithm/06-performance.md
Normal file
@ -0,0 +1,269 @@
|
|||||||
|
# 性能与优化
|
||||||
|
|
||||||
|
## 1. 图片懒加载
|
||||||
|
|
||||||
|
### IntersectionObserver 方案（推荐）
|
||||||
|
|
||||||
|
```js
|
||||||
|
function lazyLoadImages() {
|
||||||
|
const observer = new IntersectionObserver((entries, observer) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
const img = entry.target;
|
||||||
|
img.src = img.dataset.src;
|
||||||
|
img.classList.remove('lazy');
|
||||||
|
observer.unobserve(img);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, {
|
||||||
|
rootMargin: '50px' // 提前50px开始加载
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('img.lazy').forEach(img => observer.observe(img));
|
||||||
|
}
|
||||||
|
|
||||||
|
// HTML: <img class="lazy" data-src="real-image.jpg" src="placeholder.jpg" />
|
||||||
|
```
|
||||||
|
|
||||||
|
### 传统滚动监听方案
|
||||||
|
|
||||||
|
```js
|
||||||
|
function lazyLoadScroll() {
|
||||||
|
const lazyImages = document.querySelectorAll('img.lazy');
|
||||||
|
|
||||||
|
const loadImage = throttle(() => {
|
||||||
|
lazyImages.forEach(img => {
|
||||||
|
if (img.getBoundingClientRect().top < window.innerHeight + 100) {
|
||||||
|
img.src = img.dataset.src;
|
||||||
|
img.classList.remove('lazy');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, 200);
|
||||||
|
|
||||||
|
window.addEventListener('scroll', loadImage);
|
||||||
|
loadImage(); // 初始加载
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. 虚拟列表（大数据渲染优化）
|
||||||
|
|
||||||
|
```js
|
||||||
|
class VirtualList {
|
||||||
|
constructor({ container, itemHeight, totalItems, renderItem }) {
|
||||||
|
this.container = container;
|
||||||
|
this.itemHeight = itemHeight;
|
||||||
|
this.totalItems = totalItems;
|
||||||
|
this.renderItem = renderItem;
|
||||||
|
|
||||||
|
this.visibleCount = Math.ceil(container.clientHeight / itemHeight) + 2;
|
||||||
|
this.startIndex = 0;
|
||||||
|
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
// 创建容器结构
|
||||||
|
this.container.style.overflow = 'auto';
|
||||||
|
this.container.style.position = 'relative';
|
||||||
|
|
||||||
|
// 占位元素，撑开滚动高度
|
||||||
|
this.phantom = document.createElement('div');
|
||||||
|
this.phantom.style.height = `${this.totalItems * this.itemHeight}px`;
|
||||||
|
|
||||||
|
// 实际渲染的列表容器
|
||||||
|
this.content = document.createElement('div');
|
||||||
|
this.content.style.position = 'absolute';
|
||||||
|
this.content.style.top = '0';
|
||||||
|
this.content.style.width = '100%';
|
||||||
|
|
||||||
|
this.container.appendChild(this.phantom);
|
||||||
|
this.container.appendChild(this.content);
|
||||||
|
|
||||||
|
this.container.addEventListener('scroll', throttle(() => this.onScroll(), 16));
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
onScroll() {
|
||||||
|
const scrollTop = this.container.scrollTop;
|
||||||
|
this.startIndex = Math.floor(scrollTop / this.itemHeight);
|
||||||
|
this.content.style.transform = `translateY(${this.startIndex * this.itemHeight}px)`;
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const fragment = document.createDocumentFragment();
|
||||||
|
const endIndex = Math.min(this.startIndex + this.visibleCount, this.totalItems);
|
||||||
|
|
||||||
|
for (let i = this.startIndex; i < endIndex; i++) {
|
||||||
|
const item = this.renderItem(i);
|
||||||
|
item.style.height = `${this.itemHeight}px`;
|
||||||
|
fragment.appendChild(item);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.content.innerHTML = '';
|
||||||
|
this.content.appendChild(fragment);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用示例
|
||||||
|
new VirtualList({
|
||||||
|
container: document.getElementById('list'),
|
||||||
|
itemHeight: 50,
|
||||||
|
totalItems: 10000,
|
||||||
|
renderItem: (index) => {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.textContent = `Item ${index}`;
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. 函数节流在滚动事件中的应用
|
||||||
|
|
||||||
|
```js
|
||||||
|
// 节流函数
|
||||||
|
function throttle(fn, delay) {
|
||||||
|
let lastTime = 0;
|
||||||
|
let timer = null;
|
||||||
|
|
||||||
|
return function(...args) {
|
||||||
|
const now = Date.now();
|
||||||
|
const remaining = delay - (now - lastTime);
|
||||||
|
|
||||||
|
if (remaining <= 0) {
|
||||||
|
if (timer) {
|
||||||
|
clearTimeout(timer);
|
||||||
|
timer = null;
|
||||||
|
}
|
||||||
|
lastTime = now;
|
||||||
|
fn.apply(this, args);
|
||||||
|
} else if (!timer) {
|
||||||
|
timer = setTimeout(() => {
|
||||||
|
lastTime = Date.now();
|
||||||
|
timer = null;
|
||||||
|
fn.apply(this, args);
|
||||||
|
}, remaining);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 应用场景
|
||||||
|
window.addEventListener('scroll', throttle(() => {
|
||||||
|
console.log('滚动位置:', window.scrollY);
|
||||||
|
// 吸顶效果、返回顶部按钮显示等
|
||||||
|
}, 100));
|
||||||
|
|
||||||
|
window.addEventListener('resize', throttle(() => {
|
||||||
|
console.log('窗口大小:', window.innerWidth, window.innerHeight);
|
||||||
|
}, 200));
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. requestAnimationFrame 优化动画
|
||||||
|
|
||||||
|
```js
|
||||||
|
// 使用 rAF 实现平滑滚动
|
||||||
|
function smoothScrollTo(target, duration = 500) {
|
||||||
|
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 easeProgress = 1 - Math.pow(1 - progress, 3);
|
||||||
|
window.scrollTo(0, start + distance * easeProgress);
|
||||||
|
|
||||||
|
if (progress < 1) {
|
||||||
|
requestAnimationFrame(step);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
requestAnimationFrame(step);
|
||||||
|
}
|
||||||
|
|
||||||
|
// rAF 节流
|
||||||
|
function rafThrottle(fn) {
|
||||||
|
let ticking = false;
|
||||||
|
return function(...args) {
|
||||||
|
if (!ticking) {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
fn.apply(this, args);
|
||||||
|
ticking = false;
|
||||||
|
});
|
||||||
|
ticking = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. Web Worker 处理耗时任务
|
||||||
|
|
||||||
|
```js
|
||||||
|
// main.js
|
||||||
|
const worker = new Worker('worker.js');
|
||||||
|
|
||||||
|
worker.postMessage({ type: 'heavyTask', data: largeArray });
|
||||||
|
|
||||||
|
worker.onmessage = (e) => {
|
||||||
|
console.log('处理结果:', e.data);
|
||||||
|
};
|
||||||
|
|
||||||
|
// worker.js
|
||||||
|
self.onmessage = (e) => {
|
||||||
|
if (e.data.type === 'heavyTask') {
|
||||||
|
const result = e.data.data.map(item => /* 耗时计算 */);
|
||||||
|
self.postMessage(result);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. 时间切片（避免长任务阻塞）
|
||||||
|
|
||||||
|
```js
|
||||||
|
async function timeSlice(tasks, chunkSize = 5) {
|
||||||
|
const results = [];
|
||||||
|
|
||||||
|
for (let i = 0; i < tasks.length; i += chunkSize) {
|
||||||
|
const chunk = tasks.slice(i, i + chunkSize);
|
||||||
|
|
||||||
|
// 处理一批任务
|
||||||
|
for (const task of chunk) {
|
||||||
|
results.push(task());
|
||||||
|
}
|
||||||
|
|
||||||
|
// 让出主线程
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 0));
|
||||||
|
// 或使用 requestIdleCallback
|
||||||
|
}
|
||||||
|
|
||||||
|
return results;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用 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);
|
||||||
|
}
|
||||||
|
```
|
||||||
23
algorithm/README.md
Normal file
23
algorithm/README.md
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
# 京东前端面试算法题
|
||||||
|
|
||||||
|
> 难度：中等 | 重点：代码实现能力、逻辑清晰度、实际应用
|
||||||
|
|
||||||
|
## 📁 目录
|
||||||
|
|
||||||
|
| 分类 | 文件 |
|
||||||
|
|------|------|
|
||||||
|
| JS基础与手写实现 | [01-js-basics.md](./01-js-basics.md) |
|
||||||
|
| 数组与字符串操作 | [02-array-string.md](./02-array-string.md) |
|
||||||
|
| 数据结构与算法 | [03-data-structure.md](./03-data-structure.md) |
|
||||||
|
| 实际场景与逻辑题 | [04-practical-scenarios.md](./04-practical-scenarios.md) |
|
||||||
|
| 框架相关算法 | [05-framework-algorithms.md](./05-framework-algorithms.md) |
|
||||||
|
| 性能与优化 | [06-performance.md](./06-performance.md) |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ 备考建议
|
||||||
|
|
||||||
|
1. **重视基础**：闭包、原型链、异步核心概念必须扎实
|
||||||
|
2. **动手实现**：多手写常见工具函数（深拷贝、Promise等）
|
||||||
|
3. **刷题方向**：LeetCode 简单到中等，重点：字符串、数组、链表
|
||||||
|
4. **理解原理**：框架算法需理解思想，不必死记硬背
|
||||||
Loading…
x
Reference in New Issue
Block a user