前端JSON处理

JSON 解析与序列化

JSON 内置了两种方法：

• JSON.parse() ：将数据转换为 JavaScript 对象。
• JSON.stringify() ：将 JavaScript 对象转换为字符串。

1. JSON.parse()

JSON.parse() 的语法如下：

JSON.parse(text, reviver)

• text： 必需， 一个有效的 JSON 字符串。
• reviver：可选，一个转换结果的函数， 将为对象的每个成员调用此函数。

const json = '{"name": "zhangsan", "age": 18, "city": "beijing"}';

const myJSON = JSON.parse(json);
 
console.log(myJSON.name, myJSON.age);  
//打印结果: zhangsan 18

我们可以启用 JSON.parse 的第二个参数 reviver，一个转换结果的函数，对象的每个成员都会调用此函数：

const json = '{"name": "zhangsan", "age": 18, "city": "beijing"}';

const myJSON = JSON.parse(json, (key, value) => {
  if(typeof value === "number") {
  //填充使得字符的位数是3位，用0填充
     return String(value).padStart(3, "0");
  }
  return value;
});
 
console.log(myJSON.name, myJSON.age);  
//打印结果: zhangsan 018

2. JSON.stringify()

JSON.stringify() 的语法如下：

JSON.stringify(value, replacer, space)

• value： 必需， 要转换的 JavaScript 值（通常为对象或数组）。
• replacer： 可选。用于转换结果的函数或数组。如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：“”。如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。
• space： 可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

const json = {"name": "zhangsan", "age": 18, "city": "beijing"};

const myJSON = JSON.stringify(json);
 
console.log(myJSON);  // {"name":"zhangsan","age":18,"city":"beijing"}

3、删除键值对

const json = {"name": "zhangsan", "age": 18, "city": "beijing"};

//删除city这个键值对
delete json.city;
 
console.log(json);  
//打印结果:  {name: 'zhangsan', age: 18}

4、访问数组项

可以使用方括号[]和索引从 JSON 中访问数组项：

const json = {
  "name": "zhangsan",
  "age": 18,
  "job": ["React", "JavaScript"],
};

console.log(json.job[0]);
 // React 

5|、遍历数组项

可以使用for循环来遍历 JSON 中的数组项：

const json = {
  "name": "zhangsan",
  "age": 18,
  "job": ["React", "JavaScript"],
};

for (item of json.job) {
    console.log(item); 
}
 //打印结果: React JavaScript

6、JSON.stringify()支持第二个参数，用来处理 JSON 中的数据

const user = {
  "name": "John",
  "password": "12345",
  "age": 30
};

console.log(JSON.stringify(user, (key, value) => {
    if (key === "password") {
       return;
    }
    return value;
}));

// 输出结果：{"name":"John","age":30}

可以将第二个参数抽离出一个函数：

function stripKeys(...keys) {
    return (key, value) => {
        if (keys.includes(key)) {
           return;
        }
        return value;
    };
}

const user = {
  "name": "John",
  "password": "12345",
  "age": 30,
  "gender": "male"
};

console.log(JSON.stringify(user, stripKeys('password', 'gender')))

// 输出结果：{"name":"John","age":30}

7、JSON过滤结果

当 JSON 中的内容很多时，想要查看指定字段是比较困难的。可以借助JSON.stringify()的第二个属性来获取指定值，只需传入指定一个包含要查看的属性 key 的数组即可：

const user = {
    "name": "John",
    "password": "12345",
    "age": 30
}

console.log(JSON.stringify(user, ['name', 'age']))

// 输出结果：{"name":"John","age":30}