链表合并：双指针与递归

作为前端工程师，链表操作看似与日常开发无关，实则隐藏在虚拟DOM对比、状态管理库等底层逻辑中。有序链表的合并正是理解这些关键机制的绝佳入口。本文将从真实场景出发，解析两种主流解法及其性能差异。

用户行为日志合并

假设我们需要合并来自两个系统的时间戳有序日志流，用于行为分析：

javascript 复制代码

// 系统A的日志链表（时间戳升序）
const logListA = {
  ts: 1000,
  event: 'click',
  next: {
    ts: 1500,
    event: 'scroll',
    next: null
  }
};

// 系统B的日志链
const logListB = {
  ts: 1200,
  event: 'hover',
  next: {
    ts: 1800,
    event: 'input',
    next: null
  }
};

需求：将两个日志流合并为单一时间顺序链表，前端实时展示用户完整操作序列。

数据结构表示

JavaScript中链表用嵌套对象表示（实际开发常用类封装）：

javascript 复制代码

class ListNode {
  constructor(val, next = null) {
    this.val = val;  // 存储数据
    this.next = next; // 指向下个节点
  }
}

// 示例：创建[1,3,5]链表
const list = new ListNode(1, new ListNode(3, new ListNode(5));

方法一：双指针迭代法（最优空间复杂）

核心思路：

创建虚拟头节点（dummy）作为合并起点
双指针遍历双链表，较小值优先接入新链
将剩余非空链表接至尾部

javascript 复制代码

const mergeTwoLists = (l1, l2) => {
  const dummy = new ListNode(-1); // 哨兵节点(占位符)
  let current = dummy;
  
  // 双指针齐头并进
  while (l1 && l2) {
    if (l1.val <= l2.val) {
      current.next = l1; // 接入l1的节点
      l1 = l1.next;     // l1指针前移
    } else {
      current.next = l2; // 接入l2的节点
      l2 = l2.next;
    }
    current = current.next; // 新链指针前移
  }
  
  // 处理剩余节点
  current.next = l1 || l2;
  return dummy.next; // 返回真实头节点
};

可视化过程（合并[1,4]和[2,3]）：

rust 复制代码

步骤0: dummy -> null | l1@1, l2@2
步骤1: dummy -> 1   | l1@4, l2@2
步骤2: dummy -> 1 -> 2 | l1@4, l2@3
步骤3: dummy -> 1 -> 2 -> 3 | l1@4, l2@null
步骤4: dummy -> 1 -> 2 -> 3 -> 4

复杂度分析：

时间复杂度：O(m+n) ------ 遍历所有节点一次
空间复杂度：O(1) ------ 仅使用常数级额外空间

方法二：递归解法（思维更简洁）

核心思路：

比较两链表头节点值大小
较小节点作为当前头，其next指向剩余链表的合并结果

javascript 复制代码

const mergeRecursive = (l1, l2) => {
  if (!l1) return l2; // 递归基：l1空返回l2
  if (!l2) return l1; // 递归基：l2空返回l1
  
  if (l1.val <= l2.val) {
    l1.next = mergeRecursive(l1.next, l2); // l1当头，连接剩余元素
    return l1;
  } else {
    l2.next = mergeRecursive(l1, l2.next); // l2当头，连接剩余元素
    return l2;
  }
};

执行栈分析（合并[1,4]和[2,3]）：

sql 复制代码

1. merge(1,2): 1→merge(4,2)
2. merge(4,2): 2→merge(4,3)
3. merge(4,3): 3→merge(4,null)
4. merge(4,null): 4
结果：1→2→3→4

复杂度分析：

时间复杂度 O(m+n) ------ 同样遍历所有节点
空间复杂度 O(m+n) ------ 递归调用栈深度

双指针 vs 递归：如何选择？

维度	双指针迭代法	递归法
空间复杂度	O(1) 最优	O(n) 栈深度风险
代码可读性	略繁琐	简洁优雅
适用场景	长链表（>2000节点）	短链表（<200节点）
稳定性	无栈溢出风险	长链表易爆栈

React中虚拟DOM对比需要处理大量节点，优先选择迭代法避免栈溢出；小型状态合并可使用递归提升代码可读性。

边界条件处理技巧

空链表处理：

javascript 复制代码

// 迭代法中已通过 || 操作符处理
current.next = l1 || l2; 

// 递归法通过递归基处理
if (!l1) return l2;

引用不变性：

javascript 复制代码

// 错误！直接修改原始链表
const merged = l1; 
while (...) { ... }

// 正确：使用current指针操作
const dummy = new ListNode(-1);
let current = dummy;

前端实战扩展

在Vue/React中合并有序状态流：

javascript 复制代码

// 合并两个有序操作记录（Redux场景）
function mergeActionLogs(logA, logB) {
  // 转换为链表
  const listA = arrayToList(logA);
  const listB = arrayToList(logB);
  
  // 合并并转回数组
  return listToArray(mergeTwoLists(listA, listB));
}

// 数组转链表工具函数
const arrayToList = arr => 
  arr.reduceRight((next, val) => new ListNode(val, next), null);

小结

掌握链表合并的双指针迭代法，你已获得解决复杂问题的基础。此算法延伸可应对：

合并K个有序链表（优先队列）
环形链表检测（快慢指针）
LRU缓存淘汰（链表+哈希表）

记住：90%前端面试链表题本质是指针操作+边界处理，双指针法正是最优解的核心模式。