JavaScript的JSON.stringify

今天来说说，JSON.stringify这个方法，一般我们使用JSON.stringify来将对象转换为字符串:

var obj = {
    a: 1,
    b: 2,
    c: 3
}

var strObj = JSON.stringify(obj)

console.log(strObj)  // {"a":1,"b":2,"c":3}

这是我们一般常见的用法，但是他的问题是一些非数组类型的对象不能得到很好的转换支持。

var obj = {
  a: 1,
  b: 2,
  c: function() {
    return this.a;
  },
  d: new Set([1, 2, 3])
};

var strObj = JSON.stringify(obj);

console.log(strObj);	// {"a":1,"b":2,"d":{}}

可以看到JSON.stringify忽略了c, 并且将d转换为了空对象{}

我们需要更了解JSON.stringify来处理这个问题:

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

在JSON.stringify的MDN文档中描述了JSON.stringify方法共有三个参数，其中第二个参数是一个转换器,可以对访问值进行对应的转换和处理，第三个参数是缩进字符，用于美化输出。

好的，那让我们来添加一个转换器用于处理之前的问题：

var obj = {
  a: 1,
  b: 2,
  c: function() {
    return this.a;
  },
  d: new Set([1, 2, 3])
};

var convert = (key, value) => {
  if (value instanceof Function) return value.call(obj);
  if (value instanceof Set) return [...value];

  return value;
};

var strObj = JSON.stringify(obj, convert);

console.log(strObj);  // {"a":1,"b":2,"c":1,"d":[1,2,3]}

可以看到现在打印的c值和d值已经出来了，其实就是我们自己去实现一个转换器来实现对应的转换功能。

还有第二个参数，可以修改我们的缩进符，他支持输入数字(数字大于10，只会生成10个占位符)，字符串(字符串长度大于10，只会截取前10个):

var obj = {
  a: 1,
  b: 2
};

var strObj = JSON.stringify(obj, null, 2);

console.log(strObj);

// {
//   "a": 1,
//   "b": 2
// }

var obj = {
  a: 1,
  b: 2
};

var strObj = JSON.stringify(obj, null, '-_-000');

console.log(strObj)

//  {
//   -_-000"a": 1,
//   -_-000"b": 2
//   }