【JS】JSON把我的function搞丢了怎么办?深入理解与灵活运用 JSON 序列化与反序列化

引言

在日常开发中,我们经常遇到需要将 JavaScript 对象转化为 JSON 字符串进行传输或者持久化存储的情况,这时 JSON.stringify()JSON.parse() 成为了我们的得力助手。然而,原生的 JSON 序列化并不能处理函数、日期、正则等非基础类型数据,这无疑给我们的工作带来了一定挑战。本文将探讨如何自定义序列化与反序列化方法以保留这些信息,并顺带提及在特定场景下,简单地使用解构赋值也能满足对象拷贝的需求。

函数类型的序列化与反序列化

原生 JSON 序列化会忽略对象中的函数成员。若要保留函数,我们可以创建自定义的序列化和反序列化函数。以下是一个简单的实现示例:

function customSerialize(obj) {let copy = {...obj}; // 创建浅拷贝if (typeof obj === 'function') {copy._fnBody = obj.toString();}return copy;
}function customDeserialize(jsonObj) {if ('_fnBody' in jsonObj) {jsonObj._fn = new Function(jsonObj._fnBody);delete jsonObj._fnBody;}return jsonObj;
}

在这个例子中,我们将函数体转为字符串存储,并在反序列化时利用 new Function() 来重建函数。不过需要注意的是,动态创建函数存在一定的安全隐患,尤其在严格的安全策略环境中可能无法使用。

Date 和 RegExp 类型的序列化与反序列化

对于 Date 和 RegExp 类型,同样可以通过定制化的方法来进行序列化与反序列化:

function customSerialize(obj) {let copy = {...obj};if (obj instanceof Date) {copy._date = obj.toISOString();} else if (obj instanceof RegExp) {copy._regex = [obj.source, obj.flags];}return copy;
}function customDeserialize(jsonObj) {if ('_date' in jsonObj) {jsonObj._date = new Date(jsonObj._date);} else if ('_regex' in jsonObj) {jsonObj._regex = new RegExp(jsonObj._regex[0], jsonObj._regex[1]);}return jsonObj;
}

这里我们分别利用 toISOString() 方法将 Date 对象转为 ISO 格式字符串,将正则表达式的 sourceflags 存储下来以便重构。

对象拷贝场景下的解构赋值

当我们的目标仅仅是复制对象而不涉及 JSON 序列化时,可以巧妙地使用 ES6 中的解构赋值语法实现深拷贝:

let originalObj = { a: 1, b: function() { console.log('hello'); }, c: new Date() };
let copiedObj = {...originalObj};// 对于函数和 Date 类型,它们也会被正确复制
copiedObj.b(); // 输出 "hello"
console.log(copiedObj.c instanceof Date); // true

需要注意的是,解构赋值只能实现一层深度的浅拷贝,对于嵌套对象,需要递归或者其他深拷贝方法才能完整复制所有层级。

总结起来,虽然原生 JSON 序列化不支持函数、日期、正则等类型,但通过自定义序列化与反序列化方法,我们可以扩展这一能力。而在单纯的对象拷贝场景中,利用解构赋值不失为一种简洁高效的选择。在实际开发中,应根据具体需求选择最合适的方案。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/826083.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ARM Cortex-M处理器中的SysTick定时器简介

ARM Cortex-M处理器中的SysTick是一个内部的系统定时器,它提供了一种简单而有效的方式来生成定时的中断请求。SysTick定时器是一个24位的下计数定时器,它可以配置为周期性地产生中断,这些中断可以用于操作系统的任务调度、性能测量、时间延迟…

String类比较方法全览:深入解析equals、compareTo与regionMatches

1. 概述 String类的比较方法主要用于判断两个字符串是否相等,或者比较它们的字典顺序。这些方法在编程中十分常见,特别是在处理文本数据、比较用户输入、排序字符串列表等场景中。 2. 用途 String类的比较方法的主要用途包括: 判断两个字符…

【算法】合并两个有序链表

本题来源---《合并两个有序链表》 题目描述 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1: 输入:l1 [1,2,4], l2 [1,3,4] 输出:[1,1,2,3,4,4] /*** Definition for singl…

C++ - STL详解—vector类

一. vector的概念 向量(Vector)是一个封装了动态大小数组的顺序容器(Sequence Container)。跟任意其它类型容器一样,它能够存放各种类型的对象。可以简单的认为,向量是一个能够存放任意类型的动态数组。 …

win/mac达芬奇19下载:DaVinci Resolve Studio 19

DaVinci Resolve Studio 19 是一款功能强大的视频编辑和调色软件,广泛应用于电影、电视和网络节目的后期制作。这款软件不仅提供了专业的剪辑、调色和音频处理工具,还引入了全新的DaVinci Neural Engine AI工具,对100多项功能进行了大规模升级…

Vue3(五):组件通信详解(九种方法)

主要有九种方法,以下是详细解释及使用方法: 1.props props实现父子间的通信,是使用频率最高的。 (1)父传子:属性值是非函数。 以Father.vue和Child.vue 为例。 父组件中,引入子组件并给子组…

34、链表-合并K个升序链表

思路 1、直接全部放入集合中,然后排序,在进行构造节点返回 2、使用归并排序的方式,两两排序合并,最后合并大的。 3、第三中思路就比较巧妙了,可以使用小根堆,每次弹出堆顶,最小值&#xff0c…

【计算机网络】http协议的原理与应用,https是如何保证安全传输的

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,…

基于 RT-Thread 的 CMUX 串口多路复用的详细使用

一、CMUX 软件包的介绍 CMUX(Connection Multiplexing ),即连接(串口)多路复用,其功能主要在一个真实的物理通道上虚拟多个通道,每个虚拟通道上的连接和数据通讯可独立进行。  CMUX 软件包常用…

DRF ModelSerializer序列化类

ModelSerializer序列化类 【0】准备 模型表创建 from django.db import modelsclass Book(models.Model):name models.CharField(max_length64, verbose_name书名)price models.DecimalField(max_digits6, decimal_places2, verbose_name价格)publish models.ForeignKey(…

【C++打怪之路】-- C++开篇

🌈 个人主页:白子寰 🔥 分类专栏:C打怪之路,python从入门到精通,魔法指针,进阶C,C语言,C语言题集,C语言实现游戏👈 希望得到您的订阅和支持~ &…

三元运算符可选链操作符

三元运算符 &#xff08; ?: &#xff09;又叫条件运算符&#xff0c;接受三个运算数&#xff1a;条件 ? 条件为真时要执行的表达式 : 条件为假时要执行的表达式 <script>var a truevar b false// 单个条件a ? console.log(1) : console.log(2); // 1// 多个条件…

【SpringBoot】Spring Boot 项目中整合 MyBatis 和 PageHelper

目录 前言 步骤 1: 添加依赖 步骤 2: 配置数据源和 MyBatis 步骤 3: 配置 PageHelper 步骤 4: 使用 PageHelper 进行分页查询 总结 前言 Spring Boot 与 MyBatis 的整合是 Java 开发中常见的需求&#xff0c;特别是在使用分页插件如 PageHelper 时。Page…

vue-cli2 与vue-cli3,vue2与vue3 初始化项目,本地vue项目,详细解析区别(2024-04-19)

目录 1、区别&#xff08;vue-cli2 与 vue-cli3 &#xff09; 2、例子1&#xff08;vue2项目&#xff09; 2.1 版本与命令行 2.2 项目本地截图 2.3 项目文件解析 &#xff08;1&#xff09;package.json 文件 &#xff08;2&#xff09;webpack.dev.conf.js文件 &#…

[大模型]Qwen-7B-hat Transformers 部署调用

Qwen-7B-hat Transformers 部署调用 环境准备 在autodl平台中租一个3090等24G显存的显卡机器&#xff0c;如下图所示镜像选择PyTorch–>2.0.0–>3.8(ubuntu20.04)–>11.8 接下来打开刚刚租用服务器的JupyterLab&#xff0c;并且打开其中的终端开始环境配置、模型下…

【JavaScript】异步函数(async和await详解)

异步函数 ES8 的 async/await 旨在解决利用异步结构组织代码的问题。为此&#xff0c;ECMAScript 对函数进行了扩展&#xff0c;为其增加了两个新关键字&#xff1a;async 和 await。 1. async async 关键字用于声明异步函数。这个关键字可以用在函数声明、函数表达式、箭头…

NLP自然语言处理_序章

开一个新篇章&#xff0c;立一个flag&#xff0c;用一段时间来学习一下NLP&#xff0c;涨涨见识。 准备以B站 机器学习算法到transformer神经网络模型应用视频作为入门&#xff0c;此分类专门用于记录学习过程中的知识点以备自用。 一、何为NLP自然语言处理&#xff1f; NLP…

查看linux的主机配置脚本

废话不说 直接上指令 curl -Lso- bench.sh | bash 等待后&#xff0c;结果如图&#xff1a; 使用后没有问题&#xff0c;看情况使用 出事概不负责 介意勿用&#xff01;&#xff01;&#xff01;

esxi配置虚拟机定时开机

有个测试机器希望每晚关机&#xff0c;第2天早8点自动开机&#xff0c;linux系统中配置了定时关机任务。开机任务在esxi上配置如下 [rootlocalhost:~] cat /var/spool/cron/crontabs/root #min hour day mon dow command 1 1 * * * /sbin/tmpwatch.py 1 * *…