JavaScript實現(xiàn)淺拷貝與深拷貝的方法分析

更新時間：2018年07月05日 08:42:57 作者：king-w

這篇文章主要介紹了JavaScript實現(xiàn)淺拷貝與深拷貝的方法,結合實例形式總結分析了JavaScript淺拷貝與深拷貝的定義與使用方法,需要的朋友可以參考下

本文實例講述了JavaScript實現(xiàn)淺拷貝與深拷貝的方法。分享給大家供大家參考，具體如下：

平時使用數(shù)組復制時，我們大多數(shù)會使用‘='，這只是淺拷貝，存在很多問題。比如

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]

很明顯，淺拷貝下，拷貝和被拷貝的數(shù)組會相互受到影響。所以，必須要有一種不受影響的方法，那就是深拷貝。

深拷貝的實現(xiàn)方式有很多種。

一、for循環(huán)實現(xiàn)深拷貝

//for循環(huán)copy
function 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方法實現(xiàn)深拷貝

//slice實現(xiàn)深拷貝
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實現(xiàn)深拷貝

//concat實現(xiàn)深拷貝
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擴展運算實現(xiàn)深拷貝

//es6擴展運算實現(xiàn)深拷貝
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]

五、對象的循環(huán)深拷貝

//  循環(huán)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實現(xiàn)深拷貝

//轉換成json
let obj3 = JSON.parse(JSON.stringify(obj));
console.log(obj3) //{id: "0", name: "king", sex: "man"}

七、es6擴展運算實現(xiàn)深拷貝

let {...obj4}= obj
console.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的深淺拷貝，可以靈活的運用數(shù)組，并且可以避免很多bug。

更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調(diào)試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章:

JavaScript駕馭網(wǎng)頁－DOM
這篇文章主要介紹了JavaScript駕馭網(wǎng)頁－DOM的相關資料,需要的朋友可以參考下
2016-03-03
js通過元素class名字獲取元素集合的具體實現(xiàn)
獲取元素集合的方法有很多，接下來為大家介紹喜愛使用js通過元素class名字獲取元素集合的方法
2014-01-01
javascript的函數(shù)
javascript的函數(shù)...
2006-09-09
前端如何使用Cesium加載三維模型詳細攻略
三維模型數(shù)據(jù)格式種類多樣,常見的有DAE、OBJ、STL、3DS?MAX、CLM、IFC等數(shù)據(jù)格式,下面這篇文章主要給大家介紹了關于前端如何使用Cesium加載三維模型的相關資料,需要的朋友可以參考下
2024-05-05
javascript禁用Tab鍵腳本實例
這篇文章主要介紹了javascript禁用Tab鍵的腳本實例，很實用，大家參考使用吧
2013-11-11
JavaScript canvas實現(xiàn)雨滴特效
這篇文章主要為大家詳細介紹了JavaScript canvas實現(xiàn)雨滴特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-01-01
js實現(xiàn)身份證號碼驗證的簡單實例
本篇文章主要是對js實現(xiàn)身份證號碼驗證的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02
parseInt parseFloat js字符串轉換數(shù)字
轉換函數(shù)、強制類型轉換、利用js變量弱類型轉換。
2010-08-08
詳解js模板引擎art template數(shù)組渲染的方法
art-template 是一個簡約、超快的模板引擎。這篇文章主要介紹了詳解js模板引擎art template數(shù)組渲染的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10
JavaScript暫停和繼續(xù)定時器的實現(xiàn)方法
這篇文章主要介紹了JavaScript暫停和繼續(xù)定時器的方法的相關資料,非常不錯，需要的朋友可以參考下
2016-07-07