前端杂谈 · Web

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

•̀.̫•́✧ · 4月28日 · 2020年本文2771字 · 阅读7分钟206

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));

最后的想法

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

参考文献

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

1 条回应
  1. 匿名2020-5-5 · 12:33

    太感谢博主了啊啊啊啊啊