javascript中你不知道的5个json-使用技巧(代码片段)

JackieDYH JackieDYH     2023-03-09     375

关键词:

开发中,经常使用 JSON.stringify(object) 来序列化对象,但除了第一个参数外,还有其它参数可用...

格式化

//默认的 JSON.stringify(object) 出来数据是一行字符串
const user = 
  name: 'JackieDYH',
  age: 30,
  isAdmin: true,
  friends: ['小可爱', '小可爱2'],
  address: 
    city: '天上人间',
  ,


console.log(JSON.stringify(user))
打印:"name":"JackieDYH","age":30,"isAdmin":true,"friends":["小可爱","小可爱2"],"address":"city":"天上人间"

//JSON.stringify也有一个内置的格式化器!
//JSON的格式化有2个空格的缩进。我们还可以指定一个自定义字符,用于缩进。
console.log(JSON.stringify(user,null,2))
打印: 
  "name": "JackieDYH",
  "age": 30,
  "isAdmin": true,
  "friends": [
    "小可爱",
    "小可爱2"
  ],
  "address": 
    "city": "天上人间"
  



console.log(JSON.stringify(user,null,'DYH'))
打印: 
DYH"name": "JackieDYH",
DYH"age": 30,
DYH"isAdmin": true,
DYH"friends": [
DYHDYH"小可爱",
DYHDYH"小可爱2"
DYH],
DYH"address": 
DYHDYH"city": "天上人间"
DYH

在序列化的数据中隐藏某些属性

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

//例一,假如,我们想隐藏用户的密码字段,可以这么做
const user = 
  name: 'JackieDYH',
  password: '12345',
  age: 30
;


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

打印:"name":"JackieDYH","age":30

//进一步重构
function  stripKeys (...keys) 
  return (key, value) => 
    if (keys.includes(key)) return 
    return value
  

const user = 
  name: 'JackieDYH',
  password: '12345',
  age: 30,
  gender: '未知'
;

console.log(JSON.stringify(user, stripKeys('password', 'gender')))
打印:"name":"JackieDYH","age":30

//也可以传递一个数组
const user = 
  name: 'JackieDYH',
  password: '12345',
  age: 30


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

打印: "name":"JackieDYH","age":30

//最酷的是这对数组也有效,假设有如下的数组
const poetry = [
  
    name: 'JackieDYH',
    content: [
      '兴尽晚回舟,误入藕花深处。',
      '鬼畜,鬼畜,单身百年手速。',
      '起点太高,于是期待太多,奢求太过,所以永不满足。',
    ],
    tags: ['经典', '魔幻', '鬼才'],
  ,
  
    name: 'JackieDYH2',
    content: [
      '君子无非就是有耐心的狼。',
      '信者,无需誓言,不信者,誓言亦无助。'
    ],
    tags: ['经典', '魔幻', '鬼才'],
  ,
]
console.log(JSON.stringify(poetry, ['name']))
打印: ["name":"JackieDYH","name":"JackieDYH2"]

使用 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)))
打印: "1/2"

恢复数据

继续上面的例子,如果我们想再次解析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 = /^\\d4-\\d2-\\d2T\\d2:\\d2:\\d2(\\.\\d1,|)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)

使用 revivers 隐藏数据

与stringify 一样,parse也可以用来隐藏数据。它们工作方式是一样的:

const user = JSON.stringify(
  name: 'JackieDYH',
  password: '12345',
  age: 30,
)

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

输出:

 name: 'JackieDYH', age: 30 

说说java中你不知道switch关键字的奥秘(代码片段)

Switch语法switch作为Java内置关键字,却在项目中真正使用的比较少。关于switch,还是有那么一些奥秘的。要什么switch,我有if-else确实,项目中使用switch比较少的一个主要原因就在于它的作用能被if-else代替,况且switch对类型的限制... 查看详情

javascript中你最应该知道的33个概念

你觉得自己对JavaScript了解多少?你可能知道如何编写函数,理解简单的算法,甚至可以编写类。但是你知道类型化数组是什么吗?你现在不需要知道所有这些概念,但你最终会在以后的职业生涯中需要它们。这就是为什... 查看详情

js中你不知道的一些概念知识(代码片段)

DOM元素e的e.getAttribute(propName)和e.propName有什么区别和联系e.getAttribute(),是标准DOM操作文档元素属性的方法,具有通用性可在任意文档上使用,返回元素在源文件中设置的属性e.propName通常是在HTML文档中访问特定元素的... 查看详情

「译」foreach循环中你不知道的3件事(代码片段)

前言本文925字,阅读大约需要7分钟。总括:forEach循环中你不知道的3件事。原文地址:3thingsyoudidn’tknowabouttheforEachloopinJS公众号:「前端进阶学习」,回复「666」,获取一揽子前端技术书籍自弃者扶不起,自强者击不倒。正文你... 查看详情

asp.netcore中间件应用实践中你不知道的那些事(代码片段)

一、概述这篇文章主要分享Endpoint终结点路由的中间件的应用场景及实践案例,不讲述其工作原理,如果需要了解工作原理的同学,可以点击查看以下两篇解读文章:Asp.NetCoreEndPoint终结点路由工作原理解读ASP.NETCORE管道模型及中... 查看详情

vue中你不知道但却很实用的黑科技(代码片段)

最近数月一直投身于iView的开源工作中,完成了大大小小30多个UI组件,在Vue组件化开发中积累了不少经验。其中也有很多带有技巧性和黑科技的组件,这些特性有的是Vue文档中提到但却容易被忽略的,有的更是没有写在文档里,... 查看详情

你不知道的json.stringify和json.parse

 json是JavaScript对象表示法(JavaScript Object Notation),是一种简单的数据格式,类似于XML,其格式为名称/值对,数据用逗号隔开,名称必须用双引号括起来。例如:{"name":"wumomo",age:25}关于需要注意的几点:1、名称必须用双... 查看详情

《你不知道的javascript》原型

1[[Prototype]][[Prototype]]是对其他对象的引用,几乎所有对象在创建时[[Prototype]]属性会被赋予非空值。varmyObject={a:2}myObject.a;//2 引用对象属性时会触发[[Get]]操作,它会检查对象本身是否有这个属性,如果有就使用它,但a不在myObj... 查看详情

php代码审计中你不知道的牛叉技术点

一、前言php代码审计如字面意思,对php源代码进行审查,理解代码的逻辑,发现其中的安全漏洞。如审计代码中是否存在sql注入,则检查代码中sql语句到数据库的传输和调用过程。入门php代码审计实际并无什么门槛要求,只需要... 查看详情

你不知道的高性能javascript

...,服务器端都可以看到JS的身影。本文会分享一些高效的JavaScript的最佳实践,提高大家对JS的底层和实现原理的理解。数据存储计算机学科中有一个经典问题是通过改变数据存储的位置来获得最佳的读写性能,在JavaScript中,数据... 查看详情

你不知道的javascript(上卷)

第一部分作用域和闭包第1章作用域是什么  1.1编译原理  1.2理解作用域    1.2.1演员表    1.2.2对话    1.2.3编译器有话说    1.2.4引擎和作用域的对话    1.2.5小测验  1.3作用域嵌套  1.4异常  1... 查看详情

《你不知道的javascript》系列分享专栏

《你不知道的JavaScript》系列分享专栏你不知道的JavaScript”系列就是要让不求甚解的JavaScript开发者迎难而上,深入语言内部,弄清楚JavaScript每一个零部件的用途《你不知道的JavaScript》已整理成PDF文档,点击可直接下载至本地查... 查看详情

《你不知道的javascript》整理——作用域提升与闭包

最近在读一本进阶的JavaScript的书《你不知道的JavaScript(上卷)》,里面分析了很多基础性的概念。可以更全面深入的理解JavaScript深层面的知识点。 一、函数作用域1)函数作用域就是作用域在一个“Function”里,属于... 查看详情

你不知道的javascript中,读书笔记

七种内置类型null,undefined,boolean,number,string,object,symboltypeofnull===‘object‘//truenull是typeof是object的唯一的假值typeoffunction会返回‘function‘使用typeofx!==‘undefined‘比直接判断x更加安全,因为不会引发referenceerror 查看详情

你不知道的javascript--item34大白话解说promise

去年6月份。ES2015正式公布(也就是ES6。ES6是它的乳名),当中Promise被列为正式规范。作为ES6中最重要的特性之中的一个,我们有必要掌握并理解透彻。本文将由浅到深,解说Promise的基本概念与使用方法。ES6Promise先拉出来遛遛... 查看详情

《你不知道的javascript[中卷]》14——asynquence附录

 《你不知道的JavaScript[中卷]》【14】——asynquence附录 查看详情

你不知道的javascript-作用域是什么

...函数时传入参数的操作都会导致关联作用域的赋值操作。JavaScript引擎首先会在代码执行前对其进行编译,在这个过程中,像vara=2这样的声明会被分解成两个独立的步骤:首先,vara在其作 查看详情

你不知道的javascript(中卷)笔记

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>你不知道的javascript(中卷)</title></head><body><scripttype="text/javascript">/*//封装对象包装vara=newBool 查看详情