JSON.stringify大对象报错：如何递归序列化Ngrx Store嵌套对象？

算力阿峰

2026-7-26

解决Ngrx大对象序列化"无效字符串长度"问题

问题分析

直接使用JSON.stringify序列化超大Ngrx action对象时，会因尝试一次性分配超出JS最大字符串长度（2^31-1字符）的内存块而触发"无效字符串长度"错误。你尝试的递归函数存在两个核心问题：

未构建合法的JSON结构，仅拼接嵌套对象的序列化结果，导致输出无效
忽略了原始值（字符串、数字等）的处理，丢失大量数据

解决方案

实现一个递归序列化函数，逐节点处理对象/数组，增量构建合法JSON字符串，避免一次性序列化整个大对象：

public state$: Observable<string | null> = this.store$.pipe(
  map((action: any) => this.stringifyDeep(action)),
  tap((state: string) => {
    if (this.last5State.length > 5) {
      this.last5State.shift();
    }
    this.last5State = [...this.last5State, state];
  }),
  catchError((err: unknown) => {
    console.error(err);
    return of(null);
  })
);

private stringifyDeep(value: any): string {
  // 处理null值
  if (value === null) {
    return 'null';
  }
  
  // 处理原始类型（字符串、数字、布尔、undefined）
  if (typeof value !== 'object') {
    return JSON.stringify(value);
  }
  
  // 处理数组
  if (Array.isArray(value)) {
    const elements = value.map(item => this.stringifyDeep(item)).join(',');
    return `[${elements}]`;
  }
  
  // 处理普通对象
  const entries = Object.entries(value).map(([key, val]) => {
    const keyStr = JSON.stringify(key);
    const valStr = this.stringifyDeep(val);
    return `${keyStr}:${valStr}`;
  }).join(',');
  
  return `{${entries}}`;
}