JavaScript 中 JSON 的 5 個小技巧

關於 JavaScript 的 JSON 的一些小技巧

1. 格式化

默認的字符串化器還會縮小 JSON，看起來很難看

const user = {
  name: 'John',
  age: 30,
  isAdmin: true,
  friends: ['Bob', 'Jane'],
  address: {
    city: 'New York',
    country: 'USA'
  }
};
console.log(JSON.stringify(user));


//=> {"name":"John","age":30,"isAdmin":true,"friends":["Bob","Jane"],

"address":{"city":"New York","country":"USA"}}

JSON.stringify也有一個內置的格式化程序！

console.log(JSON.stringify(user, null, 2));
// {
//   "name": "John",
//   "age": 30,
//   "isAdmin": true,
//   "friends": [
//     "Bob",
//     "Jane"
//   ],
//   "address": {
//     "city": "New York",
//     "country": "USA"
//   }
// }

（如果你想知道那個 null 是什麼，我們稍後會談到）

在此示例中，JSON 格式爲 2 個縮進空格。

我們還可以指定用於縮進的自定義字符。

console.log(JSON.stringify(user, null, 'lol'));
// {
// lol"name": "John",
// lol"age": 30,
// lol"isAdmin": true,
// lol"friends": [
// lollol"Bob",
// lollol"Jane"
// lol],
// lol"address": {
// lollol"city": "New York",
// lollol"country": "USA"
// lol}
// }

2. 隱藏字符串化數據中的某些屬性

JSON.stringify第二個參數，這在很大程度上是未知的。它被稱爲 replacer，它是一個函數或數組，用於決定哪些數據保留在輸出中，哪些不保留。

這是一個簡單的示例，我們可以在其中隱藏 password 用戶。

const user = {
  name: 'John',
  password: '12345',
  age: 30
};

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

    return value;
}));

這是輸出：
{"name":"John","age":30}
我們可以進一步重構：

function stripKeys(...keys) {
    return (key, value) => {
        if (keys.includes(key)) {
            return;
        }

        return value;
    };
}

const user = {
  name: 'John',
  password: '12345',
  age: 30,
  gender: 'male'
};

console.log(JSON.stringify(user, stripKeys('password', 'gender')))

輸出：
{"name":"John","age":30}
還可以傳遞一個數組來僅獲取某些鍵：

const user = {
    name: 'John',
    password: '12345',
    age: 30
}

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

輸出相同的東西。

這也適用於數組。如果你有一大堆蛋糕：

const cakes = [
    {
        name: 'Chocolate Cake',
        recipe: [
            'Mix flour, sugar, cocoa powder, baking powder, eggs, vanilla, and butter',
            'Mix in milk',
            'Bake at 350 degrees for 1 hour',
            // ...
        ],


ingredients: ['flour', 'sugar', 'cocoa powder', 'baking powder', 'eggs', 'vanilla',

'butter']

},
    // tons of these
];

我們可以輕鬆地做同樣的事情，並且替換器將應用於每個蛋糕：

const cakes = [
    {
        name: 'Chocolate Cake',
        recipe: [
            'Mix flour, sugar, cocoa powder, baking powder, eggs, vanilla, and butter',
            'Mix in milk',
            'Bake at 350 degrees for 1 hour',
            // ...
        ],


ingredients: ['flour', 'sugar', 'cocoa powder', 'baking powder', 'eggs', 'vanilla',

'butter']

},
    // tons of these
];

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

我們得到這個：
[{"name":"Chocolate Cake"},{"name":"Vanilla Cake"},...]

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，它是類的靜態 fromJSON 屬性 Fraction。

在這種情況下，reviver 檢查該值是否是一個有效的分數，如果是，它會創建一個新 Fraction 對象並返回它。

有趣的事實：此功能用於內置的 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 隱藏數據

與解析器一樣，恢復器也可用於隱藏數據。它以相同的方式工作。

這是一個例子：

const user = JSON.stringify({
  name: 'John',
  password: '12345',
  age: 30
});

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

    return value;
}));

這是輸出：
{ name: 'John', age: 30 }

來源：

https://segmentfault.com/a/1190000041488147

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/kD1LrnPoiMTzbJZM88hbqw

猜你喜歡