目录
[1.1 JavaScript算法的演进革命](#1.1 JavaScript算法的演进革命)
[1.2 JavaScript算法的独特优势](#1.2 JavaScript算法的独特优势)
[2.1 现代数组操作方法](#2.1 现代数组操作方法)
[2.2 迭代器与生成器算法](#2.2 迭代器与生成器算法)
[3.1 现代排序技术](#3.1 现代排序技术)
[3.2 高效搜索算法](#3.2 高效搜索算法)
[4.1 算法性能优化技巧](#4.1 算法性能优化技巧)
[4.2 数据缓存与记忆化](#4.2 数据缓存与记忆化)
[5.1 函数式编程实用算法](#5.1 函数式编程实用算法)
[5.2 实用数据处理算法](#5.2 实用数据处理算法)
如果您喜欢此文章，请收藏、点赞、评论，谢谢，祝您快乐每一天。
一、JavaScript算法设计的现代范式
1.1 JavaScript算法的演进革命
JavaScript算法设计经历了三次重大变革：
- ES5时代：函数式编程萌芽（map、filter、reduce）
- ES6时代：箭头函数、解构、Promise、模块化
- ES2020+时代：可选链、空值合并、BigInt、动态导入
1.2 JavaScript算法的独特优势
// 1. 函数式编程的天然优势
const numbers = [1, 2, 3, 4, 5];
// 链式调用与组合
const result = numbers
.filter(n => n % 2 === 0) // [2, 4]
.map(n => n * 2) // [4, 8]
.reduce((sum, n) => sum + n, 0); // 12
// 2. 高阶函数与柯里化
const multiply = a => b => a * b;
const double = multiply(2);
const triple = multiply(3);
console.log(double(5)); // 10
console.log(triple(5)); // 15
// 3. 异步编程的优雅处理
async function processData(urls) {
const promises = urls.map(url => fetch(url).then(r => r.json()));
const results = await Promise.allSettled(promises);
return results
.filter(r => r.status === 'fulfilled')
.map(r => r.value);
}
二、数组与对象算法
2.1 现代数组操作方法
// 1. ES6+新增数组方法
const array = [1, 2, 3, 4, 5];
// find/findIndex - 查找元素
const firstEven = array.find(n => n % 2 === 0); // 2
const firstEvenIndex = array.findIndex(n => n % 2 === 0); // 1
// some/every - 条件检查
const hasEven = array.some(n => n % 2 === 0); // true
const allPositive = array.every(n => n > 0); // true
// flat/flatMap - 数组展平
const nested = [1, [2, [3, [4]]]];
const flattened = nested.flat(Infinity); // [1, 2, 3, 4]
const words = ["hello world", "good morning"];
const letters = words.flatMap(word => word.split(' '));
// ["hello", "world", "good", "morning"]
// 2. Array.from 与扩展运算符
// 类数组转数组
const nodeList = document.querySelectorAll('div');
const divArray = Array.from(nodeList);
// 创建范围数组
const range = (start, end) =>
Array.from({ length: end - start + 1 }, (_, i) => start + i);
console.log(range(1, 5)); // [1, 2, 3, 4, 5]
// 3. 使用Set和Map优化算法
// 数组去重
const duplicates = [1, 2, 2, 3, 4, 4, 5];
const unique = [...new Set(duplicates)]; // [1, 2, 3, 4, 5]
// 频率统计
function frequency(arr) {
return arr.reduce((map, item) => {
map.set(item, (map.get(item) || 0) + 1);
return map;
}, new Map());
}
// 4. 对象操作的高级技巧
// 对象合并与克隆
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
// 浅合并
const merged = { ...obj1, ...obj2 }; // { a: 1, b: 3, c: 4 }
// 深克隆（简单版）
const deepClone = obj => JSON.parse(JSON.stringify(obj));
// 动态属性名（计算属性）
const dynamicKey = 'score';
const student = {
name: 'Alice',
dynamicKey\]: 95, \[\`${dynamicKey}Level\`\]: 'A' }; // 可选链与空值合并 const user = { profile: { address: { city: 'New York' } } }; const city = user?.profile?.address?.city ?? 'Unknown'; const score = user?.scores?.\[0\] ?? 0; #### **2.2 迭代器与生成器算法** // 1. 自定义迭代器 class Range { constructor(start, end, step = 1) { this.start = start; this.end = end; this.step = step; } \[Symbol.iterator\]() { let current = this.start; const end = this.end; const step = this.step; return { next() { if (current \<= end) { const value = current; current += step; return { value, done: false }; } return { done: true }; } }; } } // 使用 for (const num of new Range(1, 5)) { console.log(num); // 1, 2, 3, 4, 5 } // 2. 生成器函数 function\* fibonacci(limit) { let \[prev, curr\] = \[0, 1\]; while (curr \<= limit) { yield curr; \[prev, curr\] = \[curr, prev + curr\]; } } // 惰性求值 const fibSequence = fibonacci(100); console.log(\[...fibSequence\]); // \[1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89
// 3. 异步生成器
async function* asyncGenerator(urls) {
for (const url of urls) {
const response = await fetch(url);
yield response.json();
}
}
// 使用for await...of
(async () => {
const urls = ['/api/data1', '/api/data2'];
for await (const data of asyncGenerator(urls)) {
console.log(data);
}
})();
三、排序与搜索算法
3.1 现代排序技术
// 1. 内置排序的灵活使用
const items = [
{ name: 'Apple', price: 3.5, rating: 4.2 },
{ name: 'Banana', price: 2.0, rating: 4.5 },
{ name: 'Cherry', price: 5.0, rating: 4.0 }
];
// 多字段排序
items.sort((a, b) => {
// 先按价格升序，再按评分降序
if (a.price !== b.price) {
return a.price - b.price;
}
return b.rating - a.rating;
});
// 2. 稳定排序的实现
function stableSort(array, compare) {
return array
.map((item, index) => ({ item, index }))
.sort((a, b) => {
const result = compare(a.item, b.item);
return result === 0 ? a.index - b.index : result;
})
.map(({ item }) => item);
}
// 3. 使用Intl.Collator进行本地化排序
const germanWords = ['ä', 'z', 'a'];
germanWords.sort(new Intl.Collator('de').compare);
// ['a', 'ä', 'z']
// 4. 快速排序（函数式版本）
const quickSort = arr => {
if (arr.length <= 1) return arr;
const pivot = arr[0];
const left = arr.slice(1).filter(x => x <= pivot);
const right = arr.slice(1).filter(x => x > pivot);
return [...quickSort(left), pivot, ...quickSort(right)];
};
3.2 高效搜索算法
// 1. 二分查找（支持复杂比较）
function binarySearch(arr, target, compareFn = (a, b) => a - b) {
let left = 0;
let right = arr.length - 1;
while (left <= right) {
const mid = Math.floor((left + right) / 2);
const cmp = compareFn(arr[mid], target);
if (cmp === 0) return mid;
if (cmp < 0) left = mid + 1;
else right = mid - 1;
}
return -1;
}
// 2. 使用Map实现O(1)查找
class FastLookup {
constructor(items, keyFn = item => item.id) {
this.map = new Map();
this.keyFn = keyFn;
items.forEach(item => {
this.map.set(keyFn(item), item);
});
}
get(key) {
return this.map.get(key);
}
has(key) {
return this.map.has(key);
}
}
// 3. 模糊搜索（Levenshtein距离）
function levenshteinDistance(a, b) {
const matrix = Array(b.length + 1)
.fill()
.map(() => Array(a.length + 1).fill(0));
for (let i = 0; i <= a.length; i++) matrix[0][i] = i;
for (let j = 0; j <= b.length; j++) matrix[j][0] = j;
for (let j = 1; j <= b.length; j++) {
for (let i = 1; i <= a.length; i++) {
const cost = a[i - 1] === b[j - 1] ? 0 : 1;
matrix[j][i] = Math.min(
matrix[j][i - 1] + 1, // 删除
matrix[j - 1][i] + 1, // 插入
matrix[j - 1][i - 1] + cost // 替换
);
}
}
return matrix[b.length][a.length];
}
// 4. 使用Trie树进行前缀搜索
class TrieNode {
constructor() {
this.children = new Map();
this.isEndOfWord = false;
}
}
class Trie {
constructor() {
this.root = new TrieNode();
}
insert(word) {
let node = this.root;
for (const char of word) {
if (!node.children.has(char)) {
node.children.set(char, new TrieNode());
}
node = node.children.get(char);
}
node.isEndOfWord = true;
}
search(prefix) {
let node = this.root;
// 找到前缀的最后一个节点
for (const char of prefix) {
if (!node.children.has(char)) {
return [];
}
node = node.children.get(char);
}
// 收集所有以该前缀开头的单词
return this._collectWords(node, prefix);
}
_collectWords(node, prefix) {
const words = [];
if (node.isEndOfWord) {
words.push(prefix);
}
for (const [char, childNode] of node.children) {
words.push(...this._collectWords(childNode, prefix + char));
}
return words;
}
}
四、性能优化与内存管理
4.1 算法性能优化技巧
// 1. 使用Web Workers进行CPU密集型计算
// main.js
const worker = new Worker('worker.js');
worker.postMessage({ data: largeArray });
worker.onmessage = event => {
console.log('Result:', event.data);
};
// worker.js
self.onmessage = event => {
const result = heavyComputation(event.data.data);
self.postMessage(result);
};
// 2. 使用requestIdleCallback进行调度
function processInBackground(tasks) {
function processTask(deadline) {
while (tasks.length > 0 && deadline.timeRemaining() > 0) {
const task = tasks.shift();
executeTask(task);
}
if (tasks.length > 0) {
requestIdleCallback(processTask);
}
}
requestIdleCallback(processTask);
}
// 3. 使用WeakMap和WeakSet优化内存
// WeakMap的键是弱引用，不影响垃圾回收
const weakCache = new WeakMap();
function expensiveComputation(obj) {
if (weakCache.has(obj)) {
return weakCache.get(obj);
}
const result = /* 复杂计算 */;
weakCache.set(obj, result);
return result;
}
// 4. 防抖与节流优化
function debounce(fn, delay) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
function throttle(fn, limit) {
let inThrottle;
return function(...args) {
if (!inThrottle) {
fn.apply(this, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}
// 5. 使用位运算优化
// 判断奇偶
const isEven = n => (n & 1) === 0;
// 交换两个数（不使用临时变量）
let a = 5, b = 10;
a ^= b;
b ^= a;
a ^= b;
// 判断2的幂
const isPowerOfTwo = n => n > 0 && (n & (n - 1)) === 0;
4.2 数据缓存与记忆化
// 1. 记忆化函数（Memoization）
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;
};
}
// 使用
const factorial = memoize(n => {
if (n <= 1) return 1;
return n * factorial(n - 1);
});
// 2. LRU缓存实现
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);
} else if (this.cache.size >= this.capacity) {
// 删除最旧的项
const oldestKey = this.cache.keys().next().value;
this.cache.delete(oldestKey);
}
this.cache.set(key, value);
}
}
// 3. 使用Proxy实现智能缓存
function createCachedApi(apiFunction) {
const cache = new Map();
return new Proxy(apiFunction, {
apply(target, thisArg, args) {
const key = JSON.stringify(args);
if (cache.has(key)) {
console.log('Cache hit:', key);
return Promise.resolve(cache.get(key));
}
return target.apply(thisArg, args).then(result => {
cache.set(key, result);
return result;
});
}
});
}
五、实用算法与设计模式
5.1 函数式编程实用算法
// 1. 函数组合与管道
const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
// 使用
const add = x => y => x + y;
const multiply = x => y => x * y;
const square = x => x * x;
const compute = pipe(
add(5), // x + 5
multiply(2), // (x+5)*2
square // ((x+5)*2)^2
);
console.log(compute(3)); // ((3+5)*2)^2 = 256
// 2. 柯里化工具函数
const curry = fn => {
const arity = fn.length;
return function curried(...args) {
if (args.length >= arity) {
return fn.apply(this, args);
} else {
return (...moreArgs) => curried.apply(this, args.concat(moreArgs));
}
};
};
// 使用柯里化
const sum = curry((a, b, c) => a + b + c);
const add5 = sum(5);
const add5And10 = add5(10);
console.log(add5And10(15)); // 30
// 3. 惰性求值与无限序列
function* naturalNumbers() {
let n = 1;
while (true) {
yield n++;
}
}
// 获取前10个偶数
const first10Evens = [...naturalNumbers()]
.filter(n => n % 2 === 0)
.slice(0, 10);
// 4. Transducer（转换器）模式
const mapTransducer = fn => next => (acc, val) => next(acc, fn(val));
const filterTransducer = predicate => next => (acc, val) =>
predicate(val) ? next(acc, val) : acc;
const transduce = (transducer, reducer, initial, collection) => {
const transform = transducer(reducer);
return collection.reduce(transform, initial);
};
// 使用
const numbers = [1, 2, 3, 4, 5];
const xform = compose(
mapTransducer(x => x * 2),
filterTransducer(x => x > 5)
);
const result = transduce(xform, (acc, val) => [...acc, val], [], numbers);
// [6, 8, 10]
5.2 实用数据处理算法
// 1. 数据分组与聚合
function groupBy(array, keyFn) {
return array.reduce((groups, item) => {
const key = keyFn(item);
if (!groups[key]) groups[key] = [];
groups[key].push(item);
return groups;
}, {});
}
// 使用
const students = [
{ name: 'Alice', grade: 'A', subject: 'Math' },
{ name: 'Bob', grade: 'B', subject: 'Math' },
{ name: 'Charlie', grade: 'A', subject: 'Science' }
];
const bySubject = groupBy(students, s => s.subject);
// 2. 数据采样与分页
function paginate(array, pageSize, pageNumber) {
const start = (pageNumber - 1) * pageSize;
const end = start + pageSize;
return array.slice(start, end);
}
function reservoirSampling(array, k) {
const sample = array.slice(0, k);
for (let i = k; i < array.length; i++) {
const j = Math.floor(Math.random() * (i + 1));
if (j < k) {
sample[j] = array[i];
}
}
return sample;
}
// 3. 数据验证与清洗
const validators = {
required: value => value != null && value.toString().trim() !== '',
email: value => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
minLength: min => value => value.length >= min,
maxLength: max => value => value.length <= max,
pattern: regex => value => regex.test(value)
};
function validate(data, rules) {
const errors = {};
for (const [field, fieldRules] of Object.entries(rules)) {
for (const rule of fieldRules) {
if (!rule.validator(data[field])) {
errors[field] = rule.message;
break;
}
}
}
return errors;
}
// 4. 数据转换管道
class DataPipeline {
constructor() {
this.steps = [];
}
addStep(fn) {
this.steps.push(fn);
return this;
}
process(data) {
return this.steps.reduce((acc, step) => step(acc), data);
}
}
// 使用
const pipeline = new DataPipeline()
.addStep(data => data.filter(item => item.active))
.addStep(data => data.map(item => ({
...item,
score: item.points * item.multiplier
})))
.addStep(data => data.sort((a, b) => b.score - a.score))
.addStep(data => data.slice(0, 10));
如果您喜欢此文章，请收藏、点赞、评论，谢谢，祝您快乐每一天。