登录  /  注册
首页 > web前端 > js教程 > 正文

鲜为人知的 JSON.stringify 用法

青灯夜游
发布: 2019-11-30 17:39:12
转载
2810人浏览过

js 中有许多常见的函数,我们可能每天都在使用它们,但是却不知道它们的一些额外功能。json.stringify 就是这样的一个函数,今天就来看下它的特殊用法。

鲜为人知的 JSON.stringify 用法

基础

JSON.stringify 方法接收一个变量,并将它转换成 JSON 表示形式。

const boy = { 
  name: 'John', 
  age: 23 
};

JSON.stringify(boy);
// {"name":"John","age":23}
登录后复制

JSON 就是纯字符串,它本质上是 JS 的一个子集,所以并不是所有的 JS 对象都能转换为 JSON:

const boy = { 
  name: 'John', 
  age: 23,
  hobbies: new Map([[0, 'coding'], [1, 'earn money']])
}

JSON.stringify(boy)
// {"name":"John","age":23,"hobbies":{}}
登录后复制

上面的例子中 Map 对象就会被忽略并转换为普通对象。而如果属性是函数的话则这个属性就会被忽略,感兴趣的同学可以试下。

第二个参数

JSON.stringify 可以接收第二个参数,可以称为 replacer 替换器。

你可以传入一个字符串数组,这个数组中具有的属性才会被转换,就像一个白名单。

const boy = { 
  name: 'John', 
  age: 23
}

JSON.stringify(boy, ['name'])
// {"name":"John"}
登录后复制

我们可以利用这个特性,只转换需要转换的属性,过滤掉如很长的数组、错误对象等。

这个 replacer 参数还可以接收一个函数。这个函数会遍历整个对象,并将键和值传入,让你决定该如何替换它们。

const boy = { 
  name: 'John', 
  age: 23,
  hobbies: new Map([[0, 'coding'], [1, 'earn money']])
}

JSON.stringify(boy, (key, value) => {
  if (value instanceof Map) {
    return [...value.values()]
  }
  return value
})
// {"name":"John","age":23,"hobbies":["coding","earn money"]}
登录后复制

而如果你返回了 undefined (返回 null 不行),就将这个属性移除了:

JSON.stringify(boy, (key, value) => {
  if (typeof value === 'string') {
    return undefined
  }
  return value
})
// {"age":23,"hobbies":{}}
登录后复制

第三个参数

第三个参数 space 控制了转换后的 JSON 串的间距。

如果参数是数字,则以该数字个数的空格进行缩进:

JSON.stringify(boy, null, 2)
// {
//   "name": "John",
//   "age": 23,
//   "hobbies": {}
// }
登录后复制

而如果参数是字符串,则以该字符串进行缩进:

JSON.stringify(boy, null, '--')
// {
//   --"name": "John",
//   --"age": 23,
//   --"hobbies": {}
// }
登录后复制

toJSON 方法

如果我们要转换的对象具有一个 toJSON 方法,那么就可以定制自己被序列化的过程。您可以从方法中返回一个新值,而不是序列化该对象,并且此值将被序列化,而不是原始对象。

const boy = { 
  name: 'John', 
  age: 23,
  hobbies: new Map([[0, 'coding'], [1, 'earn money']]),
  toJSON() {
    return {
      name: `${this.name} (${this.age})`,
      favorite: this.hobbies.get(0)
    }
  }
}

JSON.stringify(boy)
// {"name":"John (23)","favorite":"coding"}
登录后复制

是不是很有趣?有时候仔细看一些文档还是很有用的~

参考文章

  • 原文地址:https://mp.weixin.qq.com/s/_e83_G7RjVt2eR_ro7blOA

  • MDN:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

本文来自 js教程 栏目,欢迎学习!

以上就是鲜为人知的 JSON.stringify 用法的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:segmentfault网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号