乐趣区

关于前端:你不知道的JavaScript中的5个JSON秘密功能

作者:Siddharth
译者:前端小智
起源:dev

有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。

在开发中,咱们会常常应用 JSON.stringify(object) 来序列化对象,但 JSON.stringify 办法除了了第一个参数外,还有其它参数可用,明天咱们一起来看看这些参数是做啥的,Let’s 开始。

1. 格式化

默认的 JSON.stringify(object) 进去数据是一行字符串,这看起来很丑,如下所示:

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也有一个内置的格式化器!

console.log(JSON.stringify(user, null, 2))

{
  "name": "小智", 
  "age": 30,      
  "isAdmin": true,
  "friends": [
    "隔壁老王",
    "小可爱"
  ],
  "address": {"city": "天上人间"}
}

(如果你想晓得这个 null 是什么,咱们当前再谈)。

在这个例子中,JSON 的格式化有 2 个空格的缩进。咱们还能够指定一个自定义字符,用于缩进。

console.log(JSON.stringify(user, null, '【二哈】'))

{【二哈】"name": "小智",【二哈】"age": 30,【二哈】"isAdmin": true,【二哈】"friends": [【二哈】【二哈】"隔壁老王",【二哈】【二哈】"小可爱"【二哈】],【二哈】"address": {【二哈】【二哈】"city": "天上人间"【二哈】}
}

2. 在序列化的数据中暗藏某些属性

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

举例一,如果,咱们想暗藏用户的明码字段,能够这么做:

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


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

输入:

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

咱们能够进一步重构:

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}

你也能够传递一个数组:

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

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

输入:

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

最酷的是这对数组也无效,假如有如下的数组:

const poetry = [
  {
    name: '小智',
    content: [
      '兴尽晚回舟,误入藕花深处。',
      '鬼畜,鬼畜,独身百年手速。',
      '终点太高,于是期待太多,奢求太过,所以永不满足。',
    ],
    tags: ['经典', '魔幻', '鬼才'],
  },
  {
    name: '王大志',
    content: [
      '小人无非就是有急躁的狼。',
      '信者, 无需誓言, 不信者, 誓言亦无助。'
    ],
    tags: ['经典', '魔幻', '鬼才'],
  },
]

因为诗太过漂亮,我想闻名,最初输入就想打出输入对于名字的字段,那么也能够应用 JSON.stringify 来做:

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

输入:

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

丑陋!

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,它是 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 = /^\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 暗藏数据

stringify 一样,parse 也能够用来暗藏数据。它们工作形式是一样的:

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

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

输入:

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

如果你晓得任何其余很酷的 JSON 技巧,请通知我 👀!

完,我是刷碗智,新的一年,咱们一起刷刷刷。


原文:https://dev.to/siddharhshynib…

编辑中可能存在的 bug 没法实时晓得,预先为了解决这些 bug, 花了大量的工夫进行 log 调试,这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

交换

有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。

退出移动版