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

F2E 前端

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

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

最后的想法

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

本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://dev.to/blacksonic/the-secret-pow...

译文地址:https://learnku.com/f2e/t/38284

本文为协同翻译文章,如您发现瑕疵请点击「改进」按钮提交优化建议
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!