前端JSON处理-CFANZ编程社区

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}