手动实现JSON.stringify的原理与实践-代码聚汇网

手动实现JSON.stringify的原理与实践

香香甜甜圈·2026-08-08·阅读 22 GEO检测（免费）

JSON.stringifyJavaScript序列化循环引用

|难度：普通|阅读约 27 分钟

1. 为什么需要手动实现JSON.stringify

在JavaScript开发中，我们经常需要将对象转换为JSON字符串。虽然浏览器原生提供了JSON.stringify方法，但手动实现它仍然是一个值得深入探讨的话题。这不仅能帮助我们理解JSON序列化的底层原理，还能应对一些特殊场景的需求。

原生JSON.stringify有几个明显的局限性：它无法正确处理循环引用，遇到这种情况会直接抛出错误；对某些特殊值（如undefined、函数、Symbol等）的处理方式可能不符合我们的预期；而且我们无法自定义特定类型的序列化行为。我曾经在一个项目中就遇到过这样的问题：需要将包含循环引用的复杂对象树序列化，原生的方法完全无法工作，最终不得不自己实现序列化逻辑。

手动实现JSON.stringify还能帮助我们深入理解JavaScript的类型系统和序列化规则。比如，为什么Date对象会被转换为ISO格式字符串？为什么正则表达式会被序列化为空对象？这些细节在日常开发中可能不会特别注意，但当我们需要调试或处理边界情况时，这些知识就变得非常重要。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. JSON.stringify的基础实现原理

2.1 基本数据类型处理

实现JSON.stringify的第一步是处理JavaScript的基本数据类型。对于原始值，处理相对简单：

字符串需要使用双引号包裹，并且内部的双引号和特殊字符需要转义
数字和布尔值直接转换为它们的字符串表示
null直接转换为字符串"null"
undefined、函数和Symbol在对象属性中被忽略，在数组中转换为null，单独转换时返回undefined

javascript复制function stringifyPrimitive(value) {
  if (typeof value === 'string') {
    return '"' + value.replace(/"/g, '\\"') + '"';
  }
  if (typeof value === 'number' || typeof value === 'boolean') {
    return String(value);
  }
  if (value === null) {
    return 'null';
  }
  return undefined; // for undefined, function, symbol
}

2.2 对象和数组的处理

对象和数组需要递归处理它们的属性或元素。这里有几个关键点需要注意：

数组需要包裹在方括号中，元素间用逗号分隔
对象需要包裹在大括号中，属性间用逗号分隔，属性名必须用双引号包裹
需要处理稀疏数组（存在empty项的情况）
需要处理对象的可枚举属性

javascript复制function stringifyObject(obj) {
  if (Array.isArray(obj)) {
    const elements = obj.map(item => 
      item === undefined ? 'null' : stringify(item)
    );
    return '[' + elements.join(',') + ']';
  } else {
    const properties = [];
    for (const key in obj) {
      if (obj.hasOwnProperty(key)) {
        const value = stringify(obj[key]);
        if (value !== undefined) {
          properties.push(`"${key}":${value}`);
        }
      }
    }
    return '{' + properties.join(',') + '}';
  }
}

3. 处理特殊对象和边界情况

3.1 Date和RegExp对象

JavaScript中的特殊对象需要特殊处理。Date对象通常被序列化为ISO格式字符串，而RegExp对象则被序列化为空对象。

javascript复制function stringify(value) {
  if (value instanceof Date) {
    return `"${value.toISOString()}"`;
  }
  if (value instanceof RegExp) {
    return '{}';
  }
  // ...其他处理逻辑
}

3.2 循环引用检测

循环引用是JSON.stringify实现中最棘手的问题之一。我们需要维护一个WeakSet来记录已经处理过的对象，当检测到循环引用时，可以抛出错误或者根据需求特殊处理。

javascript复制function stringify(value, seen = new WeakSet()) {
  if (typeof value === 'object' && value !== null) {
    if (seen.has(value)) {
      throw new TypeError('Converting circular structure to JSON');
    }
    seen.add(value);
    // ...处理对象逻辑
  }
  // ...其他处理逻辑
}

在实际项目中，有时我们可能不希望抛出错误，而是希望用某种占位符表示循环引用。这时可以修改实现：

javascript复制function stringify(value, seen = new WeakSet(), circularReplacer = '[Circular]') {
  if (typeof value === 'object' && value !== null) {
    if (seen.has(value)) {
      return `"${circularReplacer}"`;
    }
    seen.add(value);
    // ...处理对象逻辑
  }
  // ...其他处理逻辑
}

4. 实现replacer和space参数

原生的JSON.stringify支持replacer函数或数组，以及space参数控制缩进。我们的实现也应该支持这些特性。

4.1 replacer函数实现

replacer函数可以修改序列化过程，对每个属性进行转换：

javascript复制function stringify(value, replacer, space, seen = new WeakSet()) {
  // 处理replacer为函数的情况
  if (typeof replacer === 'function') {
    const replacement = replacer('', value);
    if (replacement !== value) {
      return stringify(replacement, null, space, seen);
    }
  }
  
  // ...其他处理逻辑
  
  if (Array.isArray(obj)) {
    const elements = obj.map((item, index) => {
      let val = item;
      if (typeof replacer === 'function') {
        val = replacer(String(index), val);
      }
      return val === undefined ? 'null' : stringify(val, replacer, space, seen);
    });
    return '[' + elements.join(',') + ']';
  } else {
    const properties = [];
    for (const key in obj) {
      if (obj.hasOwnProperty(key)) {
        let val = obj[key];
        if (typeof replacer === 'function') {
          val = replacer(key, val);
        }
        const valueStr = stringify(val, replacer, space, seen);
        if (valueStr !== undefined) {
          properties.push(`"${key}":${valueStr}`);
        }
      }
    }
    return '{' + properties.join(',') + '}';
  }
}

4.2 space参数实现

space参数控制输出的缩进和格式化，可以是数字或字符串：

javascript复制function formatWithIndent(str, space) {
  if (!space) return str;
  
  const indent = typeof space === 'number' 
    ? ' '.repeat(Math.min(10, Math.max(1, space)))
    : String(space).slice(0, 10);
  
  let result = '';
  let indentLevel = 0;
  let inString = false;
  let escapeNext = false;
  
  for (let i = 0; i < str.length; i++) {
    const char = str[i];
    
    if (!inString && (char === '{' || char === '[')) {
      result += char + '\n' + indent.repeat(++indentLevel);
    } else if (!inString && (char === '}' || char === ']')) {
      result += '\n' + indent.repeat(--indentLevel) + char;
    } else if (!inString && char === ',') {
      result += ',\n' + indent.repeat(indentLevel);
    } else {
      result += char;
    }
    
    if (char === '"' && !escapeNext) {
      inString = !inString;
    }
    escapeNext = char === '\\' && !escapeNext;
  }
  
  return result;
}

5. 性能优化与实践建议

5.1 性能优化技巧

手动实现JSON.stringify时，性能是需要重点考虑的因素。以下是一些优化建议：

避免不必要的字符串拼接：在构建大字符串时，使用数组收集各部分内容，最后用join连接，比直接使用+=操作符效率更高。
减少正则表达式使用：字符串转义时，简单的字符替换可以手动实现，比正则表达式更快。
优化循环引用检测：WeakSet虽然方便，但在某些引擎中可能性能不如自定义的标记方案。
提前分配数组空间：对于已知大小的数组，可以预先分配足够空间，避免动态扩容开销。

javascript复制// 优化后的字符串转义实现
function escapeString(str) {
  let result = '';
  for (let i = 0; i < str.length; i++) {
    const char = str[i];
    switch (char) {
      case '"': result += '\\"'; break;
      case '\\': result += '\\\\'; break;
      case '\b': result += '\\b'; break;
      case '\f': result += '\\f'; break;
      case '\n': result += '\\n'; break;
      case '\r': result += '\\r'; break;
      case '\t': result += '\\t'; break;
      default: result += char;
    }
  }
  return '"' + result + '"';
}

5.2 常见问题与解决方案

在实际使用中，可能会遇到以下问题：

大对象栈溢出：深度嵌套的对象可能导致递归调用栈溢出。解决方案是改用迭代算法，或者使用尾递归优化（如果引擎支持）。
特殊对象序列化：如Map、Set等ES6新增对象需要特殊处理。可以根据项目需求决定是忽略、序列化为空对象，还是转换为特定格式。
自定义序列化逻辑：可以通过在对象上定义toJSON方法支持自定义序列化，这与原生JSON.stringify的行为一致。

javascript复制function stringify(value) {
  if (typeof value === 'object' && value !== null && typeof value.toJSON === 'function') {
    return stringify(value.toJSON());
  }
  // ...其他处理逻辑
}

Unicode字符处理：对于包含非BMP字符（如emoji）的字符串，需要确保正确转义。可以使用charCodeAt和codePointAt方法检测字符范围。

6. 完整实现代码示例

结合以上所有考虑，下面是一个相对完整的JSON.stringify实现：

javascript复制function jsonStringify(value, replacer, space) {
  const seen = new WeakSet();
  
  function stringify(value, indent, key) {
    // 处理replacer
    if (typeof replacer === 'function') {
      value = replacer(key, value);
    }
    
    // 处理基本类型
    if (value === null) return 'null';
    if (value === undefined) return undefined;
    if (typeof value === 'boolean' || typeof value === 'number') return String(value);
    if (typeof value === 'string') return escapeString(value);
    if (typeof value === 'symbol') return undefined;
    if (typeof value === 'function') return undefined;
    
    // 处理toJSON方法
    if (typeof value.toJSON === 'function') {
      return stringify(value.toJSON(), indent, key);
    }
    
    // 处理特殊对象
    if (value instanceof Date) return `"${value.toISOString()}"`;
    if (value instanceof RegExp) return '{}';
    
    // 检测循环引用
    if (typeof value === 'object') {
      if (seen.has(value)) {
        throw new TypeError('Converting circular structure to JSON');
      }
      seen.add(value);
    }
    
    // 处理数组
    if (Array.isArray(value)) {
      const items = [];
      for (let i = 0; i < value.length; i++) {
        const item = stringify(value[i], indent ? indent + space : undefined, String(i));
        items.push(item === undefined ? 'null' : item);
      }
      seen.delete(value);
      if (indent) {
        return `[\n${indent + space}${items.join(`,\n${indent + space}`)}\n${indent}]`;
      }
      return `[${items.join(',')}]`;
    }
    
    // 处理对象
    const properties = [];
    for (const key in value) {
      if (value.hasOwnProperty(key)) {
        const propertyValue = stringify(value[key], indent ? indent + space : undefined, key);
        if (propertyValue !== undefined) {
          const propertyKey = escapeString(key);
          if (indent) {
            properties.push(`${indent + space}${propertyKey}: ${propertyValue}`);
          } else {
            properties.push(`${propertyKey}:${propertyValue}`);
          }
        }
      }
    }
    seen.delete(value);
    if (indent) {
      return `{\n${properties.join(',\n')}\n${indent}}`;
    }
    return `{${properties.join(',')}}`;
  }
  
  function escapeString(str) {
    let result = '';
    for (let i = 0; i < str.length; i++) {
      const char = str[i];
      switch (char) {
        case '"': result += '\\"'; break;
        case '\\': result += '\\\\'; break;
        case '\b': result += '\\b'; break;
        case '\f': result += '\\f'; break;
        case '\n': result += '\\n'; break;
        case '\r': result += '\\r'; break;
        case '\t': result += '\\t'; break;
        default: 
          if (char < ' ') {
            result += `\\u${char.charCodeAt(0).toString(16).padStart(4, '0')}`;
          } else {
            result += char;
          }
      }
    }
    return `"${result}"`;
  }
  
  // 处理space参数
  if (typeof space === 'number') {
    space = Math.min(10, Math.max(1, space));
    space = ' '.repeat(space);
  } else if (typeof space === 'string') {
    space = space.slice(0, 10);
  } else {
    space = undefined;
  }
  
  const result = stringify(value, undefined, '');
  if (space && typeof result === 'string') {
    return formatWithIndent(result, space);
  }
  return result;
}

function formatWithIndent(str, space) {
  let result = '';
  let indentLevel = 0;
  let inString = false;
  let escapeNext = false;
  const newLine = '\n';
  
  for (let i = 0; i < str.length; i++) {
    const char = str[i];
    
    if (!inString) {
      if (char === '{' || char === '[') {
        result += char + newLine + space.repeat(++indentLevel);
        continue;
      } else if (char === '}' || char === ']') {
        result += newLine + space.repeat(--indentLevel) + char;
        continue;
      } else if (char === ',') {
        result += ',' + newLine + space.repeat(indentLevel);
        continue;
      } else if (char === ':') {
        result += ': ';
        continue;
      }
    }
    
    result += char;
    
    if (char === '"' && !escapeNext) {
      inString = !inString;
    }
    escapeNext = char === '\\' && !escapeNext;
  }
  
  return result;
}

这个实现涵盖了原生JSON.stringify的大部分功能，包括基本数据类型处理、对象和数组递归、循环引用检测、replacer函数和space参数支持等。在实际项目中，可以根据具体需求进行裁剪或扩展。