阅读 104

JSON数据处理:JSON.stringify和JSON.parse

前言

处理web请求时,需要与JSON文件打交道。如何处理JSON文件,常用的处理方法有 JSON.stringify() 和 JSON.parse().

1. JSON.stringify()

目的

将一个 JavaScript 对象或值转换为 JSON 字符串。

语法

JSON.stringify(value[, replacer [, space]])
复制代码

参数

  • value

将要序列化成 一个 JSON 字符串的值。

  • replacer 可选

如果该参数是一个函数,则在序列化过程中,被序列化的值的每个属性都会经过该函数的转换和处理; 如果该参数是一个数组,则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中; 如果该参数为 null 或者未提供,则对象所有的属性都会被序列化。

  • space 可选

指定缩进用的空白字符串,用于美化输出;如果参数是个数字,它代表有多少的空格,上限为10。

返回值

JSON字符串。

实践

  • JSON.stringify(value)
const obj = {name: "John", age: 30, city: "New York"};
const myJSON = JSON.stringify(obj);
//结果:{"name":"John","age":30,"city":"New York"}
复制代码

默认情况下,JSON.stringify() 输出不包含空格或缩进的JSON字符串。

  • JSON.stringify(value, replacer])
    <script>
      const result = [{name: 'zhangsan', weight: 80}, {name: 'lisi', weight: 70}, {name: 'xiaoming', weight: 35}, {name: 'xiaowang', location: '杭州'}];
      function replacer (key, value) { 
        if (key === 'weight') {
          if (value >= 80) { return '偏胖'; }
          else if (value >= 60) {return '正常'} 
          else if (value >= 40) {return '偏轻'} 
          else {return '营养不良'} 
          } 
          return value
          }

      console.log(JSON.stringify(result, replacer, 2))
    </script>
复制代码

输出的结果无缩进显示: [{"name":"zhangsan","weight":"偏胖"},{"name":"lisi","weight":"正常"},{"name":"xiaoming","weight":"营养不良"},{"name":"xiaowang","location":"杭州"}]

  • JSON.stringify(value[, replacer [, space]]) - 配置space参数,美化显示JSON文件
    <script>
      const result = [{name: 'zhangsan', weight: 80}, {name: 'lisi', weight: 70}, {name: 'xiaoming', weight: 35}, {name: 'xiaowang', location: '杭州'}];
      function replacer (key, value) { 
        if (key === 'weight') {
          if (value >= 80) { return '偏胖'; }
          else if (value >= 60) {return '正常'} 
          else if (value >= 40) {return '偏轻'} 
          else {return '营养不良'} 
          } 
          return value
          }

      console.log(JSON.stringify(result, replacer, 2))
    </script>
复制代码

输出结果有缩进2个空格:

[
  {
    "name": "zhangsan",
    "weight": "偏胖"
  },
  {
    "name": "lisi",
    "weight": "正常"
  },
  {
    "name": "xiaoming",
    "weight": "营养不良"
  },
  {
    "name": "xiaowang",
    "location": "杭州"
  }
]
复制代码

2. JSON.parse()

目的

解析JSON字符串,构造由字符串描述的JavaScript值或对象。

语法

复制代码

JSON.parse(text,[, reviver])

复制代码

参数

  • text

要被解析成 JavaScript 值的字符串。

  • reviver 可选

转换器, 如果传入该参数(函数),可以用来修改解析生成的原始值。 这个函数的遍历顺序依照:从最内层开始,按照层级顺序,依次向外遍历

返回值

Object类型,对应给定JSON文本的对象/值。

实践

  • JSON.parse(text, reviver)
<script>
      const numArray = '{"1":1, "2":2,"3":{"4":4,"5":{"6":6}}}'
      function reviver(k, v) {
        console.log(k)
        return v
      }
      const aiAa = JSON.parse(numArray, reviver)
      console.log(aiAa)
      console.log(typeof aiAa)
    </script>
复制代码

输出结果:

image.png

参考文档

文章分类
前端
文章标签