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 方法的重点和难点在于第二和第三个参数的灵活使用上,需要多加练习。

相关推荐
张较瘦_9 分钟前
JavaScript | 数组方法实战教程:push()、forEach()、filter()、sort()
开发语言·javascript·ecmascript
POLITE312 分钟前
Leetcode 41.缺失的第一个正数 JavaScript (Day 7)
javascript·算法·leetcode
bjzhang7531 分钟前
使用 HTML + JavaScript 实现积分抽奖系统
前端·javascript·html
越努力越幸运5081 小时前
vue学习二:
javascript·vue.js·学习
POLITE31 小时前
Leetcode 42.接雨水 JavaScript (Day 3)
javascript·算法·leetcode
京东零售技术1 小时前
2025京东零售技术年度精选 | 技术干货篇(内含福利)
前端·javascript·后端
前端Hardy2 小时前
祝大家 2026 年新年快乐,代码无 bug,需求一次过
javascript·css·html
小皮虾2 小时前
这应该是前端转后端最简单的办法了,不买服务器、不配 Nginx,也能写服务端接口,腾讯云云函数全栈实践
前端·javascript·全栈
码途进化论2 小时前
Vue3 防重复点击指令 - clickOnce
前端·javascript·vue.js
神秘的猪头2 小时前
🎣 拒绝面条代码!手把手带你用自定义 Hooks 重构 React 世界
javascript·react.js