快捷導(dǎo)航

你不知道的5個(gè)JavaScript中JSON的秘密功能分享

更新時(shí)間：2023年05月31日 09:43:58 作者：前端小智

在開發(fā)中，我們會(huì)經(jīng)常使用?JSON.stringify(object)?來(lái)序列化對(duì)象，但JSON.stringify方法除了了第一個(gè)參數(shù)外，還有其它參數(shù)可用，今天我們一起來(lái)看看這些參數(shù)是做啥的

1.格式化

默認(rèn)的 JSON.stringify(object) 出來(lái)數(shù)據(jù)是一行字符串，這看起來(lái)很丑，如下所示：

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也有一個(gè)內(nèi)置的格式化器!

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

(如果你想知道這個(gè) null 是什么，我們以后再談）。

在這個(gè)例子中，JSON的格式化有2個(gè)空格的縮進(jìn)。我們還可以指定一個(gè)自定義字符，用于縮進(jìn)。

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

2.在序列化的數(shù)據(jù)中隱藏某些屬性

JSON.stringify 還有一個(gè)很少有人知道的第二個(gè)參，稱為 replacer，是一個(gè)函數(shù)或數(shù)組，決定哪些數(shù)據(jù)要保留在輸出中，哪些不要。

舉例一，假如，我們想隱藏用戶的密碼字段，可以這么做：

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

輸出：

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

我們可以進(jìn)一步重構(gòu):

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}

你也可以傳遞一個(gè)數(shù)組:

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

輸出：

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

最酷的是這對(duì)數(shù)組也有效，假設(shè)有如下的數(shù)組：

const poetry = [
  {
    name: '小智',
    content: [
      '興盡晚回舟，誤入藕花深處。',
      '鬼畜，鬼畜，單身百年手速。',
      '起點(diǎn)太高，于是期待太多，奢求太過，所以永不滿足。',
    ],
    tags: ['經(jīng)典', '魔幻', '鬼才'],
  },
  {
    name: '王大志',
    content: [
      '君子無(wú)非就是有耐心的狼。',
      '信者,無(wú)需誓言,不信者,誓言亦無(wú)助。'
    ],
    tags: ['經(jīng)典', '魔幻', '鬼才'],
  },
]

由于詩(shī)太過美麗，我想出名，最后輸出就想打出輸出關(guān)于名字的字段，那么也可以使用 JSON.stringify 來(lái)做：

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

輸出：

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

漂亮！

3.使用 toJSON 來(lái)創(chuàng)建自定義輸出格式

如果一個(gè)對(duì)象實(shí)現(xiàn)了 toJSON 函數(shù)，JSON.stringify 將使用它來(lái)串化數(shù)據(jù)。

考慮一下這個(gè)例子：

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

輸出:

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

如果我們想讓輸出的結(jié)果是 1/2，那要怎么做呢？實(shí)現(xiàn) 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 根據(jù) toJSON 方法來(lái)解析，所以結(jié)果是 1/2。

4.恢復(fù)數(shù)據(jù)

繼續(xù)上面的例子，如果我們想再次解析JSON時(shí)，分?jǐn)?shù)會(huì)神奇被還原成原來(lái)的對(duì)象，這是不是很酷？我們可以這樣做：

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 傳遞第二個(gè)參數(shù)來(lái)指定一個(gè) reviver 函數(shù)。reviver 的工作是將字符串化的數(shù)據(jù) "恢復(fù)"到它的原始形式。在這里，我們傳遞了一個(gè)reviver，它是 Fraction 類的靜態(tài)方法 fromJSON。

有趣的是：這個(gè)功能在內(nèi)置的Date對(duì)象中使用。試著查一下 Date.prototype.toJSON

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

為了恢復(fù)日期，我們可以使用 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 隱藏?cái)?shù)據(jù)

與stringify 一樣，parse也可以用來(lái)隱藏?cái)?shù)據(jù)。它們工作方式是一樣的:

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

輸出：