开发中常用的两个JSON方法

参考文章：https://juejin.cn/post/6844903711127404557

在前端开发过程中，有两个非常有用的方法来处理 JSON 格式的内容：

• JSON.parse(string) ：接受一个 JSON 字符串并将其转换成一个 JavaScript 对象。--
• JSON.stringify(obj) ：接受一个 JavaScript 对象并将其转换为一个 JSON 字符串。

一、JSON.stringify()

序列化字符串：

JSON.stringify({name: "Xiaoming",age: 12});
// 输出结果:  "{"name":"Xiaoming","age":12}"

JSON.stringify([1,2,3,4,5])
// 输出结果: "[1,2,3,4,5]"

JSON.stringify("abc123")
// 输出结果: "abc123"

格式化特殊值：

console.log(JSON.stringify(undefined));
// 输出为原生undefined，但不是字符串

console.log(JSON.stringify(null));
// 输出为字符串的"null"

console.log(JSON.stringify(false));
// 输出为字符串的"false"

console.log(JSON.stringify(NaN));
// 输出为字符串的"NaN"

const user = {
    name: undefined,
    age: NaN,
    sex: false,
    address: null
}
console.log(JSON.stringify(user))
// 输出{"age":null,"sex":false,"address":null}

const arr = [undefined, null, false, NaN, ""]
console.log(JSON.stringify(arr));
// 输出[null,null,false,null,""]

可以看到对象中的undefined值会被忽略。而在数组中，特殊值都会变成null

忽略不可遍历的属性

如果使用Object.defineProperties定义对象，并对其中的属性设置不可枚举，则JSON在序列化的时候会忽略该值

var obj = {};
Object.defineProperties(obj, {
  'foo': {
    value: 1,
    enumerable: true
  },
  'bar': {
    value: 2,
    enumerable: false
  }
});

JSON.stringify(obj); // {"foo":1}

指定需要格式化的属性

JSON.stringify方法还可以接受一个数组参数，指定需要转成字符串的属性

JSON.stringify({ a:1, b:2 }, ['a'])
// {"a":1}

第二个参数以函数为参数，处理格式化的行为

const student = {
	name: 'xiaoming',
	age: 13,
	score: 50,
}

const stringifyFn = (a,b,c) => {
	if(b.score <= 50){
		b.score = b.score * 2;
	}
	return b
}
console.log(JSON.stringify(student,stringifyFn));

这里stringifyFn是传入的自定义格式化函数，输出：{"name":"xiaoming","age":13,"score":100}

第三个参数

如果我们得到一段数据但是它的可读性不是很好，我们期望它变成我们想要的可读性更棒的格式，这个时候就运用到了JSON.stringify的第三个参数了

var person = {
    name: "Jim Cowart",
    location: {
        city: {
            name: "Chattanooga",
            population: 167674
        },
        state: {
            name: "Tennessee",
            abbreviation: "TN",
            population: 6403000
        }
    },
    company: "appendTo"
};
//如果你希望缩进量为2 个空格，
// 你可以这么干：
JSON.stringify(person, null, 2);
/* produces:
"{
  "name": "Jim Cowart",
  "location": {
    "city": {
      "name": "Chattanooga",
      "population": 167674
    },
    "state": {
      "name": "Tennessee",
      "abbreviation": "TN",
      "population": 6403000
    }
  },
  "company": "appendTo"
}"
*/
// 如果你希望使用 tab 缩进，那么
// 你可以传入 \t 作为第三个参数
// 以此来告别空格缩进
JSON.stringify(person, null, "\t");
/*输出结果:
"{
    "name": "Jim Cowart",
    "location": {
        "city": {
            "name": "Chattanooga",
            "population": 167674
        },
        "state": {
            "name": "Tennessee",
            "abbreviation": "TN",
            "population": 6403000
        }
    },
    "company": "appendTo"
}"
*/

一、JSON.parse()

JSON.parse方法用于将JSON字符串转化成对象。

JSON.parse('{}') // {}
JSON.parse('true') // true
JSON.parse('"foo"') // "foo"
JSON.parse('[1, 5, "false"]') // [1, 5, "false"]
JSON.parse('null') // null

第二个参数:JSON.parse方法可以接受一个处理函数，用法与JSON.stringify方法类似

function f(key, value) {
  if ( key === ""){
      return value;
  }
  if ( key === "a" ) {
    return value + 10;
  }
}

var o = JSON.parse('{"a":1,"b":2}', f);
o.a // 11
o.b // undefined