JavaScript 利用遞迴實現物件深拷貝

2021-09-13 13:03:26 字數 1712 閱讀 9639

先來普及一下深拷貝和淺拷貝的區別

淺拷貝:就是簡單的複製,用等號即可完成

let a = 

let b = a

這就完成了乙個淺拷貝

但是當修改物件b的時候,我們發現物件a的值也被改變了

b.a = 10

console.log(a.a) => 10

這是因為淺拷貝只複製了指向物件的指標,新舊物件共用同一塊記憶體,修改某乙個物件的同時也會把另乙個都一併修改了

深拷貝:跟淺拷貝最簡單明瞭的區別就是修改拷貝的物件,不會改變源物件

利用object.assign可以對只有一層的物件實現深拷貝,如下:

let a = 

let b = object.assign({}, a)

b.b = 100

console.log(a.b) => 2

可以看出來這樣是完全可以做到對只有一層的物件實現深拷貝的

但是如果物件裡面的元素還是物件的話就沒作用了

let a = }

let b = object.assign({}, a)

b.d.a = 100

console.log(a.d.a) => 100

對於這種比較複雜的物件,我們就可以利用遞迴的方式實現真正的物件深拷貝了

function deepclone (sourceobj, targetobj) 

if(!sourceobj || typeof sourceobj !== "object" || sourceobj.length === undefined)

if(sourceobj instanceof array) else )

} else }}

return cloneobj

}

簡單的幾行**就可以輕鬆實現物件的深拷貝

簡單的測試**,如下:

let sourceobj = ,

c: },

d: function() ,

e: [1, 2, 3]

}let targetobj = deepclone(sourceobj, {})

targetobj.c.b.a = 9

console.log(sourceobj) => , c: }, d: [function: d], e: [ 1, 2, 3 ] }

console.log(targetobj) => , c: }, d: [function: d], e: [ 1, 2, 3 ] }

另外介紹兩個用來做深拷貝的庫

**jquery**

使用方法:

let targetobj = $.extent(true,{},sourceobj)

**lodash函式庫**

使用方法:

npm install lodash

**es5寫法**

let lodash = require('lodash')

**es6寫法**

import lodash from 'lodash'

let targetoj = lodash.clonedeep(sourceobj)

各位看官覺得有什麼地方不對的請多多指教。

JS遞迴的用法JavaScript遞迴)

函式中用呼叫函式自己,此時就是遞迴,遞迴一定要有結束條件 function f1 f1 瀏覽器崩潰,因為沒有結束條件 死迴圈 改進如下 var i 0 function f1 console.log 從前有座山,山里有個廟,廟裡有個老和尚給小和尚講故事 f1 遞迴實現 求n個數字的和 n 5 5 4...

JavaScript函式之遞迴

遞迴的本質就是使用函式自身來解決問題的思路。程式呼叫自身的程式設計技巧稱為遞迴 recursion 遞迴做為一種演算法在程式語言中廣泛應用。乙個過程或函式在其定義或說明中有直接或間接呼叫自身的一種方法,它通常把乙個大型複雜的問題層層轉化為乙個與原問題相似的規模較小的問題來求解,遞迴策略只需少量的程式...

JavaScript尾遞迴優化探索

function f function fibonacci n 此函式沒有進行任何的優化,當我們在控制台去執行此函式的時候,fibonacci 40 就已經出現了明顯的響應慢的問題,fibonacci 50 的時候瀏覽器卡死。2.優化function fibonacci n,ac1,ac2 func...