JavaScript中你不知道的5个JSON-使用技巧

Posted 2022-04-09 JackieDYH

开发中，经常使用 JSON.stringify(object) 来序列化对象，但除了第一个参数外，还有其它参数可用...

格式化

//默认的 JSON.stringify(object) 出来数据是一行字符串
const user = 
  name: 'JackieDYH',
  age: 30,
  isAdmin: true,
  friends: ['小可爱', '小可爱2'],
  address: 
    city: '天上人间',
  ,


console.log(JSON.stringify(user))
打印："name":"JackieDYH","age":30,"isAdmin":true,"friends":["小可爱","小可爱2"],"address":"city":"天上人间"

//JSON.stringify也有一个内置的格式化器!
//JSON的格式化有2个空格的缩进。我们还可以指定一个自定义字符，用于缩进。
console.log(JSON.stringify(user,null,2))
打印： 
  "name": "JackieDYH",
  "age": 30,
  "isAdmin": true,
  "friends": [
    "小可爱",
    "小可爱2"
  ],
  "address": 
    "city": "天上人间"
  



console.log(JSON.stringify(user,null,'DYH'))
打印： 
DYH"name": "JackieDYH",
DYH"age": 30,
DYH"isAdmin": true,
DYH"friends": [
DYHDYH"小可爱",
DYHDYH"小可爱2"
DYH],
DYH"address": 
DYHDYH"city": "天上人间"
DYH

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

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

//例一，假如，我们想隐藏用户的密码字段，可以这么做
const user = 
  name: 'JackieDYH',
  password: '12345',
  age: 30
;


console.log(JSON.stringify(user, (key, value) => 
  if (key === 'password') 
    return
  
  return value
))

打印："name":"JackieDYH","age":30

//进一步重构
function  stripKeys (...keys) 
  return (key, value) => 
    if (keys.includes(key)) return 
    return value
  

const user = 
  name: 'JackieDYH',
  password: '12345',
  age: 30,
  gender: '未知'
;

console.log(JSON.stringify(user, stripKeys('password', 'gender')))
打印："name":"JackieDYH","age":30

//也可以传递一个数组
const user = 
  name: 'JackieDYH',
  password: '12345',
  age: 30


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

打印： "name":"JackieDYH","age":30

//最酷的是这对数组也有效，假设有如下的数组
const poetry = [
  
    name: 'JackieDYH',
    content: [
      '兴尽晚回舟，误入藕花深处。',
      '鬼畜，鬼畜，单身百年手速。',
      '起点太高，于是期待太多，奢求太过，所以永不满足。',
    ],
    tags: ['经典', '魔幻', '鬼才'],
  ,
  
    name: 'JackieDYH2',
    content: [
      '君子无非就是有耐心的狼。',
      '信者,无需誓言,不信者,誓言亦无助。'
    ],
    tags: ['经典', '魔幻', '鬼才'],
  ,
]
console.log(JSON.stringify(poetry, ['name']))
打印： ["name":"JackieDYH","name":"JackieDYH2"]

使用 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)))
打印： "1/2"

恢复数据

继续上面的例子，如果我们想再次解析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 = /^\\d4-\\d2-\\d2T\\d2:\\d2:\\d2(\\.\\d1,|)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)

使用 revivers 隐藏数据

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

const user = JSON.stringify(
  name: 'JackieDYH',
  password: '12345',
  age: 30,
)

console.log(
  JSON.parse(user, (key, value) => 
    if (key === 'password') return
    return value
  )
)

输出：

 name: 'JackieDYH', age: 30