JSON.stringify 方法

JSON 对象是我们经常使用的一种数据存储对象,它的适用范围非常广。

而 JSON.stringify 方法的使用频率也极高,合理使用 stringify 方法,我们可以实现很多简单需求:

  • 要实现对象的深拷贝时,我们可以用 JSON 对象的 JSON.stringify 和 JSON.parse 来拷贝一个完全一样的对象,而不会对原对象产生任何引用关系。
  • 在使用 localStorage 时,也会用到它,因为 localStorage 只能存储字符串格式的内容,所以,我们在存之前,将数值转换成 JSON字符串。

JSON.stringify

JSON.stringify 方法可以帮我们把一个对象或数组转换成一个 JSON字符串。

我们通常只会用到它的第一个参数,其实它还有另外两个参数,可以让它实现一些非常好用的功能。

语法:

JSON.stringify(value, replacer \[, space])

参数:

  • value:将要被序列化的变量的值
  • replacer:替代器。可以是函数或者是数组:
    • 如果是一个函数,则value 每个属性都要经过这个函数的处理,该函数的返回值就是最后被序列化后的值。
    • 如果是一个数组,则要求该数组的元素是字符串,且这些元素会被当做value 的键(key)进行匹配,最后序列化的结果,是只包含该数组每个元素为key 的值。
  • space:指定输出数值的代码缩进,美化格式之用,可以是数字或者字符串:
    • 如果是数字(最大为10)的话,代表每行代码的缩进是多少个空格。
    • 如果是字符串的话,该字符串(最多前十个字符)将作显示在每行代码之前。

这时候,你应该知道了。我们可以用 JSON.stringify 来做序列化时的过滤,相当于我们可以自定义JSON.stringify 的解析逻辑。

使用函数过滤并序列化对象

javascript 复制代码
function replacer(key, value) {
    if (typeof value === "string") {
        return undefined;
    }
    return value;
}
var foo = {
    foundation: "Mozilla",
    model: "box",
    week: 45,
    transport: "car",
    month: 7
};
var jsonString = JSON.stringify(foo, replacer); // {"week":45,"month":7}

使用数组过滤并序列化对象

javascript 复制代码
const user = {
    name: "zollero",
    nick: "z",
    skills: ["JavaScript", "CSS", "HTML5"]
};
JSON.stringify(user, ["name", "skills"], 2); 
// "{//   "name": "zollero",//   "skills": [//     "JavaScript",//     "CSS",//     "HTML5"//   ]// }"

还有一个有意思的东西,是对象的toJSON 属性。

如果一个对象有toJSON 属性,当它被序列化的时候,不会对该对象进行序列化,而是将它的toJSON 方法的返回值进行序列化

看下面的例子:

javascript 复制代码
var obj = {
    foo: "foo",
    toJSON: function () {
        return "bar";
    }
};
JSON.stringify(obj); 
// '"bar"'JSON.stringify({x: obj}); // '{"x":"bar"}'

总结

stringify 方法的重点和难点在于第二和第三个参数的灵活使用上,需要多加练习。

相关推荐
kyriewen5 小时前
别再对着 TypeScript 报错发呆了:我把 10 个最常见的红色波浪线翻译成了人话
前端·javascript·typescript
free356 小时前
从 0 实现一个 Tiny JavaScript VM:项目架构拆解
javascript
徐小夕8 小时前
我们开源了一款“框架无关”的思维导图编辑器,3分钟集成到任意系统
前端·javascript·github
PBitW8 小时前
GPT训练我的第三天,明白了应该咋说满分回答!😕😕😕
前端·javascript·面试
像我这样帅的人丶你还8 小时前
Java 后端详解(四):分页与搜索
java·javascript·后端
labixiong9 小时前
还原一个完整符合规范的 Promise(二)
前端·javascript
To_OC9 小时前
万字解析《JS 语言精粹》之第五章:继承 5 大核心精髓(JS 原型核心)
前端·javascript·代码规范
裕波11 小时前
AI 正在重写应用开发。Vue 与 Vite,给出新的答案。
javascript·vue.js
kyriewen12 小时前
折腾了半年 AI 编程工作流,最后发现效率瓶颈是桌上那块屏幕
前端·javascript·ai编程
张元清14 小时前
React useDebounce Hook:给状态和回调做防抖(2026)
javascript·react.js