關(guān)于js的淺拷貝與深拷貝

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

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

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

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

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

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

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

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

通過屬性賦值來實(shí)現(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)了淺拷貝的問題．因?yàn)闇\拷貝只會(huì)將對(duì)象的各個(gè)屬性進(jìn)行依次拷貝，并不會(huì)進(jìn)行遞歸拷貝，而 JavaScript 存儲(chǔ)對(duì)象都是存地址的，所以淺拷貝會(huì)導(dǎo)致 obj.arr 和 shallowObj.arr 指向同一塊內(nèi)存地址．

導(dǎo)致的結(jié)果就是：

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

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

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

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

該方法的局限性:

會(huì)忽略 undefined

會(huì)忽略 symbol

不能序列化函數(shù)

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

遞歸完成深拷貝

function deepCopy(obj){
    //判斷是否是簡單數(shù)據(jù)類型，
    if(typeof obj == "object"){
        //復(fù)雜數(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;
}