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

js深拷贝和浅拷贝

👉十分钟学会 前端面试题 js 深拷贝与浅拷贝_前端深拷贝和浅拷贝面试题_Mar-30的博客-CSDN博客

目录

背景:

概念:核心是创建新地址

方法:

浅拷贝:

Object.assign() 方法:Object.assign(拷贝的对象,原始对象)

... 展开运算符方法:{...原始对象}

浅拷贝的局限性(bug): 

深拷贝:

通过递归实现深拷贝:

注意:在递归函数内部调用fn前加上return

JSON.stringify()   JSON.parse()方法(工作使用):

这种方法的缺陷:函数方法和undefined会丢失

lodash:


背景:

        开发中我们经常需要复制一个对象。如果直接用赋值会有问题:将对象p1赋值给p2,改变p2里面属性的值,p1里面对应的值也会被改变。改变原因:因为赋值的时候,是直接拷贝对象栈里面的地址,p1和p2的地址相同,所以修改会将两个一起改变。(p1和p2可以看下面代码)

概念:核心是创建新地址

浅拷贝: 将一个对象的所有属性拷贝到另一个对象  (并且改变拷贝的对象, 不影响原始对象);浅拷贝只能拷贝一层对象,或者一层数组

深拷贝: 将一个对象的所有属性拷贝到另一个对象  (并且改变拷贝的对象, 也不影响含多层对象的原始对象); 

方法:

浅拷贝:

Object.assign() 方法:Object.assign(拷贝的对象,原始对象)

<script>// 创建一个p1对象const p1 = {name: '小白',age: 18}const p2 = {}Object.assign(p2, p1)console.log(p2); //{ name: '小白',age: 18}p2.name = '小黑'console.log(p2); //{name: '小黑', age: 18}console.log(p1); //{ name: '小白',age: 18}</script>

... 展开运算符方法:{...原始对象}

 <script>// 创建一个p1对象const p1 = {name: '小白',age: 18}const p2 = {...p1}console.log(p2); //{ name: '小白',age: 18}p2.name = '小黑'console.log(p2); //{name: '小黑', age: 18}console.log(p1); //{ name: '小白',age: 18}</script>

浅拷贝的局限性(bug): 

浅拷贝的问题: 当原始对象里面的属性值是复杂数据类型的时候, 浅拷贝就会有bug,浅拷贝没有对这个值创建新地址。简单来说就是浅拷贝: 只能拷贝一层对象,或者一层数组

bug的来源就是:如果原始对象有嵌套对象的时候,那么他还是采用等号赋值, 地址依然一样,在堆里面值只有一份

点开第一个p2的打印,所指向的内存地址已经发生了变化,进而数组项数据也发生了变化。 

数组的变异方法会直接改变数组的内存地址,就是改变原数组,由于数组是引用数据类型(复杂数据类型),内存地址是一样的,显示的是原来的结果。但包含修改后的结果.(浅拷贝,拷贝栈里面的指针)。👉js之数组打印看到长度和实际长度不同(浅拷贝)_js 数组添加线上的 4 结果只有2_六卿的博客-CSDN博客

深拷贝:

通过递归实现深拷贝:

        函数递归: 如果一个函数在内部可以调用其本身,那么这个函数就是递归函数。简单理解:函数内部自己调用自己, 这个函数就是递归函数。递归函数的作用和循环效果类似,由于递归很容易发生“栈溢出”错误(stack overflow),所以必须要加退出条件 return

递归实现深拷贝:代码如下

注意:在递归函数内部调用fn前加上return

原因:在递归函数内部调用fn时没有return,也就没有值返回给最外层的函数

👉JS递归函数return返回undefined_js递归返回undefined_醒醒快学习的博客-CSDN博客 

JSON.stringify()   JSON.parse()方法(工作使用):

1、JSON.stringify() 将对象转换为字符串;2、JSON.parse() 转换为复杂数据类型

为什么可以这样写:因为关键就是创建新地址,字符串是普通数据类型,地址在栈里面;JSON.stringify()转换成字符串就是一个新地址  。

这种方法的缺陷:函数方法和undefined会丢失

lodash:

  利用js库 lodash里面的  _.cloneDeep()

  lodash工具库:https://www.lodashjs.com/  

 <script src="./lodash.min.js"></script><script>// 1.创建初始对象const p1 = {name: '小白',age: 18,address: {province: '北京',citys: '东城区'}}// 转换const p2 = _.cloneDeep(p1) //深拷贝console.log(p2); //{ name: '小白',age: 18,address: {province: '上海', citys: '东城区'}}// 3.改变拷贝对象里面的 多层对象的值,原始的对象里面的值就不会被改变了p2.address.province = '上海'console.log(p2); //{ name: '小白',age: 18,address: {province: '上海', citys: '东城区'}}console.log(p1); //{ name: '小白',age: 18,address: {province: '北京', citys: '东城区'}}</script>

相关文章:

js深拷贝和浅拷贝

&#x1f449;十分钟学会 前端面试题 js 深拷贝与浅拷贝_前端深拷贝和浅拷贝面试题_Mar-30的博客-CSDN博客 目录 背景&#xff1a; 概念&#xff1a;核心是创建新地址 方法&#xff1a; 浅拷贝&#xff1a; Object.assign() 方法&#xff1a;Object.assign(拷贝的对象&am…...

CANopenNode Master 配置

文章目录 CANopenNode 简介CANopenNode 主栈SDO ClientPDO 通讯参数RPDO 通讯参数RPDO 通信参数设置实例TPDO 通讯参数TPDO 通信参数设置实例 PDO 映射参数RPDO 映射参数设置实例TPDO 映射参数设置实例 CANopenNode 简介 CANopenNode 是一个开源的免费的开源 CANopen 协议栈。…...

HW之轻量级内网资产探测漏洞扫描工具

简介 RGPScan是一款支持弱口令爆破的内网资产探测漏洞扫描工具&#xff0c;集成了Xray与Nuclei的Poc 工具定位 内网资产探测、通用漏洞扫描、弱口令爆破、端口转发、内网穿透、SOCK5 主机[IP&域名]存活检测&#xff0c;支持PING/ICMP模式 端口[IP&域名]服务扫描 网…...

算法练习-2:送外卖

n 个小区排成一列&#xff0c;编号为从 0 到 n-1 。一开始&#xff0c;美团外卖员在第0号小区&#xff0c;目标为位于第 n-1 个小区的配送站。 给定两个整数数列 a[0]~a[n-1] 和 b[0]~b[n-1] &#xff0c;在每个小区 i 里你有两种选择&#xff1a; 1) 选择a&#xff1a;向前 a[…...

八股总结(六):Android基础:四大组件与UI控件

文章目录 Activity一个APP的启动过程基本概念总图zygote是什么&#xff1f;有什么作用&#xff1f;SystemServer是什么&#xff1f;有什么用&#xff0c;与zygote的关系是什么&#xff1f;为什么称为服务端对象&#xff1f;APP、AMS、zygote是三个独立的进程&#xff0c;他们之…...

【P46】JMeter 响应断言(Response Assertion)

文章目录 一、响应断言&#xff08;Response Assertion&#xff09; 参数说明二、准备工作三、测试计划设计3.1、包括3.2、匹配3.3、相等3.4、字符串3.5、字符串3.6、或者 一、响应断言&#xff08;Response Assertion&#xff09; 参数说明 可以对 Jmeter 取样器的响应消息进…...

19-02 基于业务量级的架构技术选型演进

从零开始——单服务应用 单体应用技术选型 &#xff08;GitHub、Gitee…&#xff09;搜索是否有线程的产品用最熟悉的技术&#xff0c;最快的速度上线如果有经费&#xff1a;考虑商业化解决方案 个人小程序怎么做技术选型的 搜索是否有快速搭建下程序的软件技术选型 后端技…...

Server - 高性能的 PyTorch 训练环境配置 (PyTorch3D 和 FairScale)

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://blog.csdn.net/caroline_wendy/article/details/130863537 PyTorch3D 是基于 PyTorch 的 3D 数据深度学习库&#xff0c;提供了高效、模块化和可微分的组件&#xff0c;以简化 3D 深度学…...

小猫踩球-第14届蓝桥杯省赛Scratch中级组真题第2题

[导读]&#xff1a;超平老师的《Scratch蓝桥杯真题解析100讲》已经全部完成&#xff0c;后续会不定期解读蓝桥杯真题&#xff0c;这是Scratch蓝桥杯真题解析第137讲。 小猫踩球&#xff0c;本题是2023年5月7日举行的第14届蓝桥杯省赛Scratch图形化编程中级组真题第2题&#xf…...

嵌入式开发从入门到精通之第二十一节:三轴加速度传感器(BMA250E)

目录 1、工作模式 2、中断支持的模式 2.1 新数据的产生 2.2 任何斜率的变化的监测...

代码随想录算法训练营第三十六天|435. 无重叠区间 763.划分字母区间 56. 合并区间

目录 LeeCode 435. 无重叠区间 LeeCode 763.划分字母区间 LeeCode 56. 合并区间 LeeCode 435. 无重叠区间 435. 无重叠区间 - 力扣&#xff08;LeetCode&#xff09; 思路1&#xff1a;按照右边界排序&#xff0c;从左向右记录非交叉区间的个数。最后用区间总数减去非交叉…...

shell 脚本

Shell概述 shell是一个命令行解释器&#xff0c;它接收应用程序/用户命令&#xff0c;然后调用操作系统内核 脚本入门 脚本格式 脚本以#!/bin/bash开头&#xff08;指定解析器&#xff09; helloworld # 创建脚本 [linuxlocalhost datas]$ cat helloworld.sh #!/bin/bas…...

Linux :: 【基础指令篇 :: 用户管理(补充):(4)】::用户切换

前言&#xff1a;本篇是 Linux 基本操作篇章的内容&#xff01; 笔者使用的环境是基于腾讯云服务器&#xff1a;CentOS 7.6 64bit。 学习集&#xff1a; C 入门到入土&#xff01;&#xff01;&#xff01;学习合集Linux 从命令到网络再到内核&#xff01;学习合集 目录索引&am…...

打印机无法扫描的原因及解决方法

在家庭和办公环境中&#xff0c;打印机已成为不可或缺的设备。它不仅可以打印文件&#xff0c;还可以扫描文档并将它们转换为数字数据。但有时&#xff0c;打印机可能无法扫描文档或图片。以下是可能导致这些问题的原因和解决方法。 出现打印机无法扫描的原因&#xff1a; 1.…...

【Mysql】 数据类型

文章目录 【Mysql】 数据类型数据类型分类数值类型1. tinyint类型2. bit类型3. 小数类型 字符串类型1.char2.varchar3. 日期和时间类型4. enum 和 set 【Mysql】 数据类型 mysql中数据类型的作用&#xff1a; 约束操作者的行为更清晰的代码逻辑不同的功用 – 例如&#xff0c…...

mysql中如何使用乐观锁和悲观锁

MySQL中可以使用SELECT ... FOR UPDATE语句来实现悲观锁。这个语句会在查询时锁定被查询的行&#xff0c;在事务结束前都不会释放锁。 例如&#xff0c;我们可以使用以下的 SQL 语句来锁定一个特定的行&#xff1a; BEGIN; SELECT * FROM table WHERE id 1 FOR UPDATE; ... C…...

Logstash技术栈总结

Logstash 是一个可以传输和处理你的日志、事务或其他数据的功能强大的工具&#xff0c;可与各种部署集成。 它提供了大量插件&#xff0c;可帮助你解析&#xff0c;丰富&#xff0c;转换和缓冲来自各种来源的数据。 工作原理 Logstash 事件处理有三个阶段&#xff1a;inputs …...

解决:在单项目组件里面引入 base.scss/ base.less 等的外部文件不成功的问题

1、问题展示&#xff1a; 其一、问题描述&#xff1a; 在单文件组件里面使用封装在 base.scss 或 base.less 里面的样式用法一直不成功&#xff1b; 其二、代码&#xff1a; // 虽然已经标明了用的是 scss 的语法&#xff0c;但是页面调用 .scss 里的 style 样式还是不成功&a…...

论文分享 | WSBERT:Weighted Sampling for Masked Language Modeling

本次分享阿里巴巴达摩院语音实验室、新南威尔士大学与香港科技大学&#xff08;广州&#xff09;等在ICASSP2023会议发表的论文《Weighted Sampling for Masked Language Modeling》。该论文主要提出了两种简单有效的加权采样策略&#xff0c;来缓解掩码语言模型&#xff08;ML…...

java 在线音乐网站系统Myeclipse开发mysql数据库struts2结构java编程计算机网页项目

一、源码特点 java 在线音乐网站系统 是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助struts2开发技术&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mys…...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

解决:Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

阿里云Ubuntu 22.04 64位搭建Flask流程(亲测)

cd /home 进入home盘 安装虚拟环境&#xff1a; 1、安装virtualenv pip install virtualenv 2.创建新的虚拟环境&#xff1a; virtualenv myenv 3、激活虚拟环境&#xff08;激活环境可以在当前环境下安装包&#xff09; source myenv/bin/activate 此时&#xff0c;终端…...

Copilot for Xcode (iOS的 AI辅助编程)

Copilot for Xcode 简介Copilot下载与安装 体验环境要求下载最新的安装包安装登录系统权限设置 AI辅助编程生成注释代码补全简单需求代码生成辅助编程行间代码生成注释联想 代码生成 总结 简介 尝试使用了Copilot&#xff0c;它能根据上下文补全代码&#xff0c;快速生成常用…...