JavaScript小面试~什么是深拷贝,什么是浅拷贝,深拷贝和浅拷贝的区别,如何实现深拷贝
深拷贝:就是在复制数据或者对象的时候,将其内存中值复制过来。
浅拷贝:就是在复制数据或者对象的时候,是将其引用复制过来。
深拷贝和浅拷贝的区别:深拷贝复制的是被复制数据或者对象的值,复制的数据或对象会在内存中重新分配内存空间,赋值的和被赋值的互不影响;浅拷贝赋值的是被复制数据或者对象的引用,复制的数据或对象通过引用指向被复制数据或者对象引用所指向的值。
实现深拷贝:
不同的数据类型实现深拷贝的方式不同,按照数据类型实现深度拷贝可分为两种:
第一种:基本数据类型实现深拷贝,直接使用赋值运算符就可以实现。
第二种:引用类型实现深拷贝:
引用类型实现深拷贝的核心思想就是需要将引用类型中个个基本数据项逐一拿出进行赋值。
可能不太理解,我们先举例:
<script>
let arr = [1, 2, 3]
let arr2 = arr
arr2[0] = 100
console.log(arr2);
console.log(arr);
</script>
打印以上代码:

打印结果是arr2数组元素的赋值影响到了arr,我们在通过遍历,建arr的数据逐一拿出,放到arr2。
<script>
let arr = [1, 2, 3]
let arr2=[]
for(let i=0,len=arr.length;i<len;i++){
arr2[i]=arr[i]
}
arr2[0]=100
console.log(arr);
console.log(arr2);
</script>
打印结果为:

此时arr2不会影响到arr。为什么呢,因为我们使用的是基本数据类型赋值,就是直接把arr中的一个个基本项赋值给了arr2,而这些基本数据项目是一个个基本数据类型,而不是引用。
再来一段代码:
<script>
let arr = [[1,2], 2, 3]
let arr2=[]
for(let i=0,len=arr.length;i<len;i++){
arr2[i]=arr[i]
}
arr2[0][0]=100
console.log(arr);
console.log(arr2);
</script>
打印结果:

如果不是逐一实现引用类型的基本项进行赋值,两个数组都会相互影响。
又来一段代码:
<script>
let arr = [[1,2], 2, 3]
let arr2=[]
for(let i=0,len=arr.length;i<len;i++){
arr2[i]=arr[i]
}
arr2[0]=100
console.log(arr);
console.log(arr2);
</script>
结果为:

同一方式拷贝,两个数组好像互不影响了,但是,这里是个坑,arr2[0]=100,这里是指将arr数组的[1,2]这个元素的引用替换成100。arr[0]这个元素是一个应用类型,在栈中有个引用,引用和基本数据类型都在栈内存。arr2[0]=100的100是基本数据类型,存贮在栈内存中,顾名思义就是arr2[0]原本的在栈内存中的引用变成了100,才未使得其arr[0]中的对象未能指向其所在的堆内存的[1,2]中。

实现引用类型的深拷贝的核心思想是:需要将其对象每个基本数据类型逐一复制出来。
这个也是实现深拷贝的实现原理。你看了这篇文章,在去看看网上实现深拷贝的方法,是不是这么一回事?
我就只讲原理,不讲实现了,网上一大推。讲了就多了一篇重复博客了
看都看到这了~~~~不点赞一下吗??????
JavaScript小面试~什么是深拷贝,什么是浅拷贝,深拷贝和浅拷贝的区别,如何实现深拷贝的更多相关文章
- 12个非常实用的JavaScript小技巧
在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...
- JavaScript小例子:复选框全选
JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...
- 11个不常被提及的JavaScript小技巧
这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在 ES6中新增的,它类似于数组,但 ...
- JavaScript小实例:拖拽应用(二)
经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看: ...
- javascript小实例,拖拽应用(一)
前面我们将了一下拖拽的基本思想,理论是有了,那实践呢,可以运用到什么地方呢?下面就给大家带来一个用拖拽思想写的一个小实例,供大家参考,大致效果看下图: 就是这样一个简单的一个拖拽条,你可以把它理解为滚 ...
- [转]11个教程中不常被提及的JavaScript小技巧
原文地址: https://www.cnblogs.com/ld1024/p/10723827.html 这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日 ...
- javascript小括号、中括号、大括号学习总结
作为一名编程人员,和括号打交道是必不可少的.你可知道在不同的上下文中,括号的作用是不一样的,今天就让我们简单总结下javascript小括号.中括号.大括号的用法. 总的来说,JavaScript中小 ...
- 11个教程中不常被提及的JavaScript小技巧
这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在ES6中新增的,它类似于数组,但是 ...
- 8 张脑图入门 JavaScript - 基础面试不倒
8 张脑图入门 JavaScript - 基础面试不倒 转载请注明出处 第一:JavaScript 的变量 第二:JavaScript 运算符 第三:JavaScript 数组 第四:JavaScri ...
- JavaScript 小实例 - 表单输入内容检测,对页面的增删改
JavaScript 小实例 - 表单输入内容检测,对页面的增删改 效果体验地址:https://xpwi.github.io/js/JavaScript01/jsForm.html 功能: 1.向页 ...
随机推荐
- Fastapi获取其他第三方回调
flask.django获取第三方回调数据,可以用request.data直接获取全部参数.而很多同学不知道fastapi如何获取回调的全部参数,其实可以通过request.body(). 如: @p ...
- 史上最全shell脚本编程语法上册
1. shell 脚本语言的基本用法 1.1 shell 脚本的用途 将简单的命令组合完成复杂的工作,自动化执行命令,提高工作效率: 减少手工命令的输入,一定程度上避免人为错误: 将软件或应用的安装及 ...
- RocketMQ主从同步原理
一. 主从同步概述 主从同步这个概念相信大家在平时的工作中,多少都会听到.其目的主要是用于做一备份类操作,以及一些读写分离场景.比如我们常用的关系型数据库mysql,就有主从同步功能在. 主从同步,就 ...
- 转 [golang]为什么Response.Body需要被关闭
Body io.ReadCloser The http Client and Transport guarantee that Body is always non-nil, even o ...
- JS+DOM简要笔记
js官方文档: https://www.w3school.com.cn/js/index.asp 简单理解:html是内容,css是控制样式,js是行为. 1,js弱类型特点 JavaScript 是 ...
- block专递参数导致野指针引发crash
一.问题引入 近日开发中引入一个随机crash,Crash堆栈如下: Exception Type: SIGSEGV Exception Codes: SEGV_ACCERR at 0x0000000 ...
- react组件传值(props[只读属性]) 函数组件
组件间传值,在React中是通过只读属性 props 来完成数据传递的. props:接受任意的入参,并返回用于描述页面展示内容的 React 元素. function Cmp1(props) { r ...
- 使用极限网关助力 ES 集群无缝升级、迁移上/下云
在工作中大家可能会遇到以下这些场景: 自建 ES 集群需要平滑迁移到 XX 云: 从 XX 云将 ES 集群迁移到自建机房: ES 集群进行跨版本升级,同时保留回退能力: 这些场景往往都还有个共同的需 ...
- Flashduty 案例分享 - 益丰大药房
Flashduty 作为功能完备的事件OnCall中心,可以接入云上.云下不同监控系统,统一做告警降噪分派.认领升级.排班协同,已经得到众多先进企业的认可.我们采访了一些典型客户代表,了解他们的痛点. ...
- HTML5 在泛在电力物联网的 10 大业务领域 2/3D 可视化应用
过去的 2018 年,我们认为是国内工业互联网可视化的元年,图扑软件作为在工业可视化领域的重度参与者,一线见证了众多 HTML5/Web 化.2D/3D 化的项目在工业界应用落地. 2019 年可以定 ...