简易版本JSON.stringify的实现及其六大特性详解

下面我来讲解“简易版本JSON.stringify的实现及其六大特性详解”的攻略。

前言

在日常的开发中，我们经常会用到JSON.stringify方法来将Javascript对象转换成JSON格式的字符串，可以方便地实现客户端和服务器端之间的数据交互。但是，我们并不总是清楚其内部是如何工作的。在本攻略中，我将给大家介绍如何用简易版本实现JSON.stringify，并介绍JSON.stringify的六大特性。

实现JSON.stringify

第一步：处理基本类型

我们先来看一下JSON.stringify如何处理基本类型（如：字符串，数字，布尔值和null）。

function jsonStringify(data) {
  let result = '';
  const type = typeof data;

  // 基本类型
  if(type !== 'object' || data === null) {
    if(/string|undefined|function/.test(type)) {
      data = `"${data}"`;
    }
    result += String(data);
  }

  return result;
}

const testData = {
  name: '张三',
  age: 18,
  isGraduated: true,
  hobby: null,
};

console.log(jsonStringify(testData));

在上面的代码中，我们首先定义了一个名为jsonStringify的函数，该函数的作用是将一个Javascript对象转换为JSON格式的字符串。其中我们定义了变量result存储最终输出的结果。

接下来，在if语句中，我们判断data是否为基本类型，如果是，则将其转换为对应的字符串，最后添加到result中。

在上面的示例中，我们定义了一个testData对象，该对象包含了name、age、isGraduated和hobby这些属性。然后，我们调用console.log(jsonStringify(testData));将该对象转换为JSON格式的字符串并将结果输出到控制台中。

结果如下：

{"name":"张三","age":18,"isGraduated":true,"hobby":null}

可以看到，我们成功地将testData对象转换为了JSON格式的字符串。

第二步：处理Array类型

接下来，我们来看一下如何处理Array类型。

function processArray(data) {
  let str = '';
  if(Array.isArray(data)) {
    str += '[';
    for(let i = 0; i < data.length; i++) {
      str += jsonStringify(data[i]);
      if(i !== data.length - 1) {
        str += ',';
      }
    }
    str += ']';
  }
  return str;
}

const testData = {
  name: '张三',
  age: 18,
  skills: ['JavaScript', 'React', 'Node.js']
};

console.log(jsonStringify(testData));

在上面的代码中，我们定义了一个名为processArray的函数，该函数的作用是将一个Array类型的变量转换为对应的JSON格式的字符串。在函数中，我们首先判断data是否是一个数组，如果是，则在结果字符串str的最后添加一个 [ 符号。

接下来，我们遍历数组，并调用jsonStringify将数组中的每个元素转换为对应的JSON格式的字符串，并将其添加到str中。如果当前元素不是数组的最后一个元素，则在其之后添加 , 符号。

最后，在函数的结尾处，我们在str的最后添加一个 ] 符号，并返回最终转换的结果字符串。

在上面的示例中，我们定义了一个testData对象，该对象包含了name、age和skills这些属性。其中，skills是一个包含了JavaScript、React和Node.js字符串的数组。

我们通过调用 console.log(jsonStringify(testData));将该对象转换为JSON格式的字符串并打印出来。

结果如下：

{"name":"张三","age":18,"skills":["JavaScript","React","Node.js"]}

可以看到，我们已经成功地将包含数组类型的对象转换为了JSON格式的字符串。

第三步：处理Object类型

接下来我们来看一下如何处理Object类型。

function processObject(data) {
  let str = '';
  const keys = Object.keys(data);

  for(let i = 0; i < keys.length; i++) {
    const key = keys[i];
    const value = data[key];
    str += `"${key}":${jsonStringify(value)}`;
    if(i !== keys.length - 1) {
      str += ',';
    }
  }

  str = `{${str}}`;
  return str;
}

const testData = {
  name: '张三',
  age: 18,
  company: {
    name: '实验楼',
    location: '上海'
  }
};

console.log(jsonStringify(testData));

在上面的代码中，我们定义了一个名为processObject的函数，该函数的作用是将一个Object类型的变量转换为对应的JSON格式的字符串。

在函数中，我们首先通过调用Object.keys获取对象的属性名数组，然后通过for循环遍历属性名数组中的每个属性。

对于每个属性，我们将属性名和属性值转换为对应的JSON格式的字符串，并将其添加到最终结果字符串中。当处理完所有属性之后，我们在结果字符串的两端添加 {} 符号，并返回最终的结果字符串。

在上面的示例中，我们定义了一个testData对象，该对象包含了name、age和company这些属性，其中company属性又包含了name和location这两个子属性。

我们通过调用 console.log(jsonStringify(testData));将该对象转换为JSON格式的字符串并打印出来。

结果如下：

{"name":"张三","age":18,"company":{"name":"实验楼","location":"上海"}}

可以看到，我们已经成功地将包含Object类型的对象转换为了JSON格式的字符串。

六大特性

特性一：JSON.stringify只能用于序列化对象

JSON.stringify只能用于序列化Javascript对象，如果我们传入了其它的数据类型，如函数、正则表达式等，则不能被正确序列化。例如：

jsonStringify(function() {}); // 返回 undefined
jsonStringify(/hello/); // 返回 {}

特性二：支持缩进

JSON.stringify有一个参数可以传递，即缩进参数。该参数可以指定序列化字符串时的缩进空格数目。

const testData = { a: 1, b: 2 };
console.log(JSON.stringify(testData, null, 2));

在上面的代码中，我们将缩进参数设置为2，将testData对象转换为JSON格式的字符串并输出。输出结果如下：

{
  "a": 1,
  "b": 2
}

特性三：支持过滤属性

JSON.stringify除了支持缩进之外，还支持过滤属性。可以传递第二个参数，为可选的属性过滤器，可以是一个数组或一个函数。例如：

const testData = { a: 1, b: 2 };
console.log(JSON.stringify(testData, ['a']));
// 输出 {"a":1}

在上面的示例中，我们只序列化a属性。

特性四：JSON.stringify序列化undefined/函数/symbol会返回undefined

JSON.stringify序列化undefined、函数和symbol会返回undefined。

JSON.stringify(function() {}); // 返回 undefined
JSON.stringify(undefined); // 返回 undefined
JSON.stringify(Symbol('test')); // 返回 undefined

特性五：JSON.stringify序列化对象调用toJSON方法

JSON.stringify序列化对象时会调用对象的toJSON方法，如果toJSON方法返回一个对象，则序列化该返回对象，否则就忽略该属性。例如：

const testData = {
  name: '张三',
  age: 18,
  toJSON: function() {
    return { name: '李四' };
  }
};

console.log(JSON.stringify(testData));

在上面的代码中，我们给testData对象添加一个toJSON方法，该方法返回一个新的对象{name: '李四'}，将testData对象转换为JSON格式的字符串并输出。输出结果如下：

{"name":"李四"}

特性六：JSON.stringify序列化循环引用的对象报错

JSON.stringify序列化循环引用的对象时会报错，例如：

const a = {};
const b = {
  a: a,
};
a.b = b;

JSON.stringify(a); // 抛出错误

在上面的代码中，我们定义了一个循环引用的对象，即a引用了b，而b又引用了a。当我们将其转换为JSON格式的字符串时，程序会抛出一个错误。

总结

通过本攻略的介绍，我们学习了如何用简易版本实现JSON.stringify，并讲解了JSON.stringify的六大特性。掌握JSON.stringify对于我们进行javascript对象序列化、跨域请求等场合都是极为有帮助的。