前端面试:浅拷贝和深拷贝的区别?

简介: 前端面试:浅拷贝和深拷贝的区别?

那么大家晚上好,我是今天晚上的主讲老师,我是兔哥。


8.png


我们在面试中经常会被问到浅拷贝和深拷贝的区别,正好群里也有在问到这个问题,于是今天就专门写一篇博客来讲解一下哈。


9.jpg


1.浅拷贝


浅拷贝是指,对基本类型的值拷贝,以及对象类型的地址拷贝。


怎么讲,什么是基本类型?


在js中,我们知道的基本类型有字符串,数字,布尔值。


当我们写这样的代码,就是浅拷贝。


var a = 1;
var b = a; //浅拷贝
b = 2;     //改变b的值,并不会影响到a,因为浅拷贝对基本类型而言就是值拷贝
console.log(a);


a还是1,和b没有关系。

这个道理,在对象中也一样适用。JavaScript中还有对象类型(也叫引用数据类型),对象类型的浅拷贝则只是拷贝了地址。


var p1 = {
    name: 'jack'
}
var p2 = p1;
p2.name = 'rose';
console.log(p1);


p2保存的是和p1一模一样的内存地址,就好像你去配了一把钥匙给张三,张三拿着钥匙一样可以去你家把冰箱里的酸奶喝了。


2.深拷贝


深拷贝是指,除了拷贝基本类型的值,还完全复刻了对象类型。

一个对象在内存中是固定存在的,我们如果要对其进行深拷贝,唯一的办法就是创建一个新的对象,里面的值完全复刻原来的对象。

还是刚才例子,我们稍加改造


var p1 = {
    name: 'jack'
}
var p2 = {
    name: p1.name
};
p2.name = 'rose';


这样一来,我们对p2进行改造,就不会影响到p1了。这就是深拷贝。

我们用这种方法实现深拷贝是可以的,但是如果属性太多,就会很繁琐。下面讲讲如何实现深拷贝的通用方法?


3.深拷贝 Object.assign()


Object.assign()是一种可以对非嵌套对象进行深拷贝的方法,如果对象中出现嵌套情况,那么其对被嵌套对象的行为就成了普通的浅拷贝。如果没有嵌套,是可以用这个方法的。


var p1 = {
    name: 'jack'
}
var p2 = {}
Object.assign(p2,p1);


还有一种类似的方法,就是用JSON进行转换


var p1 = {
    name: 'jack',
    age:12
}
var p2 = JSON.parse(JSON.stringify(p1));
p2.name = 'rose';


实际开发中,可能这种方式用的更多一些,比如把一些数据转成json存储到本地缓存,需要用到的时候,我们再反序列化。


4.深拷贝递归


function deepCopy(dest,src){
  var dest = dest || {};
  for(var key in src){
    //如果对象的属性又是对象,则递归处理
    if(typeof src[key] === "object"){ 
        dest[key]= (src[key].constructor === Array)?[]:{}; 
        deepCopy(dest[key],src[key]); 
    }else{
        dest[key]=src[key];  
    }
  }
  return dest;
}


测试:


var p1 = {
    name: 'jack',
    age:12,
    toy: {
        name:'car'
    }
}
var p2 = deepCopy({},p1);


10.png


可以看到,操作p2并不会影响到p1,这就是递归方式的深拷贝。

今天的分享就到这里啦,也欢迎大家来我们的学习qun交流哦~~

相关文章
|
1月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
174 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
4月前
|
监控 前端开发 JavaScript
前端工程化和传统前端开发的区别是什么?
前端工程化相比传统前端开发,在开发模式、代码组织与管理、构建与部署流程、团队协作、性能优化以及技术选型等方面都有了显著的改进和提升,能够更好地应对现代前端应用开发的复杂性和高要求。
|
2月前
|
Java 程序员 调度
Java 高级面试技巧:yield() 与 sleep() 方法的使用场景和区别
本文详细解析了 Java 中 `Thread` 类的 `yield()` 和 `sleep()` 方法,解释了它们的作用、区别及为什么是静态方法。`yield()` 让当前线程释放 CPU 时间片,给其他同等优先级线程运行机会,但不保证暂停;`sleep()` 则让线程进入休眠状态,指定时间后继续执行。两者都是静态方法,因为它们影响线程调度机制而非单一线程行为。这些知识点在面试中常被提及,掌握它们有助于更好地应对多线程编程问题。
84 9
|
2月前
|
安全 Java 程序员
Java面试必问!run() 和 start() 方法到底有啥区别?
在多线程编程中,run和 start方法常常让开发者感到困惑。为什么调用 start 才能启动线程,而直接调用 run只是普通方法调用?这篇文章将通过一个简单的例子,详细解析这两者的区别,帮助你在面试中脱颖而出,理解多线程背后的机制和原理。
77 12
|
2月前
|
编译器 Android开发 开发者
Android经典面试题之Kotlin中Lambda表达式和匿名函数的区别
Lambda表达式和匿名函数都是Kotlin中强大的特性,帮助开发者编写简洁而高效的代码。理解它们的区别和适用场景,有助于选择最合适的方式来解决问题。希望本文的详细讲解和示例能够帮助你在Kotlin开发中更好地运用这些特性。
42 9
|
3月前
|
Java
Java社招面试题:& 和 && 的区别,HR的套路险些让我翻车!
今日分享的主题是如何区分&和&&的区别,提高自身面试的能力。主要分为以下四部分。 1、自我面试经历 2、&amp和&amp&amp的不同之处 3、&对&&的不同用回答逻辑解释 4、彩蛋
|
4月前
|
Java 程序员
Java社招面试题:& 和 && 的区别,HR的套路险些让我翻车!
小米,29岁程序员,分享了一次面试经历,详细解析了Java中&和&&的区别及应用场景,展示了扎实的基础知识和良好的应变能力,最终成功获得Offer。
114 14
|
3月前
|
Java 关系型数据库 数据库
京东面试:聊聊Spring事务?Spring事务的10种失效场景?加入型传播和嵌套型传播有什么区别?
45岁老架构师尼恩分享了Spring事务的核心知识点,包括事务的两种管理方式(编程式和声明式)、@Transactional注解的五大属性(transactionManager、propagation、isolation、timeout、readOnly、rollbackFor)、事务的七种传播行为、事务隔离级别及其与数据库隔离级别的关系,以及Spring事务的10种失效场景。尼恩还强调了面试中如何给出高质量答案,推荐阅读《尼恩Java面试宝典PDF》以提升面试表现。更多技术资料可在公众号【技术自由圈】获取。
|
4月前
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
4月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
101 1

热门文章

最新文章

  • 1
    从前端视角聊聊通义灵码使用经验,如何更好地提升研发效率
  • 2
    VSCode AI提效工具,通义灵码前端开发体验
  • 3
    前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
  • 4
    【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
  • 5
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 6
    课程预告|前端开发者如何用好通义灵码,这份实战指南请查收
  • 7
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
  • 8
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
  • 9
    无前端经验如何快速搭建游戏站:使用 windsurf 从零到上线的详细指南
  • 10
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布