首页 > 资讯 > 前端开发 > JavaScript >关于JavaScript中JSON的5个小技巧分享

827

分享到

关于JavaScript中JSON的5个小技巧分享

2024-04-02 19:04:59 827人浏览薄情痞子

摘要

目录1.格式化2.隐藏字符串化数据中的某些属性3.使用toJSON创建自定义输出格式4.恢复数据5.使用revivers隐藏数据1. 格式化默认的字符串化器还会缩小 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 }

如果你还知道任何其他很酷的JSON技巧，请畅言。

到此这篇关于关于javascript中JSON的5个小技巧分享的文章就介绍到这了,更多相关JavaScript JSON技巧内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 关于JavaScript中JSON的5个小技巧分享

本文链接: https://www.lsjlt.com/news/141640.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

关于JavaScript中JSON的5个小技巧分享

目录1.格式化2.隐藏字符串化数据中的某些属性3.使用toJSON创建自定义输出格式4.恢复数据5.使用revivers隐藏数据1. 格式化默认的字符串化器还会缩小 JSON，看起...

99+

2024-04-02
分享5个JavaScript的写法小技巧

目录前言过滤空值数组对象解构分隔数字箭头函数直接返回对象await 链条总结前言 JavaScript 易上手，但是难以全面掌握；它有许多“怪癖”，只有在长时...

99+

2024-04-02
几个关于pythonPdf技巧的分享

目录1.读取PDF2.删除pdf的某些页3.旋转页面4.合并pdf前言： PyPDF2是一个纯Python的开源库，能够分割或合并PDF文件，也可以裁剪或转换PDF文件中的页面。我们...

99+

2024-04-02
分享11个常用JavaScript小技巧

目录1.通过条件判断向对象添加属性2.检查对象中是否存在某个属性3.解构赋值4.循环遍历一个对象的key和value5.使用可选链(Optionalchaining)避免访问对象属性...

99+

2024-04-02
5个实用的Pandas技巧分享

本篇内容主要讲解“5个实用的Pandas技巧分享”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“5个实用的Pandas技巧分享”吧!目录Pandas技巧1&...

99+

2024-04-02
关于TypeScript开发的6六个实用小技巧分享

目录1. 开发之前确定实体类型 2. 请求接口时只需要定义自己需要用到的字段 3. 使用枚举类型 4. DOM元素的类型要正常给 5.对象的类型要怎么给 6.结构赋值时类型怎么给总...

99+

2024-04-02
分享Python 的十个小技巧

　　一. 列表、字典、集合、元组的使用　　from random import randint, sample　　# 列表解析　　data = [randint(-10, 10) for _ in xrange(10)]　　filter(l...

99+

2023-01-31

小技巧 Python
分享JPA的几个小技巧

目录1. 基本字段介绍2. 自定义ID生成器3. 自动填充字段4. End关系型数据库其实很讨人厌，尤其是在你使用数据库驱动的开发模式时。需要首先把表给创建好了，然后再使用代码生成器...

99+

2024-04-02
关于Python中进度条的六个实用技巧分享

目录1 简介2 tqdm中实用的6个特性2.1 autonotebook自动切换进度条风格2.2 延迟渲染进度条2.3 自定义进度条色彩2.4 自主控制的进度上限2.5 针对enum...

99+

2024-04-02
7个Python中的隐藏小技巧分享

目录前言1、功能属性2、不完整代码的占位符3、 eval() 函数4、在 Python 解析器中使用以下命令启动文件托管服务器5、无限参数6、Zip() 方法7、旋转列表前言 Pyt...

99+

2023-03-20

Python隐藏技巧分享 Python隐藏技巧 Python技巧
8个JavaScript条件语句优化小技巧分享

目录1、Array.includes2、Array.every3、尽早 return4、三元运算符5、switch...case6、Map/Object7、默认函数参数和解构8、逻辑...

99+

2024-04-02
Vue中$once的两个实用小技巧分享

目录前言清除定时器$once/$emit + async/await 实现 Dialog 同步执行总结前言在 Vue 中有很多 API 都有很实用的地方，只是需要挖掘适用的场景，这...

99+

2024-04-02
5个实用的PHP参数隐藏技巧分享

5个实用的PHP参数隐藏技巧分享 PHP是一种广泛应用于Web开发的脚本语言，常见的应用包括网站后端开发、数据处理等。在进行PHP编程时，对参数的隐藏和保护是非常重要的。本文将分享5个...

99+

2024-03-09

安全编码隐藏敏感数据参数加密敏感数据
分享Python中四个不常见的小技巧

目录1. 引言2. 获取 n 个最大数字3. 获取 n 个最小数字4. 删除字符串的特定部分5. 从列表中删除重复元素6. 总结1. 引言在编程界，每个人都希望自己可以写出世界上最...

99+

2024-04-02
常用的29个CSS小技巧分享

本篇内容主要讲解“常用的29个CSS小技巧分享”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“常用的29个CSS小技巧分享”吧!1.清除图片下方出现几像素的空白间...

99+

2024-04-02
分享常用的3个C++小技巧

目录1、头文件是引用<iostream.h>还是<iostream>？2、逗号分割表达式3、在main函数之前运行代码1、头文件是引用<iostream...

99+

2024-04-02
Python语言的10个小技巧分享

这篇文章主要讲解了“Python语言的10个小技巧分享”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Python语言的10个小技巧分享”吧！10个Python小技巧1. 用ZIP处理列表假设...

99+

2023-06-16
提高Python代码可读性的5个技巧分享

目录1. Comments2. Explicit Typing3. Docstrings (Documentation Strings)4. Readable Variable Na...

99+

2024-04-02
分享7个杀手级JS小技巧

目录一、数组乱序二、复制到剪贴板三、数组去重四、检测黑暗模式五、滚动到顶部六、滚动到底部七、生成随机颜色一、数组乱序在使用需要某种程度的随机化的算法时，你会经常发现洗牌数组是一个相...

99+

2024-04-02
分享5个Java接口性能提升的通用技巧

目录前言1. 并发调用2. 避免大事务3. 添加合适的索引4. 返回更少的数据5. 使用缓存前言作为后端开发人员，我们总是在编写各种API，无论是为前端web提供数据支持的HTTP...

99+

2023-01-03

Java接口性能提升技巧 Java接口性能提升 Java接口性能