本文實例講述了JavaScript實現淺拷貝與深拷貝的方法。分享給大家供大家參考，具體如下：
平時使用數組復制時，我們大多數會使用‘='，這只是淺拷貝，存在很多問題。比如
let arr = [1,2,3,4,5];let arr2 = arr;console.log(arr) //[1, 2, 3, 4, 5]console.log(arr2) //[1, 2, 3, 4, 5]arr[0] = 6;console.log(arr) //[6, 2, 3, 4, 5]console.log(arr2) //[6, 2, 3, 4, 5]arr2[4] = 7;console.log(arr) //[6, 2, 3, 4, 7]console.log(arr2) //[6, 2, 3, 4, 7]
很明顯，淺拷貝下，拷貝和被拷貝的數組會相互受到影響。所以，必須要有一種不受影響的方法，那就是深拷貝。
深拷貝的實現方式有很多種。
一、for循環實現深拷貝
//for循環copyfunction copy(arr) { let cArr = [] for(let i = 0; i < arr.length; i++){ cArr.push(arr[i]) } return cArr;}let arr3 = [1,2,3,4];let arr4 = copy(arr3) //[1,2,3,4]console.log(arr4) //[1,2,3,4]arr3[0] = 5;console.log(arr3) //[5,2,3,4]console.log(arr4) //[1,2,3,4]二、slice方法實現深拷貝
//slice實現深拷貝let arr5 = [1,2,3,4];let arr6 = arr5.slice(0);arr5[0] = 5;console.log(arr5); //[5,2,3,4]console.log(arr6); //[1,2,3,4]
三、concat實現深拷貝
//concat實現深拷貝let arr7 = [1,2,3,4];let arr8 = arr7.concat();arr7[0] = 5;console.log(arr7); //[5,2,3,4]console.log(arr8); //[1,2,3,4]
四、es6擴展運算實現深拷貝
//es6擴展運算實現深拷貝let arr9 = [1,2,3,4];let [...arr10] = arr9;arr9[0] = 5;console.log(arr9) //[5,2,3,4]console.log(arr10) //[1,2,3,4]
五、對象的循環深拷貝
// 循環copy對象let obj = { id:'0', name:'king', sex:'man'}let obj2 = copy2(obj)function copy2(obj) { let cObj = {}; for(var key in obj){ cObj[key] = obj[key] } return cObj}console.log(obj) //{id: "0", name: "king", sex: "man"}console.log(obj2) //{id: "0", name: "king", sex: "man"}六、對象轉換成json實現深拷貝
//轉換成jsonlet obj3 = JSON.parse(JSON.stringify(obj));console.log(obj3) //{id: "0", name: "king", sex: "man"}七、es6擴展運算實現深拷貝
let {...obj4}= objconsole.log(obj4) //{id: "0", name: "king", sex: "man"}八、通用深拷貝
var clone = function (v) { var o = v.constructor === Array ? [] : {}; for(var i in v){ o[i] = typeof v[i] === "object" ? clone(v[i]) : v[i]; } return o;}總結：深刻理解javascript的深淺拷貝，可以靈活的運用數組，并且可以避免很多bug。
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
