文章中英模式

布鲁斯前端JS面试题目 - 实现 JSON.stringify

学习如何手写实现 JavaScript 的 JSON.stringify 方法，深入理解 JSON 序列化原理，提升前端面试竞争力。

文章中英模式

懒得看文章？那就来看视频吧

JSON.stringify 方法概述

JSON.stringify 是将 JavaScript 值或对象转换为 JSON 字符串的标准方法。在前端开发中，这个方法经常用于数据传输、存储和序列化。了解其内部运作机制不仅有助于更好地使用它，还能加深对 JavaScript 类型系统和递归算法的理解。

JSON.stringify 的特性

1. 处理基本类型：字符串、数字、布尔值、null 能直接转换
2. 处理复杂对象：对象和数组会递归处理其属性
3. 忽略特殊值：undefined、函数、Symbol 在对象中会被忽略
4. 处理循环引用：原生方法会抛出错误以避免无限递归
5. 支持替换器：可使用函数或数组自定义序列化过程
6. 支持格式化：可指定缩进使输出更易读

在面试中，手写实现 JSON.stringify 是考验候选人对递归、类型处理和边缘情况处理能力的好题目。

实现一个简单版的 JSON.stringify

解答：实现一个仅支持基本功能的 JSON.stringify：

function basicJSONStringify(value) {
  // 处理 null
  if (value === null) {
    return 'null';
  }
  
  // 处理字符串
  if (typeof value === 'string') {
    return '"' + value.replace(/"/g, '\\"') + '"';
  }
  
  // 处理数字
  if (typeof value === 'number') {
    if (isNaN(value) || value === Infinity || value === -Infinity) {
      return 'null';
    }
    return String(value);
  }
  
  // 处理布尔值
  if (typeof value === 'boolean') {
    return String(value);
  }
  
  // 忽略 undefined、函数和 Symbol
  if (typeof value === 'undefined' || typeof value === 'function' || typeof value === 'symbol') {
    return undefined;
  }
  
  // 处理数组
  if (Array.isArray(value)) {
    const items = value.map(item => 
      basicJSONStringify(item) === undefined ? 'null' : basicJSONStringify(item)
    );
    return '[' + items.join(',') + ']';
  }
  
  // 处理对象
  if (typeof value === 'object') {
    const props = [];
    for (const key in value) {
      if (Object.prototype.hasOwnProperty.call(value, key)) {
        const prop = basicJSONStringify(value[key]);
        if (prop !== undefined) {
          props.push('"' + key + '":' + prop);
        }
      }
    }
    return '{' + props.join(',') + '}';
  }
  
  return undefined;
}

// 测试范例
const obj = {
  name: "Bruce",
  age: 30,
  isAdmin: false,
  skills: ["JS", "React"],
  address: { city: "Taipei" }
};

console.log(basicJSONStringify(obj));