分享 5 个 JSON 相关的常用小技巧
关于 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 }
译者:JenK
译文:https://segmentfault.com/a/1190000041488147
原文:https://dev.to/siddharthshyniben/5-secret-features-of-json-you-didnt-know-about-5bbg
- EOF -
分享 5 个 JSON 相关的常用小技巧相关推荐
- Python常用小技巧(五)——批量读取json文件
Python常用小技巧(五)--批量读取json文件 前言:其实Python能够批量读取很多文件,这里,本人以json文件为例(json是标注图片时生成的文件,记录有标注的坐标和标签,友情推荐标注图片 ...
- pythonencoding etf-8_etf iopv python 代码30个Python常用小技巧
1.原地交换两个数字x, y =10, 20 print(x, y) y, x = x, y print(x, y) 10 20 20 10 2.链状比较操作符n = 10 print(1 print ...
- 5个Excel常用小技巧,分分钟提升工作效率
点赞再看,养成习惯:十年之计,莫如树木. 微信搜索[亦心Excel]关注这个不一样的自媒体人. 本文 GitHub https://github.com/hugogoos/Excel 已收录,包含Ex ...
- 网页代码常用小技巧!(2)
网页代码常用小技巧!(2) [转] 41.变换网页的鼠标光标 〈BODY style=CURSOR: url(http://203.73.125.205/~liangmi2/farmfrog01.cu ...
- python常用小技巧(一)——百度图片批量爬取
python常用小技巧(一)--百度图片无限制批量爬取 前言:我们在日常使用(搜壁纸,搜美女--)或者科研项目(图像识别)中经常要批量获取某种类型的图片,然而很多时候我们都需要一个个点击下载,有什么办 ...
- [转]40种网页常用小技巧----Ajax中国
1. οncοntextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <table border οncοntextmenu ...
- 55种网页常用小技巧(javascript) (转)
55种网页常用小技巧(javascript) 1. οncοntextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <tab ...
- 55种网页常用小技巧(转载)
55种网页常用小技巧 乖的无聊 发表于 2005-4-18 13:18:09 1. οncοntextmenu="window.event.returnValue=false" ...
- python常用小技巧(四)——批量图片改名
python常用小技巧(四)--批量图片改名 前言:在日常使用中我们需要批量修改图片名字,使用Python的话就可以很快地完成这个目标 一.材料准备 - os 二.程序编写 # -*- coding: ...
最新文章
- python中国大学排名爬虫写明详细步骤-python网络爬虫入门实例:中国大学排名定向爬虫...
- 字符串转换成ascii码
- c语言memcmp和java的_C语言memcmp()函数:比较m字节长的两个字符串s1和s2
- mysql以下运算符的优先级顺序正确的是_MySQL 运算符
- Linux—Ubuntu14.0.5配置JAVA环境
- mysql yum安装与配置文件_MySQL 8.0 yum安装和配置
- Axis2创建WebService实例
- 首次出现日访问量突破10000,祝贺
- 社区发现算法 | Louvain 算法 中的分辨率参数
- 别总写代码,这120多个网站比涨工资都重要
- vue对table的某一行的数据进行编辑,删除,查看详情操作
- hello world (android studio DNK )
- hdoj2154跳舞毯
- 3dsmax展uv_3dsmax展uv是啥玩意
- QLV转MP4格式转换器在线免费的方法有哪些
- 【总结-学习-提升】web应用为什么需要tomcat容器
- CS231n-课程总结
- 惠普暗影精灵4笔记本如何U盘重装系统教学
- MODBUS通讯详解(博客园)
- python自己做电子词典_利用PyQt5制作电子词典
热门文章
- HBase2.x(五)HBase API DDL的操作
- 2015年天勤考研机试模拟赛 A 判断三角形
- Linux read only 檔案,動手玩Windows 10 Docker(4) - 有關Docker的儲存空間和檔案系統
- 苹果手机signin_iPhone手机弹出sign in to itunes store怎么办[图]
- 全球及中国火管锅炉行业消费规模及十四五竞争战略研究报告2022-2027年
- 读 Steve Marschner 之 Fundamentals of Computer Graphics
- CentOS7.6 安装Telnet服务
- 网络宽带知识普及-带宽
- Android电量优化
- mysql安装教程(本人亲自测过能用)