關于js的淺拷貝與深拷貝

summerpxy 發(fā)布于2019-08-26 13:41 / 914人閱讀

摘要：原文地址淺拷貝和深拷貝只針對像這樣的復雜對象的簡單來說，淺拷貝只拷貝一層對象的屬性，而深拷貝則遞歸拷貝了所有層級。淺拷貝通過來實現(xiàn)淺拷貝。

原文地址：http://www.silenceboy.com/201...

淺拷貝和深拷貝只針對像Object, Array這樣的復雜對象的.簡單來說，淺拷貝只拷貝一層對象的屬性，而深拷貝則遞歸拷貝了所有層級。

淺拷貝 通過 Object.assign 來實現(xiàn)淺拷貝。

let a = {
    num: 1
}
let b = Object.assign({}, a)
a.num = 2
console.log(b.num) // 1

通過展開運算符(…)來實現(xiàn)淺拷貝

let a = {
    num: 1
}
let b = {...a}
a.num = 2
console.log(b.num) // 1

通過屬性賦值來實現(xiàn)淺拷貝:

const obj = { a:1, arr: [2,3] };
const shallowObj = shallowCopy(obj);

function shallowCopy(src) {
  var dst = {};
  for (var prop in src) {
    if (src.hasOwnProperty(prop)) {
      dst[prop] = src[prop];
    }
  }
  return dst;
}

該方法體現(xiàn)了淺拷貝的問題．因為淺拷貝只會將對象的各個屬性進行依次拷貝，并不會進行遞歸拷貝，而 JavaScript 存儲對象都是存地址的，所以淺拷貝會導致 obj.arr 和 shallowObj.arr 指向同一塊內存地址．

導致的結果就是：

shallowObj.arr[1] = 5;
obj.arr[1]   // = 5

這種情況就需要用到深拷貝了．

深拷貝 通過JSON序列化實現(xiàn)深拷貝

你不知道的JavaScript(上) 
許多JavaScript框架都提出了自己的解決辦法,但是Javascript應該采用那種方法作為標準吶? 在很長一段時間里,這個問題都沒有明確的答案.對于JSON安全(也就是說可以被序列化為一個JSON字符串并且可以根據(jù)這個字符串解析出一個結構和值完全一樣的對象)的對象來說,有一種巧妙的復制方法:
var newObj = JSON.parse(JSON.stringify(someObj));當然,這種方法需要保證對象是JSON安全的,所以只適用于部分情況.

該方法的局限性:

會忽略 undefined

會忽略 symbol

不能序列化函數(shù)

不能解決循環(huán)引用的對象

遞歸完成深拷貝

function deepCopy(obj){
    //判斷是否是簡單數(shù)據(jù)類型，
    if(typeof obj == "object"){
        //復雜數(shù)據(jù)類型
        var result = obj.constructor == Array ? [] : {};
        for(let i in obj){
            result[i] = typeof obj[i] == "object" ? deepCopy(obj[i]) : obj[i];
        }
    }else {
        //簡單數(shù)據(jù)類型 直接 == 賦值
        var result = obj;
    }
    return result;
}

GPU云服務器云服務器 js拷貝內存數(shù)據(jù)庫后拷貝預拷貝深拷貝和淺拷貝淺拷貝

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

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

JS引用類型數(shù)據(jù)的淺拷貝與深拷貝

摘要：拷貝到，屬性均順利拷貝。大輝小輝，小輝，大輝小輝，小輝，大輝但是，若修改的屬性變?yōu)閷ο蠡驍?shù)組時，那么對象之間就會發(fā)生關聯(lián)。深拷貝不希望對象之間產(chǎn)生關聯(lián)，那么這時候可以用到深拷貝。淺拷貝之前文章提到，在定義一個對象或數(shù)組時，變量存放的往往只是一個地址。當我們對堆內存中的對象復制時，如果屬性是對象或數(shù)組時，這時候我們拷貝的只是一個棧內存的指針。因此b對象在訪問該屬性時，會根據(jù)指針尋找...

MangoGoing 2019-08-21 16:53 評論0 收藏0
JavaScript中的淺拷貝與深拷貝

摘要：所以，深拷貝是對對象以及對象的所有子對象進行拷貝實現(xiàn)方式就是遞歸調用淺拷貝對于深拷貝的對象，改變源對象不會對得到的對象有影響。為什么會有淺拷貝與深拷貝什么是淺拷貝與深拷貝如何實現(xiàn)淺拷貝與深拷貝好了，問題出來了，那么下面就讓我們帶著這幾個問題去探究一下吧！如果文章中有出現(xiàn)紕漏、錯誤之處，還請看到的小伙伴多多指教，先行謝過以下↓ 數(shù)據(jù)類型在開始了解淺拷貝與深拷貝之前，讓我們先...

546669204 2019-08-26 18:27 評論0 收藏0
JavaScript中的淺拷貝與深拷貝

摘要：所以，深拷貝是對對象以及對象的所有子對象進行拷貝實現(xiàn)方式就是遞歸調用淺拷貝對于深拷貝的對象，改變源對象不會對得到的對象有影響。上一篇 JavaScript中的繼承前言文章開始之前，讓我們先思考一下這幾個問題：為什么會有淺拷貝與深拷貝什么是淺拷貝與深拷貝如何實現(xiàn)淺拷貝與深拷貝好了，問題出來了，那么下面就讓我們帶著這幾個問題去探究一下吧！如果文章中有出現(xiàn)紕漏、錯誤之處...

AZmake 2019-08-23 17:08 評論0 收藏0
關于JavaScript的淺拷貝和深拷貝

摘要：引用類型值引用類型值是保存在堆內存中的對象，變量保存的只是指向該內存的地址，在復制引用類型值的時候，其實只復制了指向該內存的地址。前言要理解 JavaScript中淺拷貝和深拷貝的區(qū)別，首先要明白JavaScript的數(shù)據(jù)類型。JavaScript有兩種數(shù)據(jù)類型，基礎數(shù)據(jù)類型和引用數(shù)據(jù)類型。js的基本類型：undefined，null，string，boolean，number,s...

shenhualong 2019-08-26 12:23 評論0 收藏0
淺談JavaScript的淺拷貝與深拷貝

摘要：引用數(shù)據(jù)類型是存放在堆內存中的，變量實際上是一個存放在棧內存的指針，這個指針指向堆內存中的地址。棧和堆的區(qū)別其實淺拷貝和深拷貝的主要區(qū)別就是數(shù)據(jù)在內存中的存儲類型不同。這里，對存在子對象的對象進行拷貝的時候，就是深拷貝了。數(shù)據(jù)類型在開始拷貝之前，我們從JavaScript的數(shù)據(jù)類型和內存存放地址講起。數(shù)據(jù)類型分為基本數(shù)據(jù)類型和引用數(shù)據(jù)類型基本數(shù)據(jù)類型主要包括undefin...

娣辯孩 2019-08-23 13:44 評論0 收藏0