你不知道的 JavaScript JSON 的 5 个秘密特性🤯

我敢肯定，你已经用全局JSON对象做过各种各样的事情，比如在获取请求中，以及为了避免可怕的。我还敢打赌，你肯定不知道它还能提供[object Object]其他那些鲜为人知的功能！JSON

JSON可以做一些很酷的事情，比如恢复数据、使用自定义格式对数据进行编码/解码、在字符串化数据中隐藏某些属性以及格式化 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 的作用是将字符串化的数据“恢复”到其原始形式。这里，我们传递了一个 reviver 函数，它是类fromJSON的静态属性Fraction。

在这种情况下，复活器会检查该值是否为有效分数，如果是，则创建一个新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. 使用恢复器隐藏数据

与解析器类似，复活器也可用于隐藏数据。其工作原理相同。

以下是一个例子：

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 }

作为练习，检查您是否可以将前面显示的解析器重写为复活器。

就这样结束了！

如果您知道其他任何酷炫技巧，请告诉我JSON👀

感谢阅读！

文章来源：https://dev.to/siddharthshyniben/5-secret-features-of-json-you-didnt-know-about-5bbg