当前位置: 首页 > news >正文

JavaScript深浅拷贝的几种方式

文章目录

  • 前言
  • 深拷贝
      • 1. JSON.parse(JSON.strigify(Str))
      • 2. lodash.deepclone
      • 3. structuredClone
  • 浅拷贝
  • 总结


前言

深浅拷贝主要是针对于引用类型而言的

深拷贝

1. JSON.parse(JSON.strigify(Str))

   序列化的作用是存储(对象本身存储的只是一个地址映射,如果断电,对象将不复存在,因此需将对象的内容转换成字符串的形式再保存在磁盘上 ).传输(例如 如果请求的Content-Type 是 application/x-www-form-urlencoded,则前端这边需要使用qs.stringify(data)来序列化参数再传给后端,否则后端接受不到;

JSON.stringify()
该方法用于将一个字转换为JSON字符串,该字符串符合JSON格式,并且可以被JSON.parse()方法还原。

  • 对于原始类型的字符串,转换结果会带双引号
  • 如果要转换的对象的属性是undefined,函数或xml对象,该属性会被JSON.stringify()过滤
  • 如果要转换的数组中有undefined和函数,他们都会转换为null
  • 正则对象会被转换成空对象
  • 会忽略对象的不可遍历的属性
  • JSON.stringify()方法还可以接受一个数组,作为第二个参数,指定参数对象的哪些属性需要转成字符串,第二个参数还可以是一个函数,用来更改JSON.stringify()的返回值。
  • JSON.stringify()还可以接受第三个参数,用于增加返回的 JSON 字符串的可读性。比如加入‘\t’
  • 如果参数对象有自定义的toJSON()方法,那么JSON.stringify()会使用这个方法的返回值作为参数,而忽略原对象的其他属性。

JSON.parse()

  • JSON.parse()方法用于将 JSON 字符串转换成对应的值。
  • 如果传入的字符串不是有效的 JSON 格式,JSON.parse()方法将报错。
  • JSON.parse()方法可以接受一个处理函数,作为第二个参数,用法与JSON.stringify()方法类似

2. lodash.deepclone

3. structuredClone

const original = { name: "MDN" };
original.itself = original;// Clone it
const clone = structuredClone(original);

浅拷贝

let arr = [{name:'bruce'},1,2,3]let newArr = arr.slice()
// 由于数组内部属性值为引用对象,因此使用slice和concat对对象数组的拷贝,整个拷贝还是浅拷贝,
// 拷贝之后数组各个值的指针还是指向相同的存储地址。let newArr2 = [...arr]Object.assign()

总结

以上就是今天的内容了,JavaScript深浅拷贝的几种方式

相关文章:

JavaScript深浅拷贝的几种方式

文章目录 前言深拷贝1. JSON.parse(JSON.strigify(Str))2. lodash.deepclone3. structuredClone 浅拷贝总结 前言 深浅拷贝主要是针对于引用类型而言的 深拷贝 1. JSON.parse(JSON.strigify(Str)) 序列化的作用是存储(对象本身存储的只是一个地址映射,如果断电&a…...

VBA窗体跟随活动单元格【简易版】(2/2)

上一篇博客(文章连接如下)中使用工作表事件Worksheet_SelectionChange实现了窗体跟随活动单元格的动态效果。 VBA窗体跟随活动单元格【简易版】(1/2) 为了在用户滚动工作表窗体之后仍能够实现跟随效果,需要使用Application.Windows(1).Visibl…...

个性化定制的知识付费小程序,为用户提供个性化的知识服务

明理信息科技知识付费saas租户平台 随着知识经济的兴起,越来越多的人开始重视知识付费,并希望通过打造自己的知识付费平台来实现自己的知识变现。本文将介绍如何打造自己的知识付费平台,并从定位、内容制作、渠道推广、运营维护四个方面进行…...

【轮式平衡机器人】——软硬件配置/准备

本系列以轮式平衡移动机器人为例,将使用基于模型设计(MBD)方法进行介绍,涉及基础硬件、软件、控制算法等多方面内容,结合MATLAB/Simulink的强大仿真能力和代码生成能力辅助设计!在此过程中可以系统了解开发…...

中国联通助力吴江元荡生态岸线打造5G+自动驾驶生态长廊

吴江,素有“鱼米之乡”“丝绸之府”的美誉,其地理位置优越,地处太湖之滨。近年来,随着长三角生态绿色一体化发展示范区(以下简称“示范区”)的建立,元荡更是声名大噪,成为众多游客心…...

小白准备蓝桥杯之旅(c/c++b组)

前言:省赛获奖比例高达百分之60,只要比一半的人努力,你就能大概率获奖。 寒假做的3件事 1.稳基础 熟练掌握基础语法部分,c比c多个stl库优势,c语言的同学需要会实现c中stl库部分 2.刷真题 大概比赛前30天,坚持每天做…...

Flutter GetX 之 国际化

今天给大家介绍一下 GetX 的国际化功能,在日常开发过程中,我们经常会使用到国际化功能,需要们的应用支持 国际化,例如我们需要支持 简体、繁体、英文等等。 上几篇文章介绍了GetX的 路由管理 和 状态管理,看到大家的点赞和收藏,还是很开心的,说明这两篇文章给大家起到了…...

349. 两个数组的交集(力扣)(OJ题)

题目链接:349. 两个数组的交集 - 力扣(LeetCode) 个人博客主页:https://blog.csdn.net/2301_79293429?typeblog 专栏:https://blog.csdn.net/2301_79293429/category_12545690.html 给定两个数组 nums1 和 nums2 &a…...

安全帽识别-赋能深圳自贸中心智慧工地

在当今的建筑行业中,安全管理一直是一个至关重要的议题。深圳自贸中心项目在这方面进行了一次有益的尝试——实施智慧工地安全帽识别系统。本文将对这一创新举措进行简要介绍。 项目背景 深圳自贸中心,作为一项标志性建设项目,承载着城市发展…...

代码之外:工程师的成长进阶秘籍

程序员只懂技术能行吗? 为什么说技术人员“说”和“写”总得擅长一个? 你以为的“关注结果”是真的结果吗? 从一线工程师跃升团队管理者一共分几步? 在不断变化的职场环境中,技术人如何保持竞争力并实现自我增值&a…...

openssl3.2 - 官方demo学习 - smime - smsign2.c

文章目录 openssl3.2 - 官方demo学习 - smime - smsign2.c概述笔记END openssl3.2 - 官方demo学习 - smime - smsign2.c 概述 PKCS7联合签名 从N张证书中, 分别得到N对(x509和私钥) 对明文进行签名(只是指定了bio_in和flag), 得到pkcs7* 对此pkcs7进行附加签名者的操作(指定证…...

6.C++对象模型

一.成员变量和成员函数分开存储&#xff1a; 在C中&#xff0c;类的成员变量和成员函数分开存储&#xff0c;只有非静态成员变量在属于类的对象上。 1.空对象的所占内存大小&#xff1a; //成员变量和成员函数分开存储 class Person {};void test() {Person p;cout << &…...

AbstractHttpMessageConverter + easyexcell优雅下载附件

介绍 AbstractHttpMessageConverter 是 Spring 框架中用于处理 HTTP 消息转换的抽象基类。它用于处理来自 HTTP 请求的消息,并将其转换为特定的 Java 对象,或者将 Java 对象转换为 HTTP 响应消息。 这个抽象类允许开发人员创建自定义的 HTTP 消息转换器,以便在 Spring MVC…...

虚拟线程探索与实践

优质博文&#xff1a;IT-BLOG-CN 一、简介 虚拟线程是轻量级线程&#xff0c;极大地减少了编写、维护和观察高吞吐量并发应用的工作量。虚拟线程是由JEP 425提出的预览功能&#xff0c;并在JDK 19中发布&#xff0c;JDK 21中最终确定虚拟线程&#xff0c;以下是根据开发者反馈…...

openssl3.2 - 官方demo学习 - mac - poly1305.c

文章目录 openssl3.2 - 官方demo学习 - mac - poly1305.c概述笔记END openssl3.2 - 官方demo学习 - mac - poly1305.c 概述 MAC算法为Poly1305, 加密算法为AES-128-ECB, 用key初始化加密算法 加密算法进行padding填充 对加密算法的key加密, 放入MAC_key后16字节, 将MAC_key的…...

【Python 千题 —— 基础篇】不吉利的数字

题目描述 题目描述 在西方,“13”被称为不吉利的数字,这是因为耶稣与13个弟子共进晚餐时耶稣的第13个弟子出卖了耶稣,且耶稣受难的日期是13日。所以西方的门牌号会跳过13号,假设这栋楼有16户,请为这栋楼的每一户设立门牌号。 输入描述 无 输出描述 依次输出这栋楼每…...

3d模型未响应打不开怎么办---模大狮模型网

在进行3D建模和设计工作时&#xff0c;有时可能会遇到3D模型无法打开的情况&#xff0c;这给工作流程带来了困扰。本文将为您介绍一些常见的原因以及解决3D模型未响应无法打开问题的方法。 一、文件格式检查 首先&#xff0c;确保您使用的文件格式与所使用的软件兼容。不同的3…...

Java-NIO 开篇(1)

NIO简介 高性能的Java通信&#xff0c;离不开Java NIO组件&#xff0c;现在主流的技术框架或中间件服务器&#xff0c;都使用了Java NIO组件&#xff0c;譬如Tomcat、 Jetty、 Netty、Redis、RabbitMQ等的网络通信模块。在1.4版本之前&#xff0c; Java IO类库是阻塞式IO&…...

VSCode 插件推荐

前言 关于开发用的插件就不做赘述了&#xff0c;网上面有很多文章都做了推荐&#xff0c;本文推荐几个好看的插件。 文件图标主题 Vscode icons Material Icon Theme 字体主题 推荐 One Dark Pro 其他 推荐一个生成好看代码的网址 https://carbon.now.sh/...

摄像部分时序

&#xff08;1&#xff09;.,后摄像。 &#xff08;2&#xff09;.,前摄像。 RCAM_TO_LEDDRV_STROBE_EN_CONN表面意思是:后置摄像头到led驱动闪光灯_使能。从时序图中看起来是连接到U17的&#xff0c;发现果然如此。 闪光灯温度检测&#xff0c;是检测闪光灯的温度。所以时序图…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...