JavaScript 的 JSON.stringify() 详解

2023-10-27 22:13:10

导言

JavaScript 的 JSON.stringify() 函数是一个强大的工具，它可以将 JavaScript 对象、数组和原始值转换为 JSON 字符串。JSON（JavaScript 对象表示法）是一种轻量级的数据格式，广泛用于在客户端和服务器端应用程序之间传输数据。

为了深入理解 JSON.stringify() 的工作原理，我们将从头开始实现自己的版本。通过这个过程，我们将探索各种数据类型的表示，并了解 JSON.stringify() 如何处理边界情况和极端情况。

构建我们自己的 JSON.stringify()

1. 基础

我们的 stringify() 函数将采用一个 JavaScript 值作为输入，并返回一个 JSON 字符串。首先，我们定义函数签名：

function stringify(value) {
  // ...
}

2. 数据类型检查

首先，我们检查输入值的数据类型。JSON.stringify() 仅支持以下数据类型：

对象
数组
原始值（字符串、数字、布尔值、null）

如果输入值不是这些类型之一，我们将抛出错误。

function stringify(value) {
  if (typeof value !== 'object' && typeof value !== 'string' && typeof value !== 'number' && typeof value !== 'boolean' && value !== null) {
    throw new Error('Invalid data type');
  }
  // ...
}

3. null 和 undefined

对于 null 和 undefined 值，JSON.stringify() 将其转换为 "null" 和 "undefined"。我们在我们的实现中复制此行为：

function stringify(value) {
  // ...
  if (value === null) {
    return '"null"';
  } else if (value === undefined) {
    return '"undefined"';
  }
  // ...
}

4. 字符串

字符串必须用双引号引起来。我们使用 JSON.stringify() 的内置方法处理字符串，以确保正确转义特殊字符：

function stringify(value) {
  // ...
  if (typeof value === 'string') {
    return JSON.stringify(value);
  }
  // ...
}

5. 数字和布尔值

数字和布尔值可以直接转换为 JSON 字符串：

function stringify(value) {
  // ...
  if (typeof value === 'number' || typeof value === 'boolean') {
    return value.toString();
  }
  // ...
}

6. 数组

对于数组，我们迭代每个元素并递归调用 stringify() 函数：

function stringify(value) {
  // ...
  if (Array.isArray(value)) {
    const elements = [];
    for (let i = 0; i < value.length; i++) {
      elements.push(stringify(value[i]));
    }
    return `[${elements.join(',')}]`;
  }
  // ...
}

7. 对象

对象是最复杂的类型，因为它们可以包含任意类型的属性。我们迭代对象的键，并递归调用 stringify() 函数转换每个值：

function stringify(value) {
  // ...
  if (typeof value === 'object') {
    const properties = [];
    for (const key in value) {
      if (value.hasOwnProperty(key)) {
        properties.push(`"${key}":${stringify(value[key])}`);
      }
    }
    return `{${properties.join(',')}}`;
  }
  // ...
}

8. 循环引用

JSON.stringify() 默认不会处理循环引用。如果我们遇到循环引用，我们将抛出错误：

function stringify(value, replacer, space) {
  // ...
  const visited = [];
  const stringifyWithVisited = (value) => {
    if (visited.indexOf(value) !== -1) {
      throw new Error('Circular reference detected');
    }
    visited.push(value);
    return stringify(value, replacer, space);
  };
  // ...
}