面试题:说一说深拷贝和浅拷贝?

JavaScript中存在两大数据类型: 基本类型 和 引用类型

基本类型数据保存在在栈内存中
引用类型数据保存在堆内存中,引用数据类型的变量是一个指向堆内存中实际对象的引用,存在栈中

深拷贝和浅拷贝都只针对于引用类型。

一、 浅拷贝:拷贝的是地址。如下就是一个浅拷贝的方法:

1、拓展运算符

在这里插入图片描述

先了解一下Object.assign方法,如下图所示:

在这里插入图片描述

简单对象用Object.assign()方法实现浅拷贝如下:这是es6新增的。

2、Object.assign()

在这里插入图片描述

总结:浅拷贝只拷贝一层简单数据类型(即,简单数据类型只会拷贝值),但是对于更深层次的对象,只会拷贝它的地址。

简单理解:浅拷贝,如果拷贝的是单层对象,就没问题,如果有多层就有问题。

问题1:直接赋值和浅拷贝有什么区别?

答:直接赋值的方法,只要是对象,都会相互影响,因为是直接拷贝对象栈里面的地址。

浅拷贝如果是一层对象,不相互影响,如果出现多层对象拷贝还会相互影响。

问题2:浅拷贝怎么理解?

答:拷贝对象之后,里面的属性值是简单数据类型直接拷贝值。

如果属性值是引用数据类型则拷贝的是地址。

二、深拷贝:拷贝的是对象,不是地址

常见方法:1、通过递归实现深拷贝;2、lodash/cloneDeep;3、通过JSON.stringify()实现

1、递归深拷贝(简易版)

在这里插入图片描述

先理解一下下面这段代码:这个代码只解决了数组的问题,但是没解决对象的问题。

在这里插入图片描述
在这里插入图片描述

再加上下面这段代码,就能解决数组和对象的问题了

在这里插入图片描述

注意:一定要先把数组写在前面,因为数组也属于对象形式,万物皆对象,即:先筛选完数组之后,再筛选对象。

问:做过深拷贝吗?说一下深拷贝是怎么实现的。

答:做过,深拷贝啊做出来对象,新对象不会影响旧对象,要想实现深拷贝,第一啊,深拷贝要用到函数递归,当我们在普通拷贝的时候没问题,直接进行赋值就行了;但是如果遇到数组的,我们再次调用这个递归函数就可以了;如果遇到的是对象形式,那我再次利用递归,把对象解决;但是一定要先递归数组,再递归对象。

2、js库lodash里面cloneDeep内部实现了深拷贝。

官网解释如下:

在这里插入图片描述

代码如下:

在这里插入图片描述

JSON对象的Stringify和Parse来实现深拷贝。要了解弊端

理解:类似于阳澄湖大闸蟹,把其他的螃蟹拿进阳澄湖里涮一涮,再拿出来,就成了阳澄湖大闸蟹,表面看起来一样,其实完全不一样。

在这里插入图片描述

该方法的弊端:

1、obj里面有new Date(),深拷贝后,时间会变成字符串的形式。而不是时间对象;

2、obj里有function,undefined,则序列化的结果会把function或 undefined丢失;

3、obj里有NaN,则序列化的结果会变成null;

4、JSON.stringify()只能序列化对象的可枚举的自有属性,如果obj中的对象是由构造函数生成的实例对象, 深拷贝后,会丢弃对象的constructor;

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

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

相关文章

【2023年11月第四版教材】《第1章-信息化发展之<3 现代化创新发展>》

第1章-信息化发展之<3 现代化创新发展> 3 现代化创新发展3.1 农业现代化3.2 两化融合(17下2)(18下2) (22下12)3.3 智能制造3.4 消费互联网 3 现代化创新发展 3.1 农业现代化 要素具体内容农业…

Cpp7 — 继承和多态

继承 -------- 面向对象的三大特性之一 面向对象的三大特性:封装、继承、多态 封装:把数据和方法都封装在一起,想给你访问的变成共有,不想给访问的,写成私有。 继承:继承是类设计层次的复用 多态&#…

[SQL挖掘机] - 索引

介绍: 当你在数据库中进行查询时,索引是一种用于提高查询性能的重要工具。索引是对表中的一列或多列进行排序的数据结构,它可以快速定位到满足特定条件的记录,从而减少了查询所需的时间和资源。 在数据库中使用索引的主要好处包括&#xff…

【AGI】Copilot AI编程辅助工具安装教程

1. 基础激活教程 GitHub和OpenAI联合为程序员们送上了编程神器——GitHub Copilot。 但是,Copilot目前不提供公开使用,需要注册账号通过审核,我也提交了申请:这里第一期记录下,开启教程,欢迎大佬们来讨论…

通向架构师的道路之apache性能调优

一、总结前一天的学习 在前两天的学习中我们知道、了解并掌握了Web Server结合App Server实现单向Https的这样的一个架构。这个架构是一个非常基础的J2ee工程上线布署时的一种架构。在前两天的教程中,还讲述了Http服务 器、App Server的最基本安全配置(…

java 数组的使用

数组 基本介绍 数组可以存放多个同一类型的数据,数组也是一种数据类型,是引用类型。 即:数组就是一组数据。 数组的使用 1、数组的定义 方法一 -> 单独声明 数据类型[] 数组名 new 数据类型[大小] 说明:int[] a new int…

C/C++算法——散列表

1、散列表介绍 散列表的英文叫Hash Table,我们平时也叫它哈希表或者Hash 表。散列表用的是数组支持按照下标随机访问数据的特性,所以散列表其实就是数组的一种扩展,由数组演化而来。可以说,如果没有数组,就没有散列表。…

【SpringBoot】85、SpringBoot中Boolean类型数据转0/1返回序列化配置

在 SpringBoot 中,前端传参数 0,1,后端可自动解析为 boolean 类型,但后端返回前端 boolean 类型时,却无法自动转换为 0,1,所以我们需要自定义序列化配置,将 boolean 类型转化为 0,1 1、类型对应 boolean 类型有false,true对应的 int 类型0,12、序列化配置 import com.f…

iOS——锁与死锁问题

iOS中的锁 什么是锁锁的分类互斥锁1. synchronized2. NSLock3. pthread 递归锁1. NSRecursiveLock2. pthread 信号量Semaphore1. dispatch_semaphore_t2. pthread 条件锁1. NSCodition2. NSCoditionLock3. POSIX Conditions 分布式锁NSDistributedLock 读写锁1. dispatch_barri…

MySQL优化

目录 一. 优化 SQL 查询语句 1.1. 分析慢查询日志 1.2. 优化 SQL 查询语句的性能 1.2.1 优化查询中的索引 1.2.2 减少表的连接(join) 1.2.3 优化查询语句中的过滤条件 1.2.4 避免使用SELECT * 1.2.5 优化存储过程和函数 1.2.6 使用缓存 二. 优化表结构…

超全整理,Jmeter性能测试-常用Jmeter第三方插件详解(超细)

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 Jmeter作为一个开…

React(4)

1.属性(props)初始 状态state都是组件内部写的,也就是A组件内的state就只能A组件里面用,其他组件复用不了。因此属性props就可以。 比如一个导航栏,首页有,购物车有,我的有,他们三个…

Vue使用QrcodeVue生成二维码并下载

生成二维码 1、安装qrcode.vue组件 npm install --save qrcode.vue<template><div id"app"><qrcode-vue :valuevalue :sizesize></qrcode-vue><br /></div> </template><script> //导入组件 import QrcodeVue fro…

《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(20)-Fiddler精选插件扩展安装让你的Fiddler开挂到你怀疑人生

1.简介 Fiddler本身的功能其实也已经很强大了&#xff0c;但是Fiddler官方还有很多其他扩展插件功能&#xff0c;可以更好地辅助Fiddler去帮助用户去开发、测试和管理项目上的任务。Fiddler已有的功能已经够我们日常工作中使用了&#xff0c;为了更好的扩展Fiddler&#xff0c…

P4780 Phi的反函数

题目 思路 φ(x)n 当指数均为1时n最小 证明&#xff1a;容斥原理 代码 #include<bits/stdc.h> using namespace std; #define int long long const int maxn1e9; int ansINT_MAX,n; bool f; map<int,bool> mp; bool is_prime(int n){if(n<1) return false;fo…

Spring事务创建与使用

目录 前言Spring中事务的实现声明式事务Transactional 作⽤范围Transactional 参数说明对于事务不回滚的解决方案 前言 在数据库中我们提到了 事务, 事务的定义为, 将一系列操作封装成一个整体去调用 , 要么一起成功, 要么一起失败 Spring中事务的实现 在Spring中事务的操作…

发npm包

重点文件 .github -> workflow -> .yml文件 发自己的包 新建dev分支&#xff0c;合并到master后自动执行 fork别人的包 fork -> base dev新建本地rebase-dev分支 -> 提交push后合并至dev -> dev合并至master后自动执行 值得注意的是&#xff0c;fork别人的…

flask 点赞系统

dianzan.html页面 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>点赞系统</title> </head> <body><h2>这是一个点赞系统</h2><table border"1"><…

学会Selenium元素定位

UI自动化测试的本质就是将手工测试的一系列动作转化成机器自动执行&#xff0c;可以简单概括为五大步骤&#xff1a;定位元素 - 操作元素 - 模拟页面动作 - 断言结果 - 生成报告。 所以很多同学在学习时&#xff0c;都是以元素定位作为入门导向&#xff0c;好的开始就是成功的…

【vue】vue-image-lazy图片懒加载使用与介绍【超详细+npm包源代码】

简介 当前插件是基于vue3&#xff0c;写的一个图片懒加载&#xff0c;文章最下方是npm包的源码&#xff0c;你可以自己拿去研究和修改&#xff0c;如有更好的想法可以留言&#xff0c;如果对你有帮助&#xff0c;可以点赞收藏和关注&#xff0c;谢谢。 后续会添加图片放大和切…