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

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

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


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交流哦~~

相关文章
|
5天前
|
Java 开发者
Java面试题:请解释内存泄漏的原因,并说明如何使用Thread类和ExecutorService实现多线程编程,请解释CountDownLatch和CyclicBarrier在并发编程中的用途和区别
Java面试题:请解释内存泄漏的原因,并说明如何使用Thread类和ExecutorService实现多线程编程,请解释CountDownLatch和CyclicBarrier在并发编程中的用途和区别
10 0
|
4天前
|
存储 Java 程序员
Java面试题:请解释Java中的永久代(PermGen)和元空间(Metaspace)的区别
Java面试题:请解释Java中的永久代(PermGen)和元空间(Metaspace)的区别
32 11
|
1天前
|
Android开发
Android面试题之View的invalidate方法和postInvalidate方法有什么区别
本文探讨了Android自定义View中`invalidate()`和`postInvalidate()`的区别。`invalidate()`在UI线程中刷新View,而`postInvalidate()`用于非UI线程,通过消息机制切换到UI线程执行`invalidate()`。源码分析显示,`postInvalidate()`最终调用`ViewRootImpl`的`dispatchInvalidateDelayed`,通过Handler发送消息到UI线程执行刷新。
11 1
|
3天前
|
缓存 前端开发 JavaScript
高级前端常见的面试题?
【7月更文挑战第11天】 **高级前端面试聚焦候选人的技术深度、项目实战、问题解决及技术趋势洞察。涉及React/Vue生命周期、Redux/Vuex状态管理、Webpack优化、HTTP/HTTPS安全、性能提升策略、PWA、GraphQL、WebAssembly、安全性议题及项目管理。通过回答,展现候选人技术广度与应对复杂场景的能力。**
11 1
|
4天前
|
存储 安全 Java
Java面试题:在JVM中,堆和栈有什么区别?请详细解释说明,要深入到底层知识
Java面试题:在JVM中,堆和栈有什么区别?请详细解释说明,要深入到底层知识
16 3
|
4天前
|
移动开发 前端开发 JavaScript
前端常见的面试题都有那些?
【7月更文挑战第10天】 前端面试涵盖HTML5新特性、CSS盒模型、JS事件传播、Vue的双向绑定、React生命周期、性能优化策略、浏览器解析流程及安全知识等。例如,HTML5新增video/audio元素、CSS选择器优先级计算、闭包功能、async/await处理异步、Vue通过Object.defineProperty实现数据绑定、React组件生命周期的关键阶段、前端优化如CDN和资源压缩,以及浏览器如何构建渲染树。面试还可能涉及XSS/CSRF防护和框架选择考量。准备面试需全面理解基础概念并结合实践经验。
8 0
|
5天前
|
Java 编译器 程序员
Java面试题:解释Java中的异常处理机制,包括checked异常和unchecked异常的区别。
Java面试题:解释Java中的异常处理机制,包括checked异常和unchecked异常的区别。
10 0
|
5天前
|
监控 网络协议 Java
Java面试题:解释Java NIO与BIO的区别,以及NIO的优势和应用场景。如何在高并发应用中实现NIO?
Java面试题:解释Java NIO与BIO的区别,以及NIO的优势和应用场景。如何在高并发应用中实现NIO?
11 0
|
5天前
|
网络协议 Java
Java面试题:什么是Java中的接口?与抽象类有什么区别?
Java面试题:什么是Java中的接口?与抽象类有什么区别?
8 0
|
5天前
|
存储 安全 Java
Java面试题:请解释Java内存模型,并说明如何在多线程环境下使用synchronized关键字实现同步,阐述ConcurrentHashMap与HashMap的区别,以及它如何在并发环境中提高性能
Java面试题:请解释Java内存模型,并说明如何在多线程环境下使用synchronized关键字实现同步,阐述ConcurrentHashMap与HashMap的区别,以及它如何在并发环境中提高性能
9 0