脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript JSON

你不知道的5个JavaScript中JSON的秘密功能分享

 更新时间：2023年05月31日 09:43:58   作者：前端小智  
在开发中，我们会经常使用 JSON.stringify(object) 来序列化对象，但JSON.stringify方法除了了第一个参数外，还有其它参数可用，今天我们一起来看看这些参数是做啥的

在开发中，我们会经常使用 JSON.stringify(object) 来序列化对象，但JSON.stringify方法除了了第一个参数外，还有其它参数可用，今天我们一起来看看这些参数是做啥的，Let's 开始。

1.格式化

默认的 JSON.stringify(object) 出来数据是一行字符串，这看起来很丑，如下所示：

const user = {
  name: '小智',
  age: 30,
  isAdmin: true,
  friends: ['隔壁老王', '小可爱'],
  address: {
    city: '天上人间',
  },
}
console.log(JSON.stringify(user))
// {"name":"小智","age":30,"isAdmin":true,"friends":["隔壁老王","小可爱"],"address":{"city":"天上人间"}}

JSON.stringify也有一个内置的格式化器!

console.log(JSON.stringify(user, null, 2))
{
  "name": "小智", 
  "age": 30,      
  "isAdmin": true,
  "friends": [
    "隔壁老王",
    "小可爱"
  ],
  "address": {
    "city": "天上人间"
  }
}

(如果你想知道这个 null 是什么，我们以后再谈）。

在这个例子中，JSON的格式化有2个空格的缩进。我们还可以指定一个自定义字符，用于缩进。

console.log(JSON.stringify(user, null, '【二哈】'))
{
【二哈】"name": "小智",
【二哈】"age": 30,
【二哈】"isAdmin": true,
【二哈】"friends": [
【二哈】【二哈】"隔壁老王",
【二哈】【二哈】"小可爱"
【二哈】],
【二哈】"address": {
【二哈】【二哈】"city": "天上人间"
【二哈】}
}

2.在序列化的数据中隐藏某些属性

JSON.stringify 还有一个很少有人知道的第二个参，称为 replacer，是一个函数或数组，决定哪些数据要保留在输出中，哪些不要。

举例一，假如，我们想隐藏用户的密码字段，可以这么做：

const user = {
  name: '小智',
  password: '12345',
  age: 30
};
console.log(JSON.stringify(user, (key, value) => {
  if (key === 'password') {
    return
  }
  return value
}))

输出：

{"name":"小智","age":30}

我们可以进一步重构:

function  stripKeys (...keys) {
  return (key, value) => {
    if (keys.includes(key)) return 
    return value
  }
}
const user = {
  name: '小智',
  password: '12345',
  age: 30,
  gender: '未知'
};
console.log(JSON.stringify(user, stripKeys('password', 'gender')))

输出：

{"name":"小智","age":30}

你也可以传递一个数组:

const user = {
  name: '小智',
  password: '12345',
  age: 30
}
console.log(JSON.stringify(user, ['name', 'age']))

输出：

{"name":"小智","age":30}

最酷的是这对数组也有效，假设有如下的数组：

const poetry = [
  {
    name: '小智',
    content: [
      '兴尽晚回舟，误入藕花深处。',
      '鬼畜，鬼畜，单身百年手速。',
      '起点太高，于是期待太多，奢求太过，所以永不满足。',
    ],
    tags: ['经典', '魔幻', '鬼才'],
  },
  {
    name: '王大志',
    content: [
      '君子无非就是有耐心的狼。',
      '信者,无需誓言,不信者,誓言亦无助。'
    ],
    tags: ['经典', '魔幻', '鬼才'],
  },
]

由于诗太过美丽，我想出名，最后输出就想打出输出关于名字的字段，那么也可以使用 JSON.stringify 来做：

console.log(JSON.stringify(poetry, ['name']))

输出：

[{"name":"小智"},{"name":"王大志"}]

漂亮！

3.使用 toJSON 来创建自定义输出格式

如果一个对象实现了 toJSON 函数，JSON.stringify 将使用它来串化数据。

考虑一下这个例子：

class Fraction {
  constructor(n, d) {
    this.numerator = n;
    this.denominator = d;
  }
}
console.log(JSON.stringify(new Fraction(1, 2)))

输出:

{"numerator":1,"denominator":2}

如果我们想让输出的结果是 1/2，那要怎么做呢？实现 toJSON 方法。

class Fraction {
  constructor(n, d) {
    this.numerator = n;
    this.denominator = d;
  }
  toJSON() {
      return `${this.numerator}/${this.denominator}`
  }
}
console.log(JSON.stringify(new Fraction(1, 2)))

JSON.stringify 根据 toJSON 方法来解析，所以结果是 1/2。

4.恢复数据

继续上面的例子，如果我们想再次解析JSON时，分数会神奇被还原成原来的对象，这是不是很酷？我们可以这样做：

class Fraction {
  constructor(n, d) {
    this.numerator = n;
    this.denominator = d;
  }
  toJSON() {
      return `${this.numerator}/${this.denominator}`
  }
  static fromJSON(key, value) {
    if (typeof value === 'string') {
        const parts = value.split('/').map(Number);
        if (parts.length === 2) return new Fraction(parts);
    }
    return value;
  }
}
const fraction = new Fraction(1, 2);
const stringified = JSON.stringify(fraction);
console.log(stringified);
// "1/2"
const revived = JSON.parse(stringified, Fraction.fromJSON);
console.log(revived);
// Fraction { numerator: 1, denominator: 2 }

我们可以向 JSON.parse 传递第二个参数来指定一个 reviver 函数。reviver 的工作是将字符串化的数据 "恢复"到它的原始形式。在这里，我们传递了一个reviver，它是 Fraction 类的静态方法 fromJSON。

有趣的是：这个功能在内置的Date对象中使用。试着查一下 Date.prototype.toJSON

console.log(JSON.stringify(new Date()))
//=> '"2022-03-01T06:28:41.308Z"'

为了恢复日期，我们可以使用 JSON.parse。

function reviveDate(key, value) {
    const regex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{1,}|)Z$/;
    if (typeof value === "string" && regex.test(value)) {
        return new Date(value);
    }
    return value;
}
console.log(JSON.parse('"2022-03-01T06:28:41.308Z"', reviveDate))
//=> Tue Mar 01 2022 06:28:41 GMT-0700 (Pacific Daylight Time)

5.使用 revivers 隐藏数据

与stringify 一样，parse也可以用来隐藏数据。它们工作方式是一样的:

const user = JSON.stringify({
  name: '小智',
  password: '12345',
  age: 30,
})
console.log(
  JSON.parse(user, (key, value) => {
    if (key === 'password') return
    return value
  })
)

输出：

{ name: '小智', age: 30 }

 以上就是你不知道的5个JavaScript中JSON的秘密功能分享的详细内容，更多关于JavaScript JSON的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 微信小程序 checkbox使用实例解析

    微信小程序 checkbox使用实例解析

    这篇文章主要介绍了微信小程序 checkbox使用实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • JavaScript数组去重的3种方法和代码实例

    JavaScript数组去重的3种方法和代码实例

    这篇文章主要介绍了JavaScript数组去重的3种方法和代码实例,本文直接给出实例代码,需要的朋友可以参考下
    2015-07-07
  • 编写高性能Javascript代码的N条建议

    编写高性能Javascript代码的N条建议

    JavaScript代码在web应用程序中经常用到，但是很多开发者忽视了一些性能方面的知识，如何编写高性能javascript代码呢？接下来，小编跟大家一起学习
    2015-10-10
  • JS仿万科底部的新闻滑动特效代码

    JS仿万科底部的新闻滑动特效代码

    本文通过一段实例代码给大家介绍了JS仿万科底部的新闻滑动特效代码，需要的朋友参考下
    2017-09-09
  • 浅谈让你的代码更简短，更整洁，更易读的ES6小技巧

    浅谈让你的代码更简短，更整洁，更易读的ES6小技巧

    这篇文章主要介绍了浅谈让你的代码更简短，更整洁，更易读的ES6小技巧，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • 200行代码实现blockchain 区块链实例详解

    200行代码实现blockchain 区块链实例详解

    这篇文章主要介绍了200行代码实现blockchain 区块链的相关知识，非常不错，具有参考借鉴价值，需要的朋友参考下吧
    2018-03-03
  • js实现坦克移动小游戏

    js实现坦克移动小游戏

    这篇文章主要为大家详细介绍了js实现坦克移动小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-10-10
  • JavaScript实现下拉列表框数据增加、删除、上下排序的方法

    JavaScript实现下拉列表框数据增加、删除、上下排序的方法

    这篇文章主要介绍了JavaScript实现下拉列表框数据增加、删除、上下排序的方法,涉及javascript针对页面下拉列表框元素的添加、删除及移动的相关技巧,具有一定参考借鉴,需要的朋友可以参考下
    2015-08-08
  • 简单的JS轮播图代码

    简单的JS轮播图代码

    这篇文章主要介绍了简单的JS轮播图实现方法，代码简单易懂，非常不错，具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • 微信小程序如何获取地址

    微信小程序如何获取地址

    这篇文章主要介绍了微信小程序获取地址的具体方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-12-12

最新评论