原文地址：https://github.com/akira-cn/FE_You_dont_know/issues/13 小结： JSON.stringify和JSON.parse是一对处理数据的常用方法，前者将JavaScript的对象转为JSON字符串，后者将一个JSON串解析为JavaScript的对象。

JSON.stringify是一个基本上所有前端工程师都不陌生的方法。

👉🏻 JSON(JavaScript Object Notation)是由ECMA标准化（ECMA-404）的一种轻量级的数据交换格式。它来源于ECMAScript，是一种便于人阅读和理解的数据交换格式，目前被几乎所有的主流语言和平台支持。

JSON.stringify和JSON.parse是一对处理数据的常用方法，前者将JavaScript的对象转为JSON字符串，后者将一个JSON串解析为JavaScript的对象。

const obj = {foo: 'bar'};

const str = JSON.stringify(obj); // {"foo":"bar"}
console.log(str);

const obj2 = JSON.parse(str);
console.log(obj2);  // [Object object]{foo: "bar"}

JSON作为数据格式，既能被平台处理，又能方便人阅读，JavaScript的JSON.stringify在处理数据的时候同时考虑了数据转换和方便阅读，只不过，方便阅读这一点，常常被人忽略。

我们看一下

<textarea id="show-score"></textarea>
const students = [
  {
    name: 'akira',
    score: 100,
  }, {
    name: 'John',
    score: 60,
  }, {
    name: 'Jane',
    score: 90,
  }
];

const textarea = document.getElementById('show-score');

textarea.textContent = JSON.stringify(students);

上面的代码，我们将学生成绩单显示在页面上一个textarea里，如果我们直接将students通过JSON.stringify转成字符串显示，它是不包含空白符的，不方便人阅读。

https://camo.githubusercontent.com/f8614de8dfa01b3ee7be4008159169b80f8d26a8/68747470733a2f2f70322e73736c2e7168696d672e636f6d2f743031636236356637326339633861646238342e6a7067#align=left&display=inline&height=458&originHeight=458&originWidth=600&status=done&style=none&width=600

在JSON.stringify方法一共能接受3个参数，其中两个可选的参数，最后一个参数是用来格式化显示的，我们看一下：

const students = [
  {
    name: 'akira',
    score: 100,
  }, {
    name: 'John',
    score: 60,
  }, {
    name: 'Jane',
    score: 90,
  }
];

const textarea = document.getElementById('show-score');

textarea.textContent = JSON.stringify(students, null, 4);

我们暂时不管stringify的第二个参数，看一下它的第三个参数，在这里我们将它设为4，表示用每行缩进4个空格的格式来格式化stringify后的字符串：

https://camo.githubusercontent.com/8aaca6865aa8400711d4a0024e0e0da436e600f3/68747470733a2f2f70322e73736c2e7168696d672e636f6d2f743031633231326361346262656532363038332e6a7067#align=left&display=inline&height=459&originHeight=459&originWidth=600&status=done&style=none&width=600

我们也可以用字符串而不是数字来传这个参数，如果用字符串，则表示用该字符串作为占位符缩进：

textarea.textContent = JSON.stringify(students, null, '\\\\t');

https://camo.githubusercontent.com/c5724f5b49d9102677c3dbb964235128aa6466f1/68747470733a2f2f70312e73736c2e7168696d672e636f6d2f743031623439393033656431343934633264342e6a7067#align=left&display=inline&height=454&originHeight=454&originWidth=600&status=done&style=none&width=600

除了设置缩进格式和占位符，我们还有更灵活的控制方式，我们看一下：

const students = [
  {
    name: 'akira',
    score: 100,
  }, {
    name: 'John',
    score: 60,
  }, {
    name: 'Jane',
    score: 90,
  }
];

const textarea = document.getElementById('show-score');

textarea.textContent = JSON.stringify(students, ["name"], 4);

上面的代码，我们传一个["name"]数组给stringify方法，表示只序列化对象中的"name"属性，这样我们就会得到一个只包含学生名不包含成绩的数据：