JSON.stringify作用以及使用场景

• 将一个JavaScript 对象或值转换为JSON 字符串

  序列化成 一个 JSON 字符串的值

语法：

• 第一个参数 obj 是要进行转换的 JavaScript 对象。
• 第二个参数 是用于替换属性值的函数，可以在此处传入一个函数来自定义属性值的转换方式，如果不需要自定义，可以传入 null。
• 第三个参数 是用来控制缩进的空格数，表示在生成的字符串中每个级别的缩进空格数

js

JSON.stringify(obj[, replacer [, space]])

使用场景

• localStorage存储
• 深拷贝
• 删除对象某一属性 【属性过滤】
• JSON格式化

localStorage存储

localStorage只能传字符串, 把存储的对象 转换为 字符串

javascript

 localStorage.setItem("obj", JSON.stringify(obj));

深拷贝

使用 JSON.parse(JSON.stringify) 是实现对象的深拷贝最简单暴力的方法之一

具有以下缺点：

• 无法解决循环引用问题
• 函数、undefined、Symbol 会被忽略

属性过滤

需要使用到JSON.stringify第二个参数 replacer

• replacer 是数组时，可以过滤出所需的属性 【数组的值代表将被序列化成 JSON 字符串的属性名】
• replacer 是函数时，通过回调的参数进行判断，返回undefined则表示移除这个属性

javascript

const obj = {
  a: 1,
  b: 2,
  c: 3,
};
// 需要使用到JSON.stringify第二个参数 replacer
// 1、 replacer 是数组时，可以过滤出所需的属性  【数组的值代表将被序列化成 JSON 字符串的属性名】
const newObj1 = JSON.stringify(obj, ["a", "b"]);
// newObj1 => '{"a":1,"b":2}', 只保留“a”和“b”属性值。

// 2、replacer 是函数时
const newObj2 = JSON.stringify(obj, (key, value) => {
  // 过滤属性a和b
  if (["a", "b"].includes(key)) {
    return undefined;
  }
  return value;
});
// newObj2 => {"c":3}

JSON格式化

javascript

JSON.stringify(obj,null,2)

JSON.stringify()数据丢失问题

使用JSON.stringify序列化之后的数据，在JSON.parse会可能丢失部分数据

• 使用JSON.Stringify 转换的数据中，对于undefined、function、NaN、 regExp、Date 都会丢失本身的值

function，undefined，Symbol，这几种类型，不可枚举属性，序列化后，这个键值对会消失

Date对象，序列化之后，会变成字符串

RegExp 对象 序列化之后会变成空对象

js

const obj ={
    func:()=>'func',
    und:undefined,
    date:new Date(),
    reg:/\d/
}
JSON.parse(JSON.stringify(obj)) // { data:'2023-01-16',reg:{} }