前端涨薪功法：无处不在的双向链表数据结构

道可到
1,755 阅读7分钟

当代前端技术中，许多应用程序都需要快速地处理大量的数据。在处理这些数据时，数据结构的选择是至关重要的。双向链表是一种高效的数据结构，可以帮助我们在处理数据时提高效率。本文将从浅入深地介绍双向链表的重要性，并提供使用React、Vue、Svelte、Lodash和Next.js等前端框架的示例。

第一部分：什么是双向链表？

双向链表是一种常见的数据结构，它由一系列节点组成，每个节点都包含一个数据元素和两个指针，分别指向前一个和后一个节点。这种结构允许我们在链表中快速插入和删除节点，而不需要在链表中移动整个数据集。这是一个非常有用的优化，可以大大提高应用程序的效率。

双向链表的一个重要特性是它可以很容易地支持反向遍历。这是因为每个节点都有一个指向前一个节点的指针，这使得在访问节点时可以轻松地从尾部向头部遍历整个链表。这种能力在许多应用程序中都非常有用，比如实现一个可滚动的列表或者实现一个撤销/重做功能。

下面是一个简单的双向链表的实现，其中每个节点都是一个包含数据和前向和后向指针的对象：

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

class DoublyLinkedList {
  constructor() {
    this.head = null;
    this.tail = null;
  }

  add(value) {
    const node = new DoublyLinkedListNode(value);

    if (this.head === null) {
      this.head = node;
      this.tail = node;
    } else {
      node.prev = this.tail;
      this.tail.next = node;
      this.tail = node;
    }
  }

  remove(node) {
    if (node.prev === null) {
      this.head = node.next;
    } else {
      node.prev.next = node.next;
    }

    if (node.next === null) {
      this.tail = node.prev;
    } else {
      node.next.prev = node.prev;
    }
  }
}

在上面的代码中，我们定义了两个类：DoublyLinkedListNode和DoublyLinkedList。DoublyLinkedListNode类定义了一个节点，其中包含一个值和指向前一个和后一个节点的指针。DoublyLinkedList类定义了一个双向链表，其中包含一个头节点和一个尾节点，以及一个添加节点和删除节点的方法。

在下一部分中，我们将探讨双向链表在React、Vue和Svelte等前端框架中的应用。

第二部分：双向链表在React、Vue和Svelte中的应用

React、Vue和Svelte等前端框架都提供了一种方便的方式来处理和呈现数据。在这些框架中，我们通常使用状态(state)来管理应用程序中的数据。当应用程序状态发生改变时，框架会自动重新渲染相应的组件。

双向链表可以在这些框架中用于优化数据的处理和呈现。比如，我们可以使用双向链表来管理一个可滚动的列表。在这种情况下，我们可以使用双向链表来存储所有列表项的数据，并使用框架的虚拟滚动技术来只渲染当前可见部分的列表项。这种方法可以大大提高性能，因为它允许我们只渲染必要的部分，而不必渲染整个列表。

下面是一个使用React和双向链表来实现可滚动列表的示例：

import React, { useState, useEffect } from 'react';

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

class DoublyLinkedList {
  constructor() {
    this.head = null;
    this.tail = null;
  }

  add(value) {
    const node = new DoublyLinkedListNode(value);

    if (this.head === null) {
      this.head = node;
      this.tail = node;
    } else {
      node.prev = this.tail;
      this.tail.next = node;
      this.tail = node;
    }
  }

  remove(node) {
    if (node.prev === null) {
      this.head = node.next;
    } else {
      node.prev.next = node.next;
    }

    if (node.next === null) {
      this.tail = node.prev;
    } else {
      node.next.prev = node.prev;
    }
  }
}

function ScrollingList({ data, renderItem, itemHeight, visibleItemCount }) {
  const [scrollPosition, setScrollPosition] = useState(0);
  const [startNode, setStartNode] = useState(null);
  const [endNode, setEndNode] = useState(null);

  useEffect(() => {
    const list = new DoublyLinkedList();
    data.forEach((item) => list.add(item));

    let node = list.head;
    let totalHeight = 0;

    while (node !== null && totalHeight <= scrollPosition) {
      totalHeight += itemHeight;
      node = node.next;
    }

    let start = node;

    while (node !== null && totalHeight <= scrollPosition + visibleItemCount * itemHeight) {
      totalHeight += itemHeight;
      node = node.next;
    }

    let end = node;

    setStartNode(start);
    setEndNode(end);
  }, [data, itemHeight, scrollPosition, visibleItemCount]);

  const handleScroll = (event) => {
    setScrollPosition(event.target.scrollTop);
  };

  return (
    <div style={{ height: `${visibleItemCount * itemHeight}px`, overflowY: 'scroll' }} onScroll={handleScroll}>
      {startNode !== null &&
        endNode !== null &&
        startNode !== endNode &&
        startNode.value !== undefined &&
        endNode.value !== undefined &&
        data.slice(data.indexOf(startNode.value), data.indexOf(endNode.value) + 1).map(renderItem)}
    </div>
  );
}

export default ScrollingList;

在上面的代码中，我们首先定义了DoublyLinkedListNode和DoublyLinkedList类，然后编写了一个名为ScrollingList的React组件，该组件使用双向链表来管理数据，并根据用户滚动位置动态呈现列表项。在组件中，我们使用useState hook来存储滚动位置、开始节点和结束节点，并使用useEffect hook在数据或滚动位置发生变化时重新计算开始和结束节点。最后，我们使用map方法将开始节点和结束节点之间的所有列表项呈现出来。

类似的，我们也可以在Vue和Svelte中使用双向链表来优化数据的处理和呈现。

在下一部分中，我们将探讨Lodash和Next.js等前端框架中使用双向链表的

第三部分：Lodash和Next.js中的双向链表

Lodash是一个流行的JavaScript实用程序库，提供了许多实用程序函数，可以大大简化JavaScript编程。其中之一就是Lodash提供了一个名为_.linkedlist的函数，可以用于创建双向链表。使用Lodash的双向链表可以方便地进行插入、删除和遍历操作。下面是一个使用Lodash的双向链表的示例：

import _ from 'lodash';

const linkedList = _.linkedlist([1, 2, 3, 4]);

linkedList.insert(2, 5);

linkedList.remove(1);

linkedList.forEach((value) => console.log(value));

在上面的代码中，我们首先使用_.linkedlist函数创建了一个双向链表，并将数组[1, 2, 3, 4]传递给它。然后，我们使用insert方法在第二个节点后插入了一个值为5的新节点，并使用remove方法删除了第一个节点。最后，我们使用forEach方法遍历了双向链表中的所有节点，并将它们的值打印到控制台上。

Next.js是一个流行的React应用程序框架，可以用于构建具有服务器端渲染(SSR)和静态站点生成(SSG)功能的React应用。使用Next.js，我们可以轻松地构建快速、可靠的React应用程序，并可以利用其内置的优化功能来提高性能。

在Next.js中，双向链表可以用于优化数据的处理和呈现，比如在需要大量呈现数据的页面中。我们可以使用双向链表来存储所有数据，并根据用户的滚动位置动态呈现数据，从而实现虚拟滚动。这种方法可以提高性能，因为它允许我们只呈现必要的部分数据，而不必呈现整个数据集。

下面是一个使用Next.js和双向链表来实现虚拟滚动的示例：

import { useState, useEffect } from 'react';
import _ from 'lodash';

const PAGE_SIZE = 20;

function ScrollingList({ data, renderItem }) {
  const [scrollPosition, setScrollPosition] = useState(0);
  const [startNode, setStartNode] = useState(null);
  const [endNode, setEndNode] = useState(null);
  const [linkedList, setLinkedList] = useState(null);

  useEffect(() => {
    const list = _.linkedlist(data);
    setLinkedList(list);

    let node = list.head();
    let totalHeight = 0;

    while (node !== null && totalHeight <= scrollPosition) {
      totalHeight += PAGE_SIZE;
      node = node.next();
    }

    let start = node;

    while (node !== null && totalHeight <= scrollPosition + window.innerHeight) {
      totalHeight += PAGE_SIZE;
      node = node.next();
    }

    let end = node;

    setStartNode(start);
    setEndNode(end);
  }, [data, scrollPosition]);

  const handleScroll = (event) => {
    setScrollPosition(event.target.scrollTop);
  };

  return (
    <div style={{ height: `${data.length * PAGE_SIZE}px`, overflowY: 'scroll' }} onScroll={handleScroll}>
      {startNode !== null &&
        endNode !== null &&
        startNode !== endNode &&
        startNode.value() !== undefined &&
        endNode.value() !== undefined &&
        linkedList
          .slice(linkedList.indexOf(startNode), linkedList.indexOf(endNode) + 1)
          .map((node) => renderItem(node.value()))}
    </div>
  );
}

export default ScrollingList;

在上面的代码中，我们首先定义了一个名为ScrollingList的React组件，并使用useState hook来存储滚动位置、开始节点、结束节点和双向链表。在组件中，我们使用useEffect hook在数据或滚动位置发生变化时重新计算开始节点和结束节点。最后，我们使用map方法将开始节点和结束节点之间的所有节点呈现出来。

在这个示例中，我们使用了Lodash的_.linkedlist函数来创建双向链表，并使用slice方法从双向链表中提取需要呈现的节点。通过这种方式，我们可以只呈现用户需要看到的数据，从而提高性能。

总的来说，双向链表是一种非常有用的数据结构，可以用于优化数据的处理和呈现。在JavaScript中，我们可以使用Lodash的_.linkedlist函数来创建双向链表，并使用它来进行插入、删除和遍历操作。在Next.js中，双向链表可以用于优化数据的呈现，从而提高应用程序的性能。通过使用双向链表和虚拟滚动，我们可以只呈现必要的部分数据，而不必呈现整个数据集。

实际应用

双向链表虽然在数据结构领域中应用广泛，但实际上也可以应用于许多实际场景中。下面是一些实际应用的例子：

  1. 历史记录：浏览器中的历史记录就可以用双向链表来实现，每次访问一个新页面时，就在链表的尾部添加一个新节点，当用户点击“后退”按钮时，就从链表的尾部删除一个节点，并将其添加到链表的头部。
  2. 编辑器撤销/重做：在一个文本编辑器中，可以使用双向链表来实现撤销/重做功能。每次用户进行编辑操作时，就在链表的尾部添加一个新节点，当用户点击“撤销”按钮时，就从链表的尾部删除一个节点，并将其添加到链表的头部，当用户点击“重做”按钮时，就从链表的头部删除一个节点，并将其添加到链表的尾部。
  3. 菜单导航：在一个菜单导航中，可以使用双向链表来实现上下左右的导航功能。每个菜单项都可以看作是一个节点，当用户选择一个菜单项时，就将其作为链表的当前节点，当用户按下左箭头时，就将当前节点的左边节点作为当前节点，当用户按下右箭头时，就将当前节点的右边节点作为当前节点，当用户按下上箭头时，就将当前节点的上边节点作为当前节点，当用户按下下箭头时，就将当前节点的下边节点作为当前节点。
  4. 游戏中的物品栏：在一些游戏中，可以使用双向链表来实现物品栏。每个物品都可以看作是一个节点，当用户将物品添加到物品栏中时，就在链表的尾部添加一个新节点，当用户选择一个物品时，就将其作为链表的当前节点，当用户按下左箭头时，就将当前节点的左边节点作为当前节点，当用户按下右箭头时，就将当前节点的右边节点作为当前节点。

以上只是双向链表的一些实际应用的例子，实际上，双向链表可以应用于许多其他场景中，只要我们需要维护一个双向链表结构的数据，就可以使用双向链表来实现。

总结

在本文中，我们介绍了双向链表的基本概念和实现方式，以及如何使用双向链表来管理组件状态和实现一些实际应用场景。双向链表是一种非常有用的数据结构，可以帮助我们更轻松地操作数据，并提高代码的可读性和可维护性。如果您还没有使用过双向链表，那么我希望这篇文章能够帮助您更好地了解它，并在实际开发中应用它。

avatar
文章
阅读
粉丝