当前位置:网站首页 > Vue.js开发 > 正文

js深拷贝和浅拷贝如何实现(js深拷贝和浅拷贝的使用场景)



在这里插入图片描述

在刷题之前先介绍一下牛客。Leetcode有的刷题牛客都有,除此之外牛客里面还有招聘(社招和校招)、一些上岸大厂的大佬的面试经验。 感兴趣的可以去注册试试可以伴随一生的刷题app

刷题页面,功能完善,短时间坚持可看效果。
在这里插入图片描述

查看出现此处,筛选定制,查询指定大厂出现频率
在这里插入图片描述

首页功能强悍,完全免费
在这里插入图片描述

问题 1:
请补全JavaScript代码,要求实现一个对象参数的浅拷贝并返回拷贝之后的新对象。
注意:
1、参数可能包含函数、正则、日期、ES6新对象


 
  

在这里插入图片描述

总结:
🥭🥭1、浅拷贝:主要拷贝的是对象的引用值,当改变对象的值,另一个对象的值也会发生变化。
🥭🥭1、详细步骤:
1)、创建一个空对象。
2)、通过循环把第二个对象中的属性值赋值给第一个对象中。
3)、完成浅拷贝。
🥭🥭2、





 
  

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

简单来说,就是Object.assign()是对象的静态方法,可以用来复制对象的可枚举属性到目标对象,利用这个特性可以实现对象属性的合并。

 
  

一般来说赋值一类是属于深拷贝,但是上面这个有点特殊。上面的中的每一项属性赋值操作的值是通过遍历产生的,所以的值产生变化时,也会产生变化。


在大部分编程语言中,变量会被存放在两个地方,栈(stack)和堆(heap)。在 JavaScript 中栈存放的就是值类型的数据和引用类型的地址,而引用类型真正的数据被存放在堆中。



问题 2:
请补全JavaScript代码,要求实现对象参数的深拷贝并返回拷贝之后的新对象。
注意:
1、 参数对象和参数对象的每个数据项的数据类型范围仅在数组、普通对象({})、基本数据类型中]
2、 无需考虑循环引用问题



 
     

在这里插入图片描述

🥭🥭1、详细步骤
1)如果对象参数的数据类型不为“object”或为“null”,则直接返回该参数
2)根据该参数的数据类型是否为数组创建新对象
3)遍历该对象参数,将每一项递归调用该函数本身的返回值赋给新对象


🥭🥭2、部分代码
1)判断是否为对象,是否为空
2)三元表达式
3)循环、遍历,深拷贝每个属性或者每个数据。
🥭🥭3、除了上面的方法,还有一个捷径,也是通常开发中经常用的。



 
     

问题 3:
请补全JavaScript代码,要求实现对象参数的深拷贝并返回拷贝之后的新对象。
注意:
1、 需要考虑函数、正则、日期、ES6新对象
2、需要考虑循环引用问题



 
       

在这里插入图片描述

总结:
🥭🥭1、简单粗暴,虽然比较耗时。


来看一下大佬的解题方式吧。

根据题目要求,实现对象参数的深拷贝并返回拷贝之后的新对象,因为需要考虑参数对象和参数对象的每个数据项的数据类型可能包括函数、正则、日期、ES6新对象且必须考虑循环引用问题,所以需要引入ES6新对象Map并且详细的判断数据类型,核心步骤有:

 
        
 
        

看完上面的例子你可能还是晕晕的,那么来详细的看看什么是深拷贝,什么是浅拷贝吧。
在这里插入图片描述
js中的基础类型:string,number,boolean,null,undefined,symbol
js中的引用类型:Object



基础类型:是按照值 存放在栈中,占用的内存空间的大小是确定的,并由系统自动分配和自动释放。
引用类型: 是按照地址 存在堆中,将存放在栈内存中的地址赋值给接收的变量。当我们想要访问引用类型的值的时候,需要先从栈中获得对象的地址指针,然后,在通过地址指针找到堆中的所需要的数据。


在这里插入图片描述



主要是将另一个对象的属性值拷贝过来之后,另一个对象的属性值并不受到影响,因为此时它自己在堆中开辟了自己的内存区域,不受外界干扰。
主要拷贝的是对象的引用值,当改变对象的值,另一个对象的值也会发生变化。

常用的深拷贝方法:

 
             


es6新增的方法,可用于对象合并,将源对象的所有可枚举属性,复制到目标对象上。

 
             

当对象中只有一级属性,没有二级属性的时候,此方法为深拷贝,
但是对象中有对象的时候,此方法,在二级属性以后就是浅拷贝






 
             

问题 4:
请补全JavaScript代码,要求通过寄生组合式继承使"Chinese"构造函数继承于"Human"构造函数。要求如下:
1、 给"Human"构造函数的原型上添加"getName"函数,该函数返回调用该函数对象的"name"属性
2、给"Chinese"构造函数的原型上添加"getAge"函数,该函数返回调用该函数对象的"age"属性


 
              

在这里插入图片描述

array_reduce() 函数用回调函数迭代地将数组简化为单一的值。如果指定第三个参数,则该参数将被当成是数组中的第一个值来处理,或者如果数组为空的话就作为最终返回值。

总结:
🥭🥭1、根据题目要求,通过寄生组合式继承使"Chinese"构造函数继承于"Human"构造函数。寄生组合式继承,即通过借用构造函数来继承属性,通过原型链的形式来继承方法,只调用了一次父类构造函数,效率高,也避免了在子类的原型对象上创建不必要的、多余的属性,原型链也不会被改变

🥭🥭2、详细步骤。
~~ 💖💖1)在"Human"构造函数的原型上添加"getName"函数
~~ 💖💖2)在”Chinese“构造函数中通过call函数借助”Human“的构造器来获得通用属性
~~ 💖💖3)Object.create函数返回一个对象,该对象的__proto__属性为对象参数的原型。此时将”Chinese“构造函数的原型和通过Object.create返回的实例对象联系起来
~~ 💖💖4)最后修复"Chinese"构造函数的原型链,即自身的"constructor"属性需要指向自身
~~ 💖💖5)在”Chinese“构造函数的原型上添加”getAge“函数






问题 5:
请补全JavaScript代码,完成"EventEmitter"类实现发布订阅模式。
注意:
1、同一名称事件可能有多个不同的执行函数
2、通过"on"函数添加事件
3、通过"emit"函数触发事件




 
                

在这里插入图片描述

总结
🥭🥭根据题目要求,完成"EventEmitter"类实现发布订阅模式,考虑到同一名称事件可能有多个不同的执行函数,所以在构造函数中需要以对象的结构存放事件,核心步骤有:
构造函数中创建”events“对象变量用于存放所有的事件 添加”on“函数,用于订阅事件。当总事件中不存在此事件时创建新的事件数组,当存在时将”fn“函数添加在该事件对应数组中 添加”emit“函数,用于发布事件,遍历该事件下的函数数组并全部执行



由于我们使用未声明的变量,而意外的创建了一个全局变量,而使这个变量一直留在内存中无法被回收。

当我们设置了setinterval定时器,而忘记取消它,如果循环函数有对外部变量的引用的话,那么这个变量会被一直留在内存中,而无法被回收。

我们获取一个DOM元素的引用,而后面这个元素被删除,由于我们一直保留了对这个元素的引用,所以它也无法被回收。

不合理的使用闭包,从而导致某些变量─直被留在内存当中。



看着是不是感觉手有点痒痒的了。那就来注册下自己试试吧,试试才知道好不好,试试才知道适不适合自己。就算最后没用这款软件那也尝试过,不后悔。
可以伴随一生的编程软件(完全免费),从学校到社会工作,时时刻刻你都可以用到感兴趣的可以去注册试试可以伴随程序员一生的app







觉得有用的可以给个三连,关注一波!!!带你玩转前端

到此这篇js深拷贝和浅拷贝如何实现(js深拷贝和浅拷贝的使用场景)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • vue路由跳转报错(vue的路由跳转了,可是页面没有变化)2025-09-15 19:18:08
  • vue2生命周期都干了什么(vue生命周期详解简书)2025-09-15 19:18:08
  • vue3怎么安装(vue3 安装)2025-09-15 19:18:08
  • vue3怎么安装(vue3怎么安装element)2025-09-15 19:18:08
  • js深拷贝数组对象(js深拷贝json parse)2025-09-15 19:18:08
  • spss17.0是什么(spss11.0是什么)2025-09-15 19:18:08
  • 越狱源地址推荐(13.6越狱源地址)2025-09-15 19:18:08
  • ubuntu镜像源版本不匹配(ubuntu20.04 镜像源)2025-09-15 19:18:08
  • json字符串转map(Json字符串转数组 js)2025-09-15 19:18:08
  • pcie 5.0固态(pcie 5.0固态硬盘)2025-09-15 19:18:08
  • 全屏图片