深入 JSON 更多参数和细节

• JSON 是一种轻量级的、基于文本的、与语言无关的语法，用于定义数据交换格式
• 它来源于 ECMAScript 编程语言，但是独立于编程语言

---

JSON 特征和适用场景

• JSON就是一串字符串，使用特定的符号标注
• 属性键只能是双引号的字符串

适用场景：

• 请求接口发送数据，接收数据
• 本地存储
• 深克隆对象

---

JSON值

• object
• array
• number（只能十进制）
• string
• true
• false
• null

JSON.stringify()

• 语法：JSON.stringify(value[, replacer [, space]])

• • 第二个参数 replacer：过滤属性或者处理值

• • • 如果该参数是一个数组：则只有包含在这个数组中的属性名才会被序列化到最终的JSON字符串中
    • 如果该参数是一个函数︰则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理
    • 如果该参数为 null 或者未提供:，则对象所有的属性都会被序列化

• • 第三个参数space：美化输出格式

const obj = {
  name: "云牧",
  age: 18,
};

// 数组和函数进行过滤属性
console.log(JSON.stringify(obj, ["name"])); // {"name":"云牧"}
console.log(
  JSON.stringify(obj, (key, value) => {
    if (typeof value === "string") {
      return undefined;
    }
    return value;
  })
); // {"age":18}
// space 美化格式
console.log(JSON.stringify(obj, null, "\t"));

---

JSON.stringify 序列化 undefined、任意的函数、symbol

• 作为对象属性值，自动忽略
• 数组内，序列化返回null
• 单独序列化时，返回 undefined

const data1 = {
  a: 1,
  b: undefined,
  fn: function () {},
  c: Symbol(),
};
console.log(JSON.stringify(data1)); // {"a": 1}

//数组返回null
const data2 = [1, undefined, () => {}, Symbol()];
console.log(JSON.stringify(data2)); // ["1", null, null, null]

//返回undefined
console.log(JSON.stringify(undefined)); // undefined
console.log(JSON.stringify(() => {})); // undefined
console.log(JSON.stringify(Symbol())); // undefined

---

序列化其他规则

• Date返回 ISO 字符串
• Biglnt、循环引用报错
• NaN、Infinity、null都会作为null
• Map、Set、WeakMap等对象，仅序列化可枚举属性

// Date
console.log(JSON.stringify({ now: new Date() })); // {"now":"2023-02-23T12:35:41.110Z"}

// NaN 和 Infinity 以及 null
console.log(JSON.stringify(NaN)); // null
console.log(JSON.stringify(Infinity)); // null
console.log(JSON.stringify(null)); // null

//转换为对应的原始值。
console.log(JSON.stringify([new Number(2), new String("hello"), new Boolean(false)])); // [2,"hello",false]

//仅序列化可枚举属性
const obj = JSON.stringify(
  Object.create(null, {
    a: { value: 1, enumerable: false },
    b: { value: 2, enumerable: true },
  })
);
console.log(obj); // {"b": 2}

// BigInt 报错
// const bigI = {
//   a: 1n,
// };
// console.log(JSON.stringify(c));

---

JSON.parse()

• 注意:第二个参数函数reviver (k, v)

• • k 代表属性键，v 代表属性值，如果返回 undefined 则会从当前的属性删除

const jsonStr = `
	{ 
  	"name": "云牧", 
  	"age":  18
   }
`;
// 保密身份证
const obj = JSON.parse(jsonStr, (key, value) => {
  if (key === "age") {
    return undefined;
  }
  return value;
});

console.log(obj); // { name: '云牧' }

注意：遍历顺序

const jsonStr = `{
  "name": "云牧",
  "age": 18, 
  "orderDetail": {
      "createTime": 1632996519781,
      "orderId": 8632996519781,
      "more": {
          "desc": "描述"
      }
  }
}`;

JSON.parse(jsonStr, function (k, v) {
  console.log("key:", k);
  return v;
});

打印结果：

key: name
key: age
key: createTime
key: orderId
key: desc
key: more
key: orderDetail
key: 

注意：this

const jsonStr = `{
  "name": "云牧",
  "orderDetail": {
      "createTime": 1632996519781
  }
}`;

JSON.parse(jsonStr, function (k, v) {
  console.log("key:", k, ",this:", this);
  return v;
});

打印结果：

key: name ,this: { name: '云牧', orderDetail: { createTime: 1632996519781 } }
key: createTime ,this: { createTime: 1632996519781 }
key: orderDetail ,this: { name: '云牧', orderDetail: { createTime: 1632996519781 } }
key:  ,this: { '': { name: '云牧', orderDetail: { createTime: 1632996519781 } } }

---

toJSON

• 对象拥有toJSON方法，toJSON会覆盖默认的序列化行为

const obj = {
  name: "云牧",
  orderDetail: {
    createTime: 1632996519781,
  },
  toJSON() {
    return {
      name: "林怼怼",
    };
  },
};

console.log(JSON.stringify(obj)); // {"name":"林怼怼"}