关注我，知码前端 获取更多知识~~，公众号: 知码前端

前言

上节说了json的一些基本知识，现在说一下在js中处理json的两个重要方法JSON.stringify()和JSON.parse()方法。上节也简单说了下这两个方法的基本用法，现在开始说一下这两个方法比较高级的地方，在一些情况下，还是挺有用的。

如果对json还不熟悉的小伙伴，建议先去阅读一下前面的文章。

你真会用js中的JSON（一）？

JSON.stringify()

先来看一下这个方法的签名：

JSON.stringify(value[, replacer[, space]])

从上面可以看出这个方法可以接收三个参数：

• value：是必需的参数，是要转换的成json的值，通常是对象或者是数组
• replacer：是一个可选的参数，类型可以是函数或者数组
• space：是一个可选的参数，表示可以在json字符串前面添加的空格，最多可以添加10个空格，类型可以是数值或者字符串。其目的是为了增加json字符串的可读性。

// 只有一个参数的时候：
var person = {
  name: '张三',
  age: 10,
  city: '北京'
}
JSON.stringify(person) // {"name":"张三","age":10,"city":"北京"}

// 假如一个对象的属性值是undefined的时候会是怎么样？
var person2 = {
  name: '张三',
  age: 10,
  city: undefined,
  getName: function () {
    console.log(this.name)
  }
}
JSON.stringify(person2) // {"name":"张三","age":10}
// 可以发现，如果某个对象的属性值是undefined或者是函数的时候，会把这个属性忽略。
// 在平时书写的时候一定要注意这个地方

// 假如我们在数组里面放入undefined或者是函数的时候又是怎么样的？
var array = [1, false, undefined, function () {}]
JSON.stringify(array) // [1,false,null,null]
// 咦？？竟然没有被过滤，而是把它们都转成了null

总结：

• 当对象的属性是undefined或者是函数的时候，JSON.stringify()方法会把它们过滤
• 当数组中的某个成员是undefined或者是函数的时候，JSON.stringify()不会过滤它们，而把它们转成null

// 接收两个参数的时候
// 当参数类型是数组的时候：
var person = {
  name: '张三',
  age: 10,
  city: '北京',
  job: 'it'
}
var props = ['name', 'age']
JSON.stringify(person, props) // {"name":"张三","age":10}
// 可以发现json串中只有数组传入的两个属性。
// 这说明当第二个参数是数组的时候，只会把该对象在数组中有的成员的属性转成json

// 再来看一下对数组对象是不是也这样？
var array = ['name', 'age', 'city']
var props1 = ['0', '1']
JSON.stringify(array, props1) // ["name","age","city"]
// 可以发现数组的所有成员都被转在了json
// 这说明对于数组对象，是无效的，只有对 对象有效

// 当参数是函数的时候
// 看一个业务场景：
// 我有一个对象，想把某个属性值过滤，但这个属性值不是undefined或者函数类型的，该怎么办？
var person = {
  name: '张三',
  age: 10,
  city: '北京'
}
// 现在不想把city也转成json
// key 是对象属性的键
// value 是对象属性的值
function toJson(key, value) {
  if (key === 'city') {
    return undefined
  }
  return value
}
JSON.stringify(person, toJson) // {"name":"张三","age":10}
// 可以看出如果在平时应用中，如果我们不想把某个值转成json，则可以利用这个特性处理

// 小伙伴可以试一下如果在数组中，会不会利用函数把它给过滤呢？

总结：

• 当参数是数组的时候，对于对象来说会根据数组里面的成员来生成json。对于数组对象来说，则没有效果
• 当参数是函数的时候，会把每个键值作为参数传入到回调函数中，可以利用一些特性来过滤一些我们不需要的属性

// 当接收三个参数的时候
// 有时候我们为了增加json字符串的可读性，会增加一些格式，当然也可利用一些网站格式化json
var person = {
  name: '张三',
  age: 10,
  city: '北京',
}
var space = 2
JSON.stringify(person, null, space)
/*
{
  "name": "张三",
  "age": 10,
  "city": "北京"
}
*/
// 可以看出每个键值都缩进了2个空格


// 把 space 值改成 10
/*
{
          "name": "张三",
          "age": 10,
          "city": "北京"
}
*/

// 把 space 值改成 20
/*
{
          "name": "张三",
          "age": 10,
          "city": "北京"
}
*/
// 可以看出最大就是10个空格

// 把 space 值改成 字符串 '++++'
/*
{
++++"name": "张三",
++++"age": 10,
++++"city": "北京"
}
*/

总结：

JSON.stringify()的第三个参数主要是为了增加可读性，如果是数值，就代表在键值前面增加多少个空格， 最多10个。如果是字符串，就代表在键值前面增加这个字符串，其实这个字符串的长度最大也是10个字符，可以试一下哦~~

下篇继续介绍JSON.parse()的高级方法，和一个不常用的知识点。比JSON.stringify()方法要简单很多~~

关注我，知码前端 获取更多知识~~