JavaScript 数据结构与算法实战

于 2025-05-15 13:47:03 发布
阅读量1.1k 收藏 28
点赞数 44
分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript 前端 面试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Chen7Chan/article/details/147981139
版权

JavaScript 数据结构与算法实战

引言

在前端开发中，优雅的界面背后往往是高效的数据处理逻辑。当应用规模扩大，数据量增长，选择合适的数据结构和算法成为提升性能的关键。本文将探讨JavaScript中常见数据结构与算法的部分实际应用。

1. 数组操作优化

基础理解

JavaScript数组是最常用的数据结构，但不当使用会导致性能问题。

// 低效数组操作
const items = [];
for (let i = 0; i < 10000; i++) {
  items.unshift(i); // O(n)操作，每次都需要移动所有元素
}

// 优化方案
const betterItems = [];
for (let i = 0; i < 10000; i++) {
  betterItems.push(i); // O(1)操作
}
betterItems.reverse(); // 只需一次O(n)操作

数组方法性能对比

方法时间复杂度适用场景
push/popO(1)栈操作，追加或删除末尾元素
unshift/shiftO(n)需要在数组开头添加/删除元素
spliceO(n)需要在中间插入或删除元素
sliceO(n)需要数组副本而不修改原数组
filter/mapO(n)需要基于条件创建新数组

实战技巧：虚拟列表优化

处理大型数据列表时，只渲染可视区域的数据可显著提升性能：

function VirtualList({ items, itemHeight, windowHeight }) {
  const [scrollTop, setScrollTop] = useState(0);
  
  // 计算可视区域内的元素
  const startIndex = Math.floor(scrollTop / itemHeight);
  const endIndex = Math.min(
    items.length - 1,
    Math.floor((scrollTop + windowHeight) / itemHeight)
  );
  
  const visibleItems = items.slice(startIndex, endIndex + 1);
  
  return (
    <div 
      style={{ height: `${windowHeight}px`, overflow: 'auto' }}
      onScroll={(e) => setScrollTop(e.currentTarget.scrollTop)}
    >
      <div style={{ height: `${items.length * itemHeight}px`, position: 'relative' }}>
        {visibleItems.map((item, index) => (
          <div 
            key={startIndex + index}
            style={{
              position: 'absolute',
              top: `${(startIndex + index) * itemHeight}px`,
              height: `${itemHeight}px`
            }}
          >
            {item.content}
          </div>
        ))}
      </div>
    </div>
  );
}

2. 对象与哈希表

Map vs Object 性能对比

// 测试对象和Map的插入和查找性能
function testPerformance() {
  const iterations = 1000000;
  const obj = {};
  const map = new Map();
  
  console.time('Object insertion');
  for (let i = 0; i < iterations; i++) {
    obj[`key${i}`] = i;
  }
  console.timeEnd('Object insertion');
  
  console.time('Map insertion');
  for (let i = 0; i < iterations; i++) {
    map.set(`key${i}`, i);
  }
  console.timeEnd('Map insertion');
  
  console.time('Object lookup');
  for (let i = 0; i < iterations; i++) {
    const val = obj[`key${Math.floor(Math.random() * iterations)}`];
  }
  console.timeEnd('Object lookup');
  
  console.time('Map lookup');
  for (let i = 0; i < iterations; i++) {
    const val = map.get(`key${Math.floor(Math.random() * iterations)}`);
  }
  console.timeEnd('Map lookup');
}

Map相比Object的优势：

  1. 键可以是任何类型，而不仅限于字符串或Symbol
  2. 保持插入顺序
  3. 内置size属性，无需Object.keys().length
  4. 对于频繁增删键值对，性能更优

实战：使用Map优化组件状态缓存

const componentCache = new Map();

function CachedComponent({ id, ...props }) {
  // 检查缓存
  if (!componentCache.has(id)) {
    // 生成复杂组件状态并缓存
    componentCache.set(id, calculateExpensiveState(props));
  }
  
  // 使用缓存的状态
  const cachedState = componentCache.get(id);
  
  return <div>{cachedState}</div>;
}

3. 链表实现与应用

虽然JavaScript没有内置链表，但可以轻松实现：

class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
  }
}

class LinkedList {
  constructor() {
    this.head = null;
    this.tail = null;
    this.length = 0;
  }
  
  append(value) {
    const node = new Node(value);
    if (!this.head) {
      this.head = node;
      this.tail = node;
    } else {
      this.tail.next = node;
      this.tail = node;
    }
    this.length++;
    return this;
  }
  
  prepend(value) {
    const node = new Node(value);
    if (!this.head) {
      this.head = node;
      this.tail = node;
    } else {
      node.next = this.head;
      this.head = node;
    }
    this.length++;
    return this;
  }
  
  // 其他实用方法: delete, find, toArray等
}

链表vs数组性能对比

操作数组链表
访问元素O(1)O(n)
头部插入/删除O(n)O(1)
尾部插入/删除O(1)O(1)*
中间插入/删除O(n)O(n)*

*单链表尾部插入需要O(n)时间，但我们的实现使用tail指针优化为O(1)

实战：撤销/重做功能

链表是实现编辑器撤销/重做功能的理想结构：

class EditHistory {
  constructor() {
    this.history = new LinkedList();
    this.current = null; // 当前状态指针
  }
  
  addState(state) {
    // 如果在历史中间添加新状态，删除当前之后的所有状态
    if (this.current && this.current !== this.history.tail) {
      let node = this.current;
      while (node.next) {
        const temp = node.next;
        node.next = temp.next;
        this.history.length--;
      }
      this.history.tail = this.current;
    }
    
    // 添加新状态
    this.history.append(state);
    this.current = this.history.tail;
    return state;
  }
  
  undo() {
    if (!this.current || this.current === this.history.head) return null;
    
    let node = this.history.head;
    while (node.next !== this.current) {
      node = node.next;
    }
    
    this.current = node;
    return node.value;
  }
  
  redo() {
    if (!this.current || !this.current.next) return null;
    
    this.current = this.current.next;
    return this.current.value;
  }
}

4. 树结构与DOM优化

DOM本质上是一棵树，理解树结构对前端性能至关重要：

class TreeNode {
  constructor(value) {
    this.value = value;
    this.children = [];
  }
  
  addChild(value) {
    const child = new TreeNode(value);
    this.children.push(child);
    return child;
  }
}

实战：虚拟DOM的原理实现

// 简化版虚拟DOM节点
function vnode(tag, props, children) {
  return { tag, props, children };
}

// 创建真实DOM
function createElement(vnode) {
  if (typeof vnode === 'string') {
    return document.createTextNode(vnode);
  }
  
  const element = document.createElement(vnode.tag);
  
  // 设置属性
  if (vnode.props) {
    Object.keys(vnode.props).forEach(key => {
      element.setAttribute(key, vnode.props[key]);
    });
  }
  
  // 添加子节点
  if (vnode.children) {
    vnode.children.forEach(child => {
      element.appendChild(createElement(child));
    });
  }
  
  return element;
}

// diff算法简化版
function diff(oldVNode, newVNode) {
  // 1. 节点类型不同，完全替换
  if (oldVNode.tag !== newVNode.tag) {
    return { type: 'REPLACE', newVNode };
  }
  
  // 2. 文本节点处理
  if (typeof oldVNode === 'string' && typeof newVNode === 'string') {
    if (oldVNode !== newVNode) {
      return { type: 'TEXT', text: newVNode };
    }
    return null;
  }
  
  // 3. 属性比较
  const propsPatches = {};
  let propsChanged = false;
  
  // 检查新增和修改的属性
  if (newVNode.props) {
    Object.keys(newVNode.props).forEach(key => {
      if (!oldVNode.props || oldVNode.props[key] !== newVNode.props[key]) {
        propsPatches[key] = newVNode.props[key];
        propsChanged = true;
      }
    });
  }
  
  // 检查删除的属性
  if (oldVNode.props) {
    Object.keys(oldVNode.props).forEach(key => {
      if (!newVNode.props || !(key in newVNode.props)) {
        propsPatches[key] = null;
        propsChanged = true;
      }
    });
  }
  
  // 4. 子节点比较 (简化版)
  const childrenPatches = [];
  const minLen = Math.min(
    oldVNode.children ? oldVNode.children.length : 0,
    newVNode.children ? newVNode.children.length : 0
  );
  
  for (let i = 0; i < minLen; i++) {
    const childPatch = diff(oldVNode.children[i], newVNode.children[i]);
    if (childPatch) {
      childrenPatches.push({ index: i, patch: childPatch });
    }
  }
  
  // 处理新增的子节点
  if (newVNode.children && oldVNode.children && newVNode.children.length > oldVNode.children.length) {
    for (let i = minLen; i < newVNode.children.length; i++) {
      childrenPatches.push({
        index: i,
        patch: { type: 'ADD', newVNode: newVNode.children[i] }
      });
    }
  }
  
  // 处理需要删除的节点
  if (oldVNode.children && newVNode.children && oldVNode.children.length > newVNode.children.length) {
    childrenPatches.push({
      type: 'REMOVE_FROM',
      startIdx: newVNode.children.length
    });
  }
  
  return {
    type: 'UPDATE',
    props: propsChanged ? propsPatches : null,
    children: childrenPatches.length > 0 ? childrenPatches : null
  };
}

// 应用diff
function patch(node, patches) {
  if (!patches) return node;
  
  switch (patches.type) {
    case 'REPLACE':
      const newNode = createElement(patches.newVNode);
      node.parentNode.replaceChild(newNode, node);
      return newNode;
    case 'TEXT':
      node.textContent = patches.text;
      return node;
    case 'UPDATE':
      // 更新属性
      if (patches.props) {
        Object.keys(patches.props).forEach(key => {
          if (patches.props[key] === null) {
            node.removeAttribute(key);
          } else {
            node.setAttribute(key, patches.props[key]);
          }
        });
      }
      
      // 更新子节点
      if (patches.children) {
        patches.children.forEach(childPatch => {
          if (childPatch.type === 'REMOVE_FROM') {
            // 删除多余节点
            for (let i = node.childNodes.length - 1; i >= childPatch.startIdx; i--) {
              node.removeChild(node.childNodes[i]);
            }
          } else {
            patch(node.childNodes[childPatch.index], childPatch.patch);
          }
        });
      }
      return node;
    case 'ADD':
      node.appendChild(createElement(patches.newVNode));
      return node;
    default:
      return node;
  }
}

这个简化版虚拟DOM实现展示了框架如React的核心原理，通过对比树结构差异实现高效DOM更新。

5. 常见算法优化

排序算法性能对比

// 冒泡排序 - O(n²)
function bubbleSort(arr) {
  const len = arr.length;
  for (let i = 0; i < len; i++) {
    for (let j = 0; j < len - i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
      }
    }
  }
  return arr;
}

// 快速排序 - 平均O(n log n)
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)];
}

// 测试排序性能
function testSortPerformance() {
  const size = 10000;
  const arr = Array.from({ length: size }, () => Math.floor(Math.random() * size));
  
  const arr1 = [...arr];
  const arr2 = [...arr];
  const arr3 = [...arr];
  
  console.time('Bubble Sort');
  bubbleSort(arr1);
  console.timeEnd('Bubble Sort');
  
  console.time('Quick Sort');
  quickSort(arr2);
  console.timeEnd('Quick Sort');
  
  console.time('JavaScript built-in sort');
  arr3.sort((a, b) => a - b);
  console.timeEnd('JavaScript built-in sort');
}

实战：防抖与节流优化事件处理

// 防抖：等待一段时间后执行，如果期间再次触发则重新计时
function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

// 节流：限制函数在一定时间内只执行一次
function throttle(fn, limit) {
  let inThrottle = false;
  return function(...args) {
    if (!inThrottle) {
      fn.apply(this, args);
      inThrottle = true;
      setTimeout(() => {
        inThrottle = false;
      }, limit);
    }
  };
}

// 使用示例
const expensiveCalculation = () => {
  console.log('Calculating...');
  // 复杂计算...
};

// 窗口调整时防抖处理
window.addEventListener('resize', debounce(expensiveCalculation, 300));

// 滚动时节流处理
window.addEventListener('scroll', throttle(expensiveCalculation, 300));

动态规划优化递归

斐波那契数列计算对比：

// 普通递归实现 - O(2^n)
function fibRecursive(n) {
  if (n <= 1) return n;
  return fibRecursive(n - 1) + fibRecursive(n - 2);
}

// 动态规划优化 - O(n)
function fibDP(n) {
  const dp = [0, 1];
  for (let i = 2; i <= n; i++) {
    dp[i] = dp[i - 1] + dp[i - 2];
  }
  return dp[n];
}

// 测试性能
console.time('Recursive Fibonacci (n=35)');
fibRecursive(35);
console.timeEnd('Recursive Fibonacci (n=35)');

console.time('DP Fibonacci (n=35)');
fibDP(35);
console.timeEnd('DP Fibonacci (n=35)');

6. 前端实际应用案例

实现高效搜索建议

// 前缀树(Trie)实现搜索建议功能
class TrieNode {
  constructor() {
    this.children = {};
    this.isEndOfWord = false;
    this.suggestions = [];
  }
}

class Trie {
  constructor() {
    this.root = new TrieNode();
  }
  
  insert(word) {
    let node = this.root;
    
    for (const char of word) {
      if (!node.children[char]) {
        node.children[char] = new TrieNode();
      }
      node = node.children[char];
      
      // 为每个前缀存储最多5个建议
      if (!node.suggestions.includes(word) && node.suggestions.length < 5) {
        node.suggestions.push(word);
      }
    }
    
    node.isEndOfWord = true;
  }
  
  getSuggestions(prefix) {
    let node = this.root;
    
    for (const char of prefix) {
      if (!node.children[char]) {
        return [];
      }
      node = node.children[char];
    }
    
    return node.suggestions;
  }
}

// 使用示例
const searchTrie = new Trie();
const words = ["apple", "application", "appreciate", "approach", "appropriate", "approve", "approximate", "architect", "area", "argue"];

words.forEach(word => searchTrie.insert(word));

function handleSearch(event) {
  const prefix = event.target.value;
  const suggestions = searchTrie.getSuggestions(prefix);
  displaySuggestions(suggestions);
}

function displaySuggestions(suggestions) {
  const suggestionsContainer = document.getElementById('suggestions');
  suggestionsContainer.innerHTML = '';
  
  suggestions.forEach(suggestion => {
    const div = document.createElement('div');
    div.textContent = suggestion;
    div.className = 'suggestion-item';
    div.onclick = () => {
      document.getElementById('search-input').value = suggestion;
      suggestionsContainer.innerHTML = '';
    };
    suggestionsContainer.appendChild(div);
  });
}

// 添加防抖功能
document.getElementById('search-input').addEventListener('input', debounce(handleSearch, 300));

实现无限滚动列表

class InfiniteScroll {
  constructor(container, loadItems, options = {}) {
    this.container = container;
    this.loadItems = loadItems;
    this.options = {
      itemHeight: 50,
      batchSize: 20,
      buffer: 10,
      ...options
    };
    
    this.items = [];
    this.displayedItems = [];
    this.loading = false;
    this.page = 0;
    this.lastScrollTop = 0;
    
    this.init();
  }
  
  async init() {
    this.container.style.overflowY = 'auto';
    this.container.style.position = 'relative';
    
    this.itemsContainer = document.createElement('div');
    this.itemsContainer.style.position = 'relative';
    this.container.appendChild(this.itemsContainer);
    
    // 设置初始填充高度
    this.topSpacer = document.createElement('div');
    this.bottomSpacer = document.createElement('div');
    this.itemsContainer.appendChild(this.topSpacer);
    this.itemsContainer.appendChild(this.bottomSpacer);
    
    // 加载初始数据
    await this.loadMore();
    
    // 监听滚动事件
    this.container.addEventListener('scroll', throttle(this.handleScroll.bind(this), 100));
    
    // 初始渲染
    this.updateView();
  }
  
  async loadMore() {
    if (this.loading) return;
    
    this.loading = true;
    const newItems = await this.loadItems(this.page, this.options.batchSize);
    
    if (newItems.length > 0) {
      this.items = [...this.items, ...newItems];
      this.page++;
    }
    
    this.loading = false;
    this.updateView();
  }
  
  updateView() {
    const containerHeight = this.container.clientHeight;
    const scrollTop = this.container.scrollTop;
    
    // 计算可见范围
    const startIndex = Math.max(0, Math.floor(scrollTop / this.options.itemHeight) - this.options.buffer);
    const endIndex = Math.min(
      this.items.length - 1,
      Math.ceil((scrollTop + containerHeight) / this.options.itemHeight) + this.options.buffer
    );
    
    // 更新填充元素高度
    this.topSpacer.style.height = `${startIndex * this.options.itemHeight}px`;
    this.bottomSpacer.style.height = `${(this.items.length - endIndex - 1) * this.options.itemHeight}px`;
    
    // 清除当前显示的元素
    this.displayedItems.forEach(item => item.el.remove());
    this.displayedItems = [];
    
    // 渲染可见元素
    for (let i = startIndex; i <= endIndex; i++) {
      if (i >= this.items.length) break;
      
      const item = this.items[i];
      const el = document.createElement('div');
      el.style.position = 'absolute';
      el.style.top = `${i * this.options.itemHeight}px`;
      el.style.height = `${this.options.itemHeight}px`;
      el.style.width = '100%';
      
      // 渲染内容
      el.innerHTML = `<div class="item">${item.content || item.text || JSON.stringify(item)}</div>`;
      
      this.itemsContainer.insertBefore(el, this.bottomSpacer);
      this.displayedItems.push({ index: i, el });
    }
    
    // 判断是否需要加载更多
    if (endIndex >= this.items.length - this.options.buffer * 2 && !this.loading) {
      this.loadMore();
    }
  }
  
  handleScroll() {
    this.updateView();
  }
}

// 使用示例
const container = document.getElementById('infinite-scroll-container');

const infiniteScroll = new InfiniteScroll(container, async (page, limit) => {
  // 模拟API请求
  return new Promise(resolve => {
    setTimeout(() => {
      const items = Array.from({ length: limit }, (_, i) => ({
        id: page * limit + i,
        content: `Item ${page * limit + i}`
      }));
      resolve(items);
    }, 300);
  });
});

总结

通过本文的学习，我们深入探讨了JavaScript中常见数据结构与算法的实际应用场景：

  1. 数组操作优化：理解数组方法的时间复杂度，选择合适的操作方法
  2. 对象与Map比较：在合适场景选择Map代替对象获得性能提升
  3. 链表实现：解决需要频繁首部插入删除的场景
  4. 树结构：理解DOM本质与虚拟DOM工作原理
  5. 算法优化：使用防抖、节流和动态规划等技术提升代码效率
  6. 前端实际应用：实现高效搜索建议和无限滚动等常见功能

掌握这些数据结构与算法不仅能帮助我们编写更高效的代码，更是前端面试中的重要考点。希望本文的内容能够对你的学习和工作有所帮助。

参考资源

如果你觉得这篇文章有帮助，欢迎点赞收藏，也期待在评论区看到你的想法和建议！👇

终身学习，共同成长。

咱们下一期见

💻

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值