你可能不知道 JSON.stringify 还可以这样用

JavaScript 中有许多函数可以完成它们的工作。我们每天都使用它们，但我们不知道它们的额外功能。直到有一天，我们查看文档时，意识到它们的功能远超我们想象。同样的事情也发现在 JSON.stringify 和我之间。在这个简短的指南中，我将展示我学到的东西。

JSON.stringify 方法接受一个变量并将其转换为 JSON 字符串。

const firstItem = { 
  title: 'Transformers', 
  year: 2007 
};

JSON.stringify(firstItem);
// {'title':'Transformers','year':2007}

当一个元素不可以被序列化为 JSON，问题就会呈现出来。

const secondItem = { 
  title: 'Transformers', 
  year: 2007, 
  starring: new Map([[0, 'Shia LaBeouf'],[1, 'Megan Fox']]) 
};

JSON.stringify(secondItem);
// {'title':'Transformers','year':2007,'starring':{}}

JSON.stringify 可以接受第二个参数，它被称为替换参数。

你可以传递一个字符串数组，以此作为该对象属性的白名单。

JSON.stringify(secondItem, ['title']);
// {'title':'Transformers'}

我们可以过滤不想展示的值。这个值可能是非常大（像 Error 对象这样) 或者没有可读的 JSON 表达。

这个参数也可以是一个函数。这个函数接受 JSON.stringify 方法所迭代的真实键和值。你可以使用函数的返回值来改变值得表达。如果你没有从该函数返回任何值或者返回 undefined，则该项将不会出现在结果中。

JSON.stringify(secondItem, (key, value) => {
  if (value instanceof Set) {
    return [...value.values()];
  }
  return value;
});
// {'title':'Transformers','year':2007,'starring':['Shia LaBeouf','Megan Fox']}

我们可以通过返回 undefined，来讲该项从结果集中移除。

JSON.stringify(secondItem, (key, value) => {
  if (typeof value === 'string') {
    return undefined;
  }
  return value;
});
// {"year":2007,"starring":{}}

第三个参数控制最终字符串的间距。如果参数是数字，则字符串化中的每一层都将缩进这个数字的空格字符。

JSON.stringify(secondItem, null, 2);
//{
//  "title": "Transformers",
//  "year": 2007,
//  "starring": {}
//}

若第三个参数为字符串，将会使用它替代这些空白字符。

JSON.stringify(secondItem, null, '?');
//{
//?"title": "Transformers",
//?"year": 2007,
//?"starring": {}
//}

如果我们要字符串化的对象具有属性 toJSON，那么它将自定义字符串行过程。你可以从方法中返回一个新值，而不是序列化该对象，并且这个值将被序列化，而不是原来的对象。

const thirdItem = { 
  title: 'Transformers', 
  year: 2007, 
  starring: new Map([[0, 'Shia LaBeouf'],[1, 'Megan Fox']]),
  toJSON() {
    return { 
      name: `${this.title} (${this.year})`, 
      actors: [...this.starring.values()] 
    };
  }
};

console.log(JSON.stringify(thirdItem));
// {"name":"Transformers (2007)","actors":["Shia LaBeouf","Megan Fox"]}

这里有一个代码展示，其中包含了上面的示例，您可以随意调试它。

const firstItem = { 
  title: 'Transformers', 
  year: 2007 
};
console.log(JSON.stringify(firstItem));

const secondItem = { 
  title: 'Transformers', 
  year: 2007, 
  starring: new Map([[0, 'Shia LaBeouf'],[1, 'Megan Fox']])
};

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

console.log(JSON.stringify(secondItem, ['title']));

console.log(JSON.stringify(secondItem, (key, value) => {
  if (value instanceof Map) {
    return [...value.values()];
  }
  return value;
}));

console.log(JSON.stringify(secondItem, (key, value) => {
  if (typeof value === 'string') {
    return undefined;
  }
  return value;
}));

console.log(JSON.stringify(secondItem, null, 2));

console.log(JSON.stringify(secondItem, null, '?'));

const thirdItem = { 
  title: 'Transformers', 
  year: 2007, 
  starring: new Map([[0, 'Shia LaBeouf'],[1, 'Megan Fox']]),
  toJSON() {
    return { 
      name: `${this.title} (${this.year})`, 
      actors: [...this.starring.values()] 
    };
  }
};

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

我们每天使用的函数，阅读该函数的文档依然很有价值。它会带给我们惊喜，并且让我们学到很多东西。
对知识保持饥渴，并且来阅读文档吧 .

https://dev.to/blacksonic/the-secret-power-of-json-stringify-393b