javascript實現(xiàn)數(shù)組或對象的深拷貝

Fundebug 發(fā)布于2019-08-23 15:35 / 2178人閱讀

摘要：實現(xiàn)深拷貝有兩種方法第一簡單粗暴可以看出來，改變原數(shù)組，并沒有對新數(shù)組產生影響改變新數(shù)組也沒有對原數(shù)組產生影響第二面試官大多數(shù)會問這種方法判斷是數(shù)組還是對象判斷是值類型還是引用類型引用類型的話進行遞歸操作值類型直接賦值同樣改變原數(shù)組，并沒有

js實現(xiàn)深拷貝有兩種方法

第一（簡單粗暴）：

let arr = [1, {a: 2}];
let copyArr = JSON.parse( JSON.stringify(arr) );
console.log(copyArr )  // [1, {a: 2}]
arr[1].a = 3;
console.log(copyArr )  // [1, {a: 2}]
copyArr[1].a = 5;
console.log(arr)       // [1, {a: 2}]

可以看出來，改變原數(shù)組arr，并沒有對新數(shù)組copyArr產生影響；改變新數(shù)組copyArr也沒有對原數(shù)組arr產生影響；

第二（面試官大多數(shù)會問這種方法）：

let arr = [1, {a: 2}];

function deepCopy(arr) {
    let copyArr = (arr.constructor === Array) ? [] : {}; // 判斷是數(shù)組還是對象
    for(let i in arr) {
        if(typeof arr[i] === "object") {   // 判斷是值類型還是引用類型
            copyArr[i] = deepCopy(arr[i]);  // 引用類型的話進行遞歸操作
        } else {
            copyArr[i] = arr[i];  // 值類型直接賦值
        }
    }
    return copyArr;
}

let copyArr = deepCopy(arr);
console.log(copyArr )  // [1, {a: 2}]
arr[1].a = 3;
console.log(copyArr )  // [1, {a: 2}]
copyArr[1].a = 5;
console.log(arr)       // [1, {a: 2}]

同樣：改變原數(shù)組arr，并沒有對新數(shù)組copyArr產生影響；改變新數(shù)組copyArr也沒有對原數(shù)組arr產生影響；

GPU云服務器云服務器 javascript對象數(shù)組數(shù)組拷貝拷貝數(shù)組 javascript或

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/102288.html

javascript對象的淺拷貝、深拷貝和Object.assign方法淺析

摘要：對象的淺拷貝淺拷貝是對象共用一個內存地址，對象的變化相互影響。這是特別值得注意的地方。和能正確處理的對象只有等能夠被表示的數(shù)據(jù)結構，因此函數(shù)這種不能被表示的類型將不能被正確處理。對象的淺拷貝：淺拷貝是對象共用一個內存地址，對象的變化相互影響。比如常見的賦值引用就是淺拷貝: let srcObj = {name: lilei, age: 20}; let copyObj = srcO...

lixiang 2019-08-22 15:55 評論0 收藏0
低門檻徹底理解JavaScript中的深拷貝和淺拷貝

摘要：案例中的賦值就是典型的淺拷貝，并且深拷貝與淺拷貝的概念只存在于引用類型。修改修改經測試，也只能實現(xiàn)一維對象的深拷貝。經過驗證，我們發(fā)現(xiàn)提供的自有方法并不能徹底解決的深拷貝問題。在說深拷貝與淺拷貝前，我們先看兩個簡單的案例： //案例1 var num1 = 1, num2 = num1; console.log(num1) //1 console.log(num2) //1 num...

wind3110991 2019-08-22 16:02 評論0 收藏0
javascript的深拷貝方法總結（主要針對數(shù)組和對象進行整理）

摘要：回顧一下我們總結的常用的深拷貝完整方案實現(xiàn)一個函數(shù)，可以對中的種主要的數(shù)據(jù)類型包括進行值復制對數(shù)組深拷貝的簡單方法總結循環(huán)實現(xiàn)數(shù)組的深拷貝只適應單層數(shù)組結構方法實現(xiàn)數(shù)組的深拷貝只適應單層數(shù)組結構方法實現(xiàn)數(shù)組的深拷貝只適應單層數(shù)組結構擴展回顧一下我們總結的常用的深拷貝完整方案實現(xiàn)一個函數(shù)clone，可以對JavaScript中的5種主要的數(shù)據(jù)類型（包括Number、String、Ob...

church 2019-08-21 17:47 評論0 收藏0
JS 中的深拷貝與淺拷貝

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

ztyzz 2019-08-23 13:41 評論0 收藏0
javascript的深拷貝VS淺拷貝

摘要：深拷貝淺拷貝本文主要對深拷貝淺拷貝的解釋及實現(xiàn)做一下簡單記錄。之所以會有深拷貝與淺拷貝之分，是因為不同數(shù)據(jù)類型的數(shù)據(jù)在內存中的存儲區(qū)域不一樣。但注意，只能做一層屬性的淺拷貝。深拷貝VS淺拷貝本文主要對深拷貝&淺拷貝的解釋及實現(xiàn)做一下簡單記錄。原文鏈接，歡迎star。之所以會有深拷貝與淺拷貝之分，是因為不同數(shù)據(jù)類型的數(shù)據(jù)在內存中的存儲區(qū)域不一樣。堆和棧是計算機中劃分出來用來存儲的...

Nekron 2019-08-23 15:08 評論0 收藏0