关于 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 }

5 个JavaScript中使用JSON的小技巧相关推荐

40种Javascript中常用的使用小技巧【转】
1. οncοntextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 < table border οncοntextmen ...
Json学习总结（1）——Java和JavaScript中使用Json方法大全
2019独角兽企业重金招聘Python工程师标准>>> 摘要:JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript ...
JS/JavaScript中解析JSON --- JSON.parse()、JSON.stringify()以及$.parseJSON()使用详解
JS/JavaScript中解析JSON --- JSON.parse().JSON.stringify()以及$.parseJSON()使用详解现在JSON格式在web开发中非常重要,特别是在使用 ...
在JavaScript中解析JSON？ [重复]
本文翻译自:Parse JSON in JavaScript? [duplicate] This question already has answers here : 这个问题已经在这里有了答案 : ...
在 JavaScript 中创建 JSON 对象
<html> <body> <h2>在 JavaScript 中创建 JSON 对象</h2><p> Name: <span id=& ...
java犯的小错误_[Java教程]十个JavaScript中易犯的小错误，你中了几枪？
[Java教程]十个JavaScript中易犯的小错误,你中了几枪? 0 2015-06-01 12:00:19 序言在今天,JavaScript已经成为了网页编辑的核心.尤其是过去的几年,互联网见 ...
jsonp请求html页面,JavaScript中的JSON和JSONP
简单地使用json并不能支持跨域资源请求,为了解决这个问题,需要采用jsonp数据交互协议.众所周知,js文件的调用不受跨域与否的限制,因此如果想通过纯web端跨域访问数据,只能在远程服务器上设法将j ...
javascript 中使用JSON
因为JSON 是 javascript 的一个子集,所以,在javascript 中使用JSON是非常简单的. js 代码 var myJSONObject = {"bindings&quo ...
JSON—JavaScript中的JSON
JSON的数据格式 JavaScript中的JSON 1.JavaScript与JSON JSON是一种语法,用来序列化对象.数组.数值.字符串.布尔值 null.他基于JavaScript语法,但与 ...

5 个JavaScript中使用JSON的小技巧