TS的数据结构使用实战(链表)——TypeScript 类、泛型的使用实践记录 | 青训营

引言

在 TypeScript 中,泛型是一项强大的特性,它可以帮助我们编写通用的、类型安全的代码。泛型是一种参数化类型的机制,它可以在定义函数、类或接口时使用,以增加代码的通用性。通过使用泛型,我们可以编写能够适用于不同类型的代码,从而提高代码的可复用性和灵活性。泛型还可以帮助我们在编译时捕获类型错误,提供更好的类型安全性。

数据结构,可以说是编程、计算机相关工作从业者的基本功。数据结构可通过编程语言所提供的数据类型引用及其他操作加以实现。

本系列文章会从实践的角度去讲解一些常用的数据结构在ts中的应用实例,因为要保证数据结构的通用性,把数据结构和数据本身的类型分离开,所以就会用到ts的泛型。

## 链表(Linked List)

链表是一种常见的数据结构,它由一系列节点组成,根据节点关系的不同,链表又分为单向链表和双向链表。

  • 单向链表:每个节点包含一个值和指向下一个节点的指针。
  • 双向链表:在单向链表的基础上,每个节点还增加一个指向上一个节点的指针。

通过使用泛型类和泛型接口,我们可以构建一个通用的单向链表数据结构。

链表的类式实现

链表的实现主要是维护一个链表头节点,然后对链表的各种操作都是以头节点为入口,遍历所有节点而进行操作的。所有数据节点像链子一样联系在一起,所以这个数据结构叫做链表。

ts 复制代码
class ListNode<T> {
  value: T;
  next: ListNode<T> | null;

  constructor(value: T) {
    this.value = value;
    this.next = null;
  }
}

class LinkedList<T> {
  private head: ListNode<T> | null;

  constructor() {
    this.head = null;
  }

  add(value: T) {
    const newNode = new ListNode(value);

    if (!this.head) {
      this.head = newNode;
    } else {
      let current = this.head;
      while (current.next) {
        current = current.next;
      }
      current.next = newNode;
    }
  }

  remove(value: T) {
    if (!this.head) {
      return;
    }

    if (this.head.value === value) {
      this.head = this.head.next;
      return;
    }

    let current = this.head;
    while (current.next) {
      if (current.next.value === value) {
        current.next = current.next.next;
        return;
      }
      current = current.next;
    }
  }

  print() {
    let current = this.head;
    while (current) {
      console.log(current.value);
      current = current.next;
    }
  }
}

通过使用泛型类 ListNode<T>LinkedList<T>,我们可以创建一个可以存储任意类型元素的链表。使用泛型约束,我们可以限制节点的值为特定类型,确保链表中的元素类型一致。

链表的函数式实现

链表的函数式实现与栈、队列的实现很像,都是把数据利用闭包存储,再返回数据的操作方法。

ts 复制代码
type ListNode<T> = {
  value: T;
  next: ListNode<T> | null;
};

type LinkedList<T> = {
  add: (value: T) => void;
  remove: (value: T) => void;
  print: () => void;
};

function newLinkedList<T>(): LinkedList<T> {
  let head: ListNode<T> | null = null;

  return {
    add: (value: T) => {
      const newNode: ListNode<T> = {
        value: value,
        next: null,
      };

      if (!head) {
        head = newNode;
      } else {
        let current = head;
        while (current.next) {
          current = current.next;
        }
        current.next = newNode;
      }
    },

    remove: (value: T) => {
      if (!head) {
        return;
      }

      if (head.value === value) {
        head = head.next;
        return;
      }

      let current = head;
      while (current.next) {
        if (current.next.value === value) {
          current.next = current.next.next;
          return;
        }
        current = current.next;
      }
    },

    print: () => {
      let current = head;
      while (current) {
        console.log(current.value);
        current = current.next;
      }
    },
  };
}

这样,一个链表的函数式实现(也可以叫工厂函数)就完成了


本系列文章比较注重实战,提供实战代码,并为想要了解原理的同学提供了相应链接,大家直接点击文章中的链接跳转即可。如果觉得文章有帮助,可以关注一下专栏噢~~

相关推荐
REDcker18 分钟前
浏览器端Web程序性能分析与优化实战 DevTools指标与工程清单
开发语言·前端·javascript·vue·ecmascript·php·js
donecoding2 小时前
一个 sudo 引发的血案:npm 全局包权限错乱彻底修复
前端·node.js·前端工程化
风骏时光牛马2 小时前
Raku正则匹配与数据批量处理实操案例
前端
nbwenren2 小时前
2026实测:Gemini 3 镜像站视觉能力实践——拍照原型图,一键生成 HTML+CSS 代码
前端·css·html
Lee川2 小时前
Prisma 实战指南:像搭积木一样设计古诗词数据库
前端·数据库·后端
jinanwuhuaguo2 小时前
(第二十九篇)OpenClaw 实时与具身的跃迁——从异步孤岛到数字世界的“原住民”
前端·网络·人工智能·重构·openclaw
广州华水科技2 小时前
深度测评2026年单北斗GNSS位移监测系统推荐,与高口碑变形监测设备一同引领行业新风尚
前端
Alice-YUE3 小时前
【js高频八股】防抖与节流
开发语言·前端·javascript·笔记·学习·ecmascript
是上好佳佳佳呀4 小时前
【前端(十一)】JavaScript 语法基础笔记(多语言对比)
前端·javascript·笔记