面试常问:深拷贝和浅拷贝

简介: 在了解深拷贝和浅拷贝之前我们先简单了解一下堆和栈的概念。堆的概念:在javaScript中,堆是用来存储地址的。比如引用数据类型的地址就是存储在堆中。栈的概念:栈在javascript中用于存储值的。比如基本数据类型都是直接存在栈内存中的。

一.堆和栈的概念

在了解深拷贝和浅拷贝之前我们先简单了解一下堆和栈的概念。


堆的概念:在javaScript中,堆是用来存储地址的。比如引用数据类型的地址就是存储在堆中。


栈的概念:栈在javascript中用于存储值的。比如基本数据类型都是直接存在栈内存中的。

二.深拷贝和浅拷贝的区别

简单的来说,深拷贝就是拷贝地址,比如一个数组被深拷贝,那么前者变化不会引起后者变化,因为地址变了。但是浅拷贝时就会引起后者跟着前者变。因为地址没变,只是拷贝了值。他们还是指向同一个地址。


三.深拷贝和浅拷贝常用的方法


深拷贝的方法:


1.将对象转化为Json字符串形式,再将其转化为原生js对象。(项目中用的最多的)

let obj1 = {
        name: "zj",
        age: "18",
        sex: "女"
    }
let obj2 = JSON.parse(JSON.stringify(obj1));
// 改变obj1
obj1 = {
     name: "wc",
     age: "18",
     sex: "男"
    }
console.log(obj1, obj2); // obj2未跟着obj1变


ab6c3d7ce7014637afa7ed2598b44ade.png


2.通过递归实现深拷贝。

    let obj1 = {
        name: "zj",
        age: "18",
        sex: "女"
    }
    function copy (obj) {
        // 创建一个空对象用来拷贝之后的内容
        let newObj = {}
        //判断数据是否为 复杂数据类型
        if (typeof obj === 'object') {
            // 是 就将该数据进行 遍历
            for (let k in obj) {
                // 当 obj[k] 的值依然为 复杂数据类型时 重新调用该函数 
                // 将obj[k] 当实参 进行调用 直至 obj[k] 的值不在为 复杂数据类型
                newObj[k] = copy(obj[k])
            }
        } else {
            newObj = obj
        }
        // 将 copy 的对象返回出去(不写 return 会得到 undefined)
        return newObj
    }
    const obj2 = copy(obj1);
    obj1.name = "wang";
    console.log("obj1", obj1);
    console.log("obj2", obj2);

05802ee0c2014404b7337881e3914740.png


3.通过jquery的extend方法实现深拷贝

    let obj1 = {
        name: "zj",
        age: "18",
        sex: "女"
    }
    let obj2 = $.extend(true, {}, obj1); // true为深拷贝,false为浅拷贝
    console.log(obj2);


4.通过函数库lodash的cloneDeep方法实现。


浅拷贝的方法:


1.直接赋值

2.通过es6的扩展运算符

3.jquery的extend方法

4.Object.assign()方法

5.遍历循环等方法

6.还可以通过数组方法,比如:slice、concat等很多。


今天的分享就到这里,下期我们整理数组方法和对象方法,项目中常用的。大家有啥不同意见评论区相互交流学习。

相关文章
|
7月前
|
编译器 C++ Python
【C/C++ 泡沫精选面试题02】深拷贝和浅拷贝之间的区别?
【C/C++ 泡沫精选面试题02】深拷贝和浅拷贝之间的区别?
113 1
|
7月前
|
JSON 前端开发 JavaScript
面试官:请你说下深、浅拷贝并且手写深、浅拷贝,我:你咋知道我只会这个?
面试官:请你说下深、浅拷贝并且手写深、浅拷贝,我:你咋知道我只会这个?
|
7月前
|
JSON 前端开发 JavaScript
【面试题】JavaScript 深拷贝和浅拷贝 高级
【面试题】JavaScript 深拷贝和浅拷贝 高级
|
7月前
|
JSON JavaScript 前端开发
【面试题】马上金九银十了,简历该准备起来了,面试题你准备好了吗 ?浅谈 JS 浅拷贝和深拷贝
【面试题】马上金九银十了,简历该准备起来了,面试题你准备好了吗 ?浅谈 JS 浅拷贝和深拷贝
|
4月前
|
存储 JavaScript 前端开发
JS浅拷贝及面试时手写源码
JS浅拷贝及面试时手写源码
|
7月前
|
JSON 前端开发 JavaScript
【JavaScript】面试手撕深拷贝(2),2024年最新nacos面试题及答案
【JavaScript】面试手撕深拷贝(2),2024年最新nacos面试题及答案
【JavaScript】面试手撕深拷贝(2),2024年最新nacos面试题及答案
|
7月前
|
Java
【JAVA面试题】什么是深拷贝?什么是浅拷贝?
【JAVA面试题】什么是深拷贝?什么是浅拷贝?
|
7月前
|
JSON JavaScript 前端开发
【JavaScript】面试手撕深拷贝(1),面试前必看的一本书书籍是什么
【JavaScript】面试手撕深拷贝(1),面试前必看的一本书书籍是什么
|
7月前
|
存储 JavaScript 前端开发
【JavaScript】面试手撕浅拷贝
引入 浅拷贝和深拷贝应该是面试时非常常见的问题了,为了能将这两者说清楚,于是打算用两篇文章分别解释下深浅拷贝。 PS: 我第一次听到拷贝这个词,有种莫名的熟悉感,感觉跟某个英文很相似,后来发现确实Copy的音译,感觉这翻译还是蛮有意思的
74 6
|
7月前
|
存储 Java Apache
【面试问题】深拷贝和浅拷贝的区别?
【1月更文挑战第27天】【面试问题】深拷贝和浅拷贝的区别?