前言
处理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>
输出结果: