JSON数据处理以及常用方法

目录

格式

示例

JSON生成JSON.stringify(value,replacer?,space?)

应用

数据发送到API前的预处理

简单深拷贝

JSON 是一种轻量的数据交换格式。

格式

键：string，双引号包裹。

值：string、number、boolean、null、数组、普通对象（大括号）

被用作前后端交互时的传输数据，所以需要其他高级语言例如 java，python 等都可以解析，所以对于 javascript 中的 undefined、函数、symbol 类型的数据，其他语言无法解析，所以就会引起错误。

不能写注释，最外面大括号包裹。

示例

var str = '{"name": "参宿","id":7}';      //'JSON字符串'
var obj = JSON.parse(str);                //JSON.parse(str)
console.log(obj);                       //JSON的解析（JSON字符串转换为JS对象）

//Object { name: "参宿", id: 7 }
var jsonstr = JSON.stringify(obj);        //JSON.stringify(obj)
console.log(jsonstr);                     //JSON的生成（JS对象转换为JSON字符串）

JSON.parse(text[, reviver])//reviver函数参数，修改解析生成的原始值，调用时机在 parse 函数返回之前。
//k：key，v：value
JSON.parse('{"p": 5}', function (k, v) {
    if(k === '') return v;     // 如果到了最顶层，则直接返回属性值，
    return v * 2;              // 否则将属性值变为原来的 2 倍。
});                            // { p: 10 }

//从最最里层的属性开始，一级级往外，最终到达顶层，也就是解析值本身
JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', function (k, v) {
    console.log(k); // 输出当前的属性名，从而得知遍历顺序是从内向外的，
                    // 最后一个属性名会是个空字符串。
    return v;       // 返回原始属性值，相当于没有传递 reviver 参数。
});

// 1
// 2
// 4
// 6
// 5
// 3
// ""

JSON生成JSON.stringify(value,replacer?,space?)

1. value: 要转换的 JavaScript 对象、数组、字符串、数字、布尔值或 null。
2. replacer (可选): 一个函数或数组，用于控制转换过程中的属性过滤和转换操作。
3. space (可选): 用于控制输出字符串的格式化，可以是一个字符串或数字。

如果是一个数字，表示缩进的空格数；

如果是一个字符串，表示使用该字符串作为缩进。

const data = {
    name: "Alice",
    age: 25,
    address: "123 Main St",
    secretInfo: "This is a secret"
};

// 使用 replacer 函数来过滤掉 secretInfo 属性
const jsonStringWithReplacer = JSON.stringify(data, (key, value) => {
    if (key === "secretInfo") {
        return undefined; // 过滤掉 secretInfo 属性
    }
    return value;
}, 2);

console.log(jsonStringWithReplacer);

const data = {
    name: "Bob",
    age: 28,
    hobbies: ["coding", "gaming"],
    address: "456 Elm St"
};

// 使用 replacer 数组来只保留 name 和 hobbies 属性
const jsonStringWithArrayReplacer = JSON.stringify(data, ["name", "hobbies"], 2);

console.log(jsonStringWithArrayReplacer);

应用

数据发送到API前的预处理

处理特定的键（如'tags' ），在发送前根据情况转换为JSON字符串或从JSON字符串解析为对象。

// 导入IEntity接口
import { IEntity } from "@/interface";

// 定义一个函数dealEntityForApi，用于处理传入的数据对象data，isParse标志指定是否解析JSON字符串
export function dealEntityForApi(data: Record<string,any>, isParse:boolean = false){
  // 定义需要处理的键名列表
  const keys = ['tags', 'variables']
  // 初始化一个新对象newData，用于存储处理后的数据
  let newData:Record<string,string|number> = {} 
  // 遍历keys数组中的每一个键名
  for(const key of keys){
    // 检查原数据对象data中是否存在当前键名，并且对应的值不为空
    if(data.hasOwnProperty(key) && data[key]){
      // 根据isParse标志决定是解析JSON字符串为对象，还是将对象转为JSON字符串
      newData[key] = isParse ? JSON.parse( data[key]) : JSON.stringify( data[key])
    }
  }
  // 将原始数据对象data和处理后的newData对象合并，返回一个新对象，该对象符合IEntity接口
  return {...data,...newData} as IEntity
}

简单深拷贝