EnlightenCode

你真的了解 JSON.stringify 吗？ ​

相信很多人都使用过 JSON.stringify() 来将一个 JS 对象转换成 JSON 字符串，但其实这个函数还有第二个和第三个参数，它们都非常有用！让我们一起深入了解吧 🚀

1. 基础用法 - 传递第一个参数 ⭐ ​

js
let obj = {
  name: '小明',
  age: 18
}
console.log(JSON.stringify(obj)) //{"name":"小明","age":18}

2. 高级用法 - 第二个参数的妙用 🔧 ​

2.1 数组方式 - 选择性转换 ​

js
let obj = {
  name: '小明',
  age: 18,
  gender: 'male'
}
// 只转换数组中指定的属性
console.log(JSON.stringify(obj, ['name'])) //{"name":"小明"}

2.2 函数方式 - 自定义转换逻辑 ​

js
let obj = {
  name: '小明',
  age: 18,
  gender: 'male'
}
// 通过函数过滤或修改数据
console.log(JSON.stringify(obj, (key, value) => 
  key === 'name' ? undefined : value
)) //{"age":18,"gender":"male"}

2.3 特殊类型处理 - RegExp 的处理 ⚠️ ​

js
let obj = {
  name: 'jack',
  age: 18,
  dataList: [
    {
      value: 1
    }
  ],
  date: new Date(),
  reg: /\d+/
}

// 默认情况下，RegExp 会被转成空对象
console.log(JSON.stringify(obj))
// {"name":"jack","age":18,"dataList":[{"value":1}],"date":"2024-03-20T02:12:13.800Z","reg":{}}

// 自定义处理 RegExp
let str = JSON.stringify(obj, (key, value) => {
  switch (key) {
    case 'reg':
      return [value.source, value.ignoreCase ? 'i' : '', value.global ? 'g' : ''];
    default:
      return value
  }
})
console.log(str)
//{"name":"jack","age":18,"dataList":[{"value":1}],"date":"2024-03-20T02:19:41.566Z","reg":["\\d+","",""]}

// 如何还原？
console.log(JSON.parse(str, (key, value) => {
  switch (key) {
    case 'reg':
      return new RegExp(value[0], value.slice(1).join(''))
    case 'date':
      return new Date(value)
    default:
      return value
  }
}))
//{name: "jack", age: 18, dataList: Array(1), date: Mon Mar 20 2024 10:27:30 GMT+0800, reg: /\d+/}

3. 格式化输出 - 第三个参数的作用 📐 ​

js
let obj = {
  name: '小明',
  age: 18,
  gender: 'male',
  tikName: {
    age: 22,
    address: '嘿嘿路嘿嘿巷444号1楼222'
  }
}

// 未使用第三个参数 - 输出为一行
console.log(JSON.stringify(obj))
// {"name":"小明","age":18,"gender":"male","tikName":{"age":22,"address":"嘿嘿路嘿嘿巷444号1楼222"}}

// 使用第三个参数(缩进空格数) - 优化输出格式
console.log(JSON.stringify(obj, null, 2))
/*
{
  "name": "小明",
  "age": 18,
  "gender": "male",
  "tikName": {
    "age": 22,
    "address": "嘿嘿路嘿嘿巷444号1楼222"
  }
}
*/

补充知识点 💡 ​

  1. 特殊值处理规则:
js
const obj = {
  undef: undefined,        // 会被忽略
  func: function() {},     // 会被忽略
  symbol: Symbol(),        // 会被忽略
  nan: NaN,               // 转换为 null
  infinity: Infinity,      // 转换为 null
  null: null              // 保持 null
}
console.log(JSON.stringify(obj)) // {"nan":null,"infinity":null,"null":null}
  1. 循环引用问题:
js
const obj = {};
obj.self = obj;
// TypeError: Converting circular structure to JSON
JSON.stringify(obj);
  1. toJSON 方法:
js
const obj = {
  name: '小明',
  toJSON() {
    return '这是自定义的 JSON 字符串';
  }
};
console.log(JSON.stringify(obj)); // "这是自定义的 JSON 字符串"

实用技巧 🌟 ​

  1. 数据存储时格式化:
js
localStorage.setItem('userData', JSON.stringify(data, null, 2));
  1. 去除敏感信息:
js
const data = {
  name: '小明',
  password: '123456',
  token: 'abc123'
};

const safeData = JSON.stringify(data, (key, value) => 
  ['password', 'token'].includes(key) ? undefined : value
);
  1. 日期格式化:
js
const data = {
  name: '小明',
  createTime: new Date()
};

JSON.stringify(data, (key, value) => 
  key === 'createTime' ? value.toLocaleString() : value
);

希望这篇优化后的博客能帮助你更好地理解和使用 JSON.stringify！如果有任何问题，欢迎讨论 🎉