面試篇---1 如何區分深拷貝與淺拷貝

jsdt 發布于2019-08-23 15:06 / 2486人閱讀

摘要：引用數據類型名存在棧內存中，值存在于堆內存中，但是棧內存會提供一個引用的地址指向堆內存中的值，我們以上面淺拷貝的例子畫個圖當進行拷貝時，其實復制的是的引用地址，而并非堆里面的值。

如何區分深拷貝與淺拷貝？

簡單來說，就是假設B復制了A，當修改A時，看B是否會發生變化，如果B也跟著變了，說明這是淺拷貝，拿人手短，如果B沒變，那就是深拷貝，自食其力。

淺拷貝例子：

 var a=[0,1,2,3,4],
       b=a;
    console.log(a===b);
    a[0]=1;
    console.log(a,b);

嗯？明明b復制了a，為啥修改數組a，數組b也跟著變了，這里我不禁陷入了沉思。

那么這里，就得引入基本數據類型與引用數據類型的概念了。

面試常問，基本數據類型有哪些，number,string,boolean,null,undefined五類。

引用數據類型(Object類)有常規名值對的無序對象{a:1}，數組[1,2,3]，以及函數等。

而這兩類數據存儲分別是這樣的：
a.基本類型--名和值存儲在棧內存中，例如let a=1;

當你b=a復制時，棧內存會新開辟一個內存，例如這樣：

所以當你此時修改a=2，對b并不會造成影響，因為此時的b已自食其力，翅膀硬了，不受a的影響了。雖然b不受a影響，但這也算不上深拷貝，因為深拷貝本身只針對較為復雜的object類型數據。

b.引用數據類型--名存在棧內存中，值存在于堆內存中，但是棧內存會提供一個引用的地址指向堆內存中的值，我們以上面淺拷貝的例子畫個圖：

當b=a進行拷貝時，其實復制的是a的引用地址，而并非堆里面的值。

而當我們a[0]=1時進行數組修改時，由于a與b指向的是同一個地址，所以自然b也受了影響，這就是所謂的淺拷貝了。

那，要是在堆內存中也開辟一個新的內存專門為b存放值，就像基本類型那樣，豈不就達到深拷貝的效果了.

那么如何實現深拷貝呢？
1、我們可以借用JSON對象的parse和stringify

function deepClone(obj){
        var _obj = JSON.stringify(obj),
            objClone = JSON.parse(_obj);
        return objClone
    }
    var a=[0,1,[2,3],4],
        b=deepClone(a);
    a[0]=1;
    a[2][0]=1;
    console.log(a,b);

現在b完全不受a的影響了。

2、借用JQ的extend方法。

$.extend( [deep ], target, object1 [, objectN ] )
deep表示是否深拷貝，為true為深拷貝，為false，則為淺拷貝
target Object類型目標對象，其他對象的成員屬性將被附加到該對象上。
object1 objectN可選。 Object類型第一個以及第N個被合并的對象。

let a=[0,1,[2,3],4],
    b=$.extend(true,[],a);
a[0]=1;
a[2][0]=1;
console.log(a,b);

。

其實深拷貝也不僅僅是為了應付面試題， 在實際開發中也是非常有用的。 例如后臺返回了一堆數據，你需要對這堆數據做操作，
但多人開發情況下，你是沒辦法明確這堆數據是否有其它功能也需要使用， 直接修改可能會造成隱性問題，深拷貝能幫你更安全安心的去操作數據，
根據實際情況來使用深拷貝，大概就是這個意思。

原文鏈接https://www.cnblogs.com/echol...

GPU云服務器云服務器深拷貝和淺拷貝深拷貝 javascript深拷貝服務器如何拷貝資料

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101506.html

「前端面試題系列9」淺拷貝與深拷貝的含義、區別及實現（文末有崗位內推哦~）

摘要：深拷貝與淺拷貝的出現，就與這兩個數據類型有關。這時，就需要用淺拷貝來實現了。數據一但過多，就會有遞歸爆棧的風險。這個方法是在解決遞歸爆棧問題的基礎上，加以改進解決循環引用的問題。但如果你并不想保持引用，那就改用用于解決遞歸爆棧即可。前言這是前端面試題系列的第 9 篇，你可能錯過了前面的篇章，可以在這里找到：數組去重(10 種濃縮版) JavaScript 中的事件機制（從原生到...

caige 2019-08-23 16:57 評論0 收藏0
JS 中的深拷貝與淺拷貝

摘要：什么是深拷貝淺拷貝見名知義，無論是深拷貝還是淺拷貝，都是的問題。使用如下以上就是關于中的深拷貝與淺拷貝的知識和如何進行深拷貝的知識了，如果有錯或者有其他方式的話，歡迎在下面留言評論啦前言最近在寫項目的時候涉及到一些父子組件傳遞個對象或者數組通信啥的，或者是直接復制添加對象啥的，直接使用賦值的時候總會出錯。一查原來是淺拷貝的問題，就從網上找了點資料，匯總到這里來了。 1 什么是深拷貝...

ztyzz 2019-08-23 13:41 評論0 收藏0
7.JS之深淺拷貝

摘要：深拷貝與淺拷貝的區別如何區分深拷貝與淺拷貝，簡單點來說，就是假設復制了，當修改時，看是否會發生變化，如果也跟著變了，說明這是淺拷貝，拿人手短，如果沒變，那就是深拷貝，自食其力。 1.深拷貝與淺拷貝的區別如何區分深拷貝與淺拷貝，簡單點來說，就是假設B復制了A，當修改A時，看B是否會發生變化，如果B也跟著變了，說明這是淺拷貝，拿人手短，如果B沒變，那就是深拷貝，自食其力。 2.棧堆、基本...

dailybird 2019-08-23 12:01 評論0 收藏0
JS每日一題：深拷貝與淺拷貝的區別？如何實現一個深拷貝

摘要：期深拷貝與淺拷貝的區別如何實現一個深拷貝在回答這個問題前，我們先來回顧一下中兩大數據類型基本類型引用類型基本類型基本類型就是值類型存放在棧內存中的簡單數據段，數據大小確定，內存空間大小可以分配引用類型引用類型存放在堆內存中的對象，變量實際保 20190311期深拷貝與淺拷貝的區別？如何實現一個深拷貝在回答這個問題前，我們先來回顧一下ＪＳ中兩大數據類型基本類型 Undefined...

MiracleWong 2019-08-26 13:37 評論0 收藏0
js中深拷貝與淺拷貝（堆內存、棧內存的關系）

摘要：而堆內存主要負責像對象這種變量類型的存儲，如下圖引用類型中復制淺拷貝的只是棧內存中的指針，指向同一個堆內存的對象如何實現深拷貝最簡單的方法就是與方法淺拷貝只會在引用類型中出現基本數據類型有哪些，number，string，boolean，null，undefined，symbol以及未來ES10新增的BigInt(任意精度整數)七類。引用數據類型(Object類)有常規名值對的無...

AlienZHOU 2019-08-26 13:45 評論0 收藏0