运筹帷幄,在 JSON.stringify 中见招拆招!
2024-01-30 06:28:51
JSON.stringify
JSON.stringify 在很多开发者眼里,可能只是一个简单的对象转字符串的过程,但殊不知它还有许多不为人知的用法。我们今天就来揭开 JSON.stringify 的神秘面纱,看看它到底能做些什么。
你同往常一样从接口拿到的模板数据将图片展示到页面上,某天后端同学为 oss 资源加了个 CDN 域名后需要让原本走 bucket.oss-cn-hangzhou.aliyuncs.com 的图片统一走 newcdn.resource.alibaba.com 域名,如果不了解 JSON.stringify 恨不得直接放弃这张 CDN 域名。
let resData = {
"template": "<div>
<img src="http://bucket.oss-cn-hangzhou.aliyuncs.com/a.jpg">
</div>"
}
好吧,聪明如你,也许会直接用正则将 oss 替换成 newcdn,但是这种方式也太 hack 了点,如果 CDN 域名还会变怎么办?显然,更好的办法是让 JSON.stringify 帮我们一把。
function transformDomain (data) {
return JSON.parse(
JSON.stringify(data, function (key, value) {
if (typeof value === 'string' && /http[s]?:\/\/bucket/.test(value)) {
return value.replace(/(?<=http[s]?:\/\/bucket\.)oss-cn-hangzhou\.aliyuncs\.com/g, 'newcdn.resource.alibaba.com')
}
return value;
})
)
}
只需要几行代码,就可以完成对对象中所有符合条件的字符串的替换,是不是很简单呢?
上面仅仅是 JSON.stringify 的一个例子,它还有很多其他用法。如果你想了解更多,请继续阅读。
JSON.stringify 可以修剪对象。如果你有一个对象,其中包含一些你不想发送到服务器的数据,你可以使用 JSON.stringify 来修剪它。例如,假设你有以下对象:
let obj = {
"name": "John Doe",
"age": 30,
"password": "secret"
}
如果你想发送这个对象到服务器,但你不想发送密码,你可以使用 JSON.stringify 来修剪对象,如下所示:
let json = JSON.stringify(obj, ["name", "age"]);
这将生成一个只包含姓名和年龄的 JSON 字符串:
{"name": "John Doe", "age": 30}
JSON.stringify 可以过滤对象。如果你有一个对象,其中包含一些你不想发送到服务器的数据,你可以使用 JSON.stringify 来过滤它。例如,假设你有以下对象:
let obj = {
"name": "John Doe",
"age": 30,
"password": "secret"
}
如果你想发送这个对象到服务器,但你不想发送密码,你可以使用 JSON.stringify 来过滤对象,如下所示:
let json = JSON.stringify(obj, function(key, value) {
if (key === "password") {
return undefined;
}
return value;
});
这将生成一个不包含密码的 JSON 字符串:
{"name": "John Doe", "age": 30}
JSON.stringify 可以格式化对象。如果你有一个对象,其中包含一些你想以特定方式格式化的数据,你可以使用 JSON.stringify 来格式化它。例如,假设你有以下对象:
let obj = {
"name": "John Doe",
"age": 30,
"address": {
"street": "123 Main Street",
"city": "Anytown",
"state": "CA",
"zip": "12345"
}
}
如果你想发送这个对象到服务器,但你想以更易读的方式格式化它,你可以使用 JSON.stringify 来格式化对象,如下所示:
let json = JSON.stringify(obj, null, 2);
这将生成一个以缩进格式格式化的 JSON 字符串:
{
"name": "John Doe",
"age": 30,
"address": {
"street": "123 Main Street",
"city": "Anytown",
"state": "CA",
"zip": "12345"
}
}
希望这篇文章能让你对 JSON.stringify 有一个更深入的了解。如果你想了解更多关于 JSON.stringify 的信息,可以参阅 MDN 文档:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify