返回

运筹帷幄,在 JSON.stringify 中见招拆招!

前端

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