JSON 字符串化的秘密力量

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 有第二个参数，称为 replacer 参数。

您可以传递一个字符串数组，作为要包含的对象属性的白名单。

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

我们可以过滤掉不想显示的值。这些值可能是过大的数据项（例如 Error 对象），也可能是 JSON 格式难以读取的数据。

replacer 参数也可以是一个函数。该函数接收该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']}

通过在函数中返回未定义，我们可以从结果中删除这些项目。

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 方法

如果我们要字符串化的对象具有属性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"]}

演示时间

这里是一个 Codepen，我将上述示例包含在内，您可以摆弄它。

最后的想法

有时候，查看我们日常使用的函数的文档可能会很有收获。它们可能会让我们感到惊讶，并且让我们学到一些东西。
保持求知欲，阅读文档🦄。

文章来源：https://dev.to/sonicoder/the-secret-power-of-json-stringify-393b