js小拔高系列——寫一個深拷貝

wslongchen 發布于2019-08-23 12:38 / 1282人閱讀

摘要：實現首先可以寫一個殼子函數，包裹一個將要反復遞歸調用自身的函數。如果是引用型，將對應的賦值為遞歸拷貝。另外在中需要使用進行判斷，因為我們只想拷貝自身的屬性。

最近想全職當碼農，面試時候被問到了深拷貝，我噼里啪啦說了一通，感覺很牛逼，問我自己寫過沒有，我說沒有，但是我可以寫。其實我很心虛，估計現場寫會卡殼。。。。。

思路

深拷貝需要迭代拷貝對象的所有屬性，如果屬性是引用型：Object,則繼續遞歸迭代。

實現

首先可以寫一個殼子函數，包裹一個將要反復遞歸調用自身的函數。

function deepCopy(obj) {
    const handleDeepCopy = obj=>{
       const clonedObj = obj instanceof Array? []:{}
      return clonedObj
    }
    return handleDeepCopy(obj)
}

clonedObj就是即將克隆返回的新對象
今后會這么使用它：let newobj = deepCopy(oldobj)
newobj就是經過深拷貝的新對象，這樣在操作newobj的時候就不會對oldobj產生干擾了

接著完善遞歸拷貝邏輯。

用for in迭代數組和對象的屬性。（若不用forin迭代，用foreach代碼會比較多，數組和對象的處理方式會有所不同）

判斷屬性的類型，是否是引用型。

如果是引用型，將clonedObj對應的property賦值為handleDeepCopy（obj[property]）【遞歸拷貝】。

如果不是引用型，直接將clonedObj對應的property賦值為obj[property]。

function deepCopy(obj) {
    const handleDeepCopy = obj=>{
       const clonedObj = obj instanceof Array? []:{}
      // add for in logic here
      for (let keyOrIndex in obj) {
          if(obj[keyOrIndex] instanceof Object) {
              clonedObj[keyOrIndex] = handleDeepCopy(obj[keyOrIndex])
          } else {
              clonedObj[keyOrIndex] = obj[keyOrIndex]
          }
      }
      // for in logic over
      return clonedObj
    }
    return handleDeepCopy(obj)
}

以上邏輯還有疏忽的地方，沒有在開始時判斷傳進的obj究竟是不是一個引用型，如果不是，就應該直接將obj返回。另外在for in中需要使用hasOwnProperty進行判斷，因為我們只想拷貝obj自身的屬性。為了節約篇幅，增加以上邏輯后修改的代碼在：stackblitz

GPU云服務器云服務器 js寫一個乘法 js 寫一個組合算法深拷貝深拷貝和淺拷貝

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

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

js小拔高——寫一個reduce

摘要：緣起最近看油管里面有一個關于面試的視頻，里面提到了可能會讓你寫一寫等函數，于是也來一起小拔高拔高。于是知道我們寫的回調會被調用，并且傳一個進來。其中累加值的初始值是我們傳的，如果我們沒傳，那么累加值的初始值就會是數組的第一個元素。緣起：最近看油管里面有一個關于js面試的視頻，里面提到了可能會讓你寫一寫reduce等函數，于是也來一起小拔高拔高。先寫寫map 首先回憶平時是如何使...

ASCH 2019-08-23 12:39 評論0 收藏0
「讀懂源碼系列4」lodash 是如何實現深拷貝的（下）

摘要：用于檢測自己是否在自己的原型鏈上如果是函數，則取出該函數的原型對象否則，取出對象的原型對象其中，的判斷，是為了確定的類型是對象或數組。相當于，而的構造函數是一個函數對象。 showImg(https://segmentfault.com/img/bVbq2N1?w=640&h=437); 前言接著上一篇文章 lodash 是如何實現深拷貝的（上），今天會繼續解讀 _.cloneDee...

zombieda 2019-08-26 10:11 評論0 收藏0
前端經典文章

摘要：上周末看這篇文章時，偶有靈光，所以，分享出來給大家一起看看前端面試四月二十家前端面試題分享請各位讀者添加一下作者的微信公眾號，以后有新的文章，將在微信公眾號直接推送給各位，非常感謝。前端切圖神器 avocode 有了這個神器，切圖再也腰不酸，腿不疼了。這一次，徹底弄懂 JavaScript 執行機制本文的目的就是要保證你徹底弄懂javascript的執行機制，如果讀完本文還不懂，...

lowett 2019-08-22 13:58 評論0 收藏0
JavaScript系列--淺析JavaScript解析賦值、淺拷貝和深拷貝的區別

摘要：它將返回目標對象。有些文章說是深拷貝，其實這是不正確的。深拷貝相比于淺拷貝速度較慢并且花銷較大?？截惽昂髢蓚€對象互不影響。使用深拷貝的場景完全改變變量之后對沒有任何影響，這就是深拷貝的魔力。一、賦值（Copy）賦值是將某一數值或對象賦給某個變量的過程，分為： 1、基本數據類型：賦值，賦值之后兩個變量互不影響 2、引用數據類型：賦址，兩個變量具有相同的引用，指向同一個對象，相互之間有...

laznrbfe 2019-08-26 13:48 評論0 收藏0
前端數據扁平化與持久化

摘要：與持久化工程師花了年時間打造，與同期出現。有持久化數據結構，如等，并發安全?？偨Y篇幅有限，時間也比較晚了，關于前端數據的扁平化與持久化處理先講這么多了，有興趣的同學可以關注下，后面有時間會多整理分享。 (PS: 時間就像海綿里的水，擠到沒法擠，只能擠擠睡眠時間了~ 知識點還是需要整理的，付出總會有收獲，tired but fulfilled~) 前言最近業務開發，從零搭建網頁生成器，...

dreamtecher 2019-08-23 11:41 評論0 收藏0