深拷貝和淺拷貝實(shí)現(xiàn)方式

淺拷貝實(shí)現(xiàn)

1. for···in只循環(huán)第一層

// 只復(fù)制第一層的淺拷貝
function simpleCopy(obj1) {
   var obj2 = Array.isArray(obj1) ? [] : {};
   for (let i in obj1) {
   obj2[i] = obj1[i];
  }
   return obj2;
}
var obj1 = {
   a: 1,
   b: 2,
   c: {
         d: 3
      }
}
var obj2 = simpleCopy(obj1);
obj2.a = 3;
obj2.c.d = 4;
alert(obj1.a); // 1
alert(obj2.a); // 3
alert(obj1.c.d); // 4
alert(obj2.c.d); // 4

2. Object.assign方法

var obj = {
    a: 1,
    b: 2
}
var obj1 = Object.assign(obj);
obj1.a = 3;
console.log(obj.a) // 3

3.使用擴(kuò)展運(yùn)算符實(shí)現(xiàn)

對(duì)于引用數(shù)據(jù)類型魂毁,擴(kuò)展運(yùn)算符實(shí)現(xiàn)的是淺拷貝玻佩。

4.用=賦值實(shí)現(xiàn)

let arr1=[0,1,2,3,4],
    arr2=arr1;
console.log(arr1===arr2);
arr1[0]=1;
console.log(arr1,arr2);

深拷貝實(shí)現(xiàn)

1.遞歸實(shí)現(xiàn)

function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判斷ojb子元素是否為對(duì)象,如果是席楚,遞歸復(fù)制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是咬崔,簡(jiǎn)單復(fù)制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}   

2. JSON.stringify和JSON.parse實(shí)現(xiàn)

 var   obj1 = {
   a: 1,
    b: {
      c:2
    }
   }

  var obj2 = JSON.stringify(JSON.parse(obj1)),

弊端:
1).如果obj里面有時(shí)間對(duì)象,則JSON.stringify后再JSON.parse的結(jié)果烦秩,時(shí)間將只是字符串的形式垮斯,而不是對(duì)象的形式;
2).如果obj里有RegExp(正則表達(dá)式的縮寫(xiě))、Error對(duì)象只祠,則序列化的結(jié)果將只得到空對(duì)象兜蠕;
3).如果obj里有函數(shù),undefined抛寝,則序列化的結(jié)果會(huì)把函數(shù)或 undefined丟失熊杨;
4).如果obj里有NaN曙旭、Infinity和-Infinity,則序列化的結(jié)果會(huì)變成null

5).JSON.stringify()只能序列化對(duì)象的可枚舉的自有屬性晶府,例如 如果obj中的對(duì)象是有構(gòu)造函數(shù)生成的桂躏, 則使用JSON.parse(JSON.stringify(obj))深拷貝后,會(huì)丟棄對(duì)象的constructor川陆;
6).如果對(duì)象中存在循環(huán)引用的情況也無(wú)法正確實(shí)現(xiàn)深拷貝剂习;

3.通過(guò)jQuery的extend方法實(shí)現(xiàn)深拷貝

var array = [1,2,3,4];
var newArray = $.extend(true,[],array); // true為深拷貝,false為淺拷貝

4.lodash函數(shù)庫(kù)實(shí)現(xiàn)深拷貝

let result = _.cloneDeep(test)

5.Reflect法

// 代理法
function deepClone(obj) {
    if (!isObject(obj)) {
        throw new Error('obj 不是一個(gè)對(duì)象较沪!')
    }

    let isArray = Array.isArray(obj)
    let cloneObj = isArray ? [...obj] : { ...obj }
    Reflect.ownKeys(cloneObj).forEach(key => {
        cloneObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]
    })

    return cloneObj
}

6.Object.assign 进倍,針對(duì)對(duì)象的value是基本類型

如果對(duì)象的value是基本類型的話,也可以用Object.assign來(lái)實(shí)現(xiàn)深拷貝购对,但是要把它賦值給一個(gè)空對(duì)象

var obj = {
    a: 1,
    b: 2
}
var obj1 = Object.assign({}, obj); // obj賦值給一個(gè)空{(diào)}
obj1.a = 3;
console.log(obj.a)猾昆;// 1

7. 用slice實(shí)現(xiàn)對(duì)數(shù)組的深拷貝;用concat實(shí)現(xiàn)對(duì)數(shù)組的深拷貝

8 .使用擴(kuò)展運(yùn)算符實(shí)現(xiàn)(基本數(shù)據(jù)類型的拷貝)

// 當(dāng)value是基本數(shù)據(jù)類型骡苞,比如String垂蜗,Number,Boolean時(shí)解幽,是可以使用拓展運(yùn)算符進(jìn)行深拷貝的
// 當(dāng)value是引用類型的值贴见,比如Object,Array躲株,引用類型進(jìn)行深拷貝也只是拷貝了引用地址片部,所以屬于淺拷貝
var obj= {a: "1", b: "1", c: "2"}
var obj2= { ...obj, a: "5" }

9. 使用var newObj = Object.create(oldObj)

function deepClone(initalObj, finalObj) {    
  var obj = finalObj || {};    
  for (var i in initalObj) {        
    var prop = initalObj[i];        // 避免相互引用對(duì)象導(dǎo)致死循環(huán),如initalObj.a = initalObj的情況
    if(prop === obj) {            
      continue;
    }        
    if (typeof prop === 'object') {
      obj[i] = (prop.constructor === Array) ? [] : Object.create(prop);
    } else {
      obj[i] = prop;
    }
  }    
  return obj;
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末霜定,一起剝皮案震驚了整個(gè)濱河市档悠,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌望浩,老刑警劉巖辖所,帶你破解...
    沈念sama閱讀 206,378評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異磨德,居然都是意外死亡缘回,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門典挑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)酥宴,“玉大人,你說(shuō)我怎么就攤上這事您觉∽竟眩” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,702評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵顾犹,是天一觀的道長(zhǎng)倒庵。 經(jīng)常有香客問(wèn)我褒墨,道長(zhǎng),這世上最難降的妖魔是什么擎宝? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,259評(píng)論 1 279
  • 正文 為了忘掉前任郁妈,我火速辦了婚禮,結(jié)果婚禮上绍申,老公的妹妹穿的比我還像新娘噩咪。我一直安慰自己,他們只是感情好极阅,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,263評(píng)論 5 371
  • 文/花漫 我一把揭開(kāi)白布胃碾。 她就那樣靜靜地躺著,像睡著了一般筋搏。 火紅的嫁衣襯著肌膚如雪仆百。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 49,036評(píng)論 1 285
  • 那天奔脐,我揣著相機(jī)與錄音俄周,去河邊找鬼。 笑死髓迎,一個(gè)胖子當(dāng)著我的面吹牛峦朗,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播排龄,決...
    沈念sama閱讀 38,349評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼波势,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了橄维?” 一聲冷哼從身側(cè)響起尺铣,我...
    開(kāi)封第一講書(shū)人閱讀 36,979評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎挣郭,沒(méi)想到半個(gè)月后迄埃,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,469評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡兑障,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,938評(píng)論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了蕉汪。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片流译。...
    茶點(diǎn)故事閱讀 38,059評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖者疤,靈堂內(nèi)的尸體忽然破棺而出福澡,到底是詐尸還是另有隱情,我是刑警寧澤驹马,帶...
    沈念sama閱讀 33,703評(píng)論 4 323
  • 正文 年R本政府宣布革砸,位于F島的核電站除秀,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏算利。R本人自食惡果不足惜册踩,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,257評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望效拭。 院中可真熱鬧暂吉,春花似錦、人聲如沸缎患。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,262評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)挤渔。三九已至肮街,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間判导,已是汗流浹背低散。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留骡楼,地道東北人熔号。 一個(gè)月前我還...
    沈念sama閱讀 45,501評(píng)論 2 354
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像鸟整,于是被迫代替她去往敵國(guó)和親引镊。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,792評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容