成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

JavaScript的淺拷貝和深拷貝

GeekQiaQia / 2680人閱讀

摘要：但是進(jìn)行的是淺拷貝，拷貝的是屬性值。對(duì)象展開(kāi)符深拷貝的實(shí)現(xiàn)方式手動(dòng)復(fù)制轉(zhuǎn)成再轉(zhuǎn)回來(lái)只有可以轉(zhuǎn)成格式的對(duì)象才可以這樣用，像沒(méi)辦法轉(zhuǎn)成沒(méi)被改到使用方法避免相互引用對(duì)象導(dǎo)致死循環(huán)，如的情況四參考關(guān)于的淺拷貝和深拷貝

一、理解 
淺拷貝只復(fù)制指向某個(gè)對(duì)象的指針，而不復(fù)制對(duì)象本身，新舊對(duì)象還是共享同一塊內(nèi)存。但深拷貝會(huì)另外創(chuàng)造一個(gè)一模一樣的對(duì)象，新對(duì)象跟原對(duì)象不共享內(nèi)存，修改新對(duì)象不會(huì)改到原對(duì)象。
二、淺拷貝與深拷貝

淺拷貝：賦值時(shí)，基本數(shù)據(jù)類(lèi)型按值傳遞，對(duì)象按引用傳遞

var a = 25;
var b = a;
b = 18;
console.log(a);//25
console.log(b);//18
// b的修改并不會(huì)影響到a，因?yàn)樗鼈兪腔绢?lèi)型數(shù)據(jù)
var obj1 = { a: 10, b: 20, c: 30 };
var obj2 = obj1;
obj2.b = 100;
console.log(obj1);
// { a: 10, b: 100, c: 30 } <-- b 被改到了
console.log(obj2);
// { a: 10, b: 100, c: 30 }
// obj2修改了b的值，同時(shí)obj1的b也會(huì)被修改，因?yàn)樗麄兏臼峭粋€(gè)對(duì)象，這就是所謂的淺拷貝

深拷貝：

var obj1 = { a: 10, b: 20, c: 30 };
var obj2 = { a: obj1.a, b: obj1.b, c: obj1.c };
obj2.b = 100;
console.log(obj1);
// { a: 10, b: 20, c: 30 } <-- b 沒(méi)被改到
console.log(obj2);
// { a: 10, b: 100, c: 30 }

三、實(shí)現(xiàn)方式

淺拷貝的實(shí)現(xiàn)方式
（1）直接賦值，就是淺拷貝。對(duì)象直接復(fù)制，則新對(duì)象的改變也會(huì)修改到舊對(duì)象。
（2） Object.assign(target, ...sources)

Object.assign是ES6的新函數(shù)。Object.assign()方法可以把任意多個(gè)的源對(duì)象自身的可枚舉屬性拷貝給目標(biāo)對(duì)象，然后返回目標(biāo)對(duì)象。但是Object.assign()進(jìn)行的是淺拷貝，拷貝的是屬性值。假如源對(duì)象的屬性值是一個(gè)指向?qū)ο蟮囊?，它也只拷貝那個(gè)引用值。
var obj = { a: {a: "hello", b: 21} };
var initalObj = Object.assign({}, obj);

initalObj.a.a = "changed";
console.log(obj.a.a); // "changed"

（3）對(duì)象展開(kāi)符...

var obj = [{index: 1, msg: "one"}, {index: 2, msg: "two"}];
var obj2 = [...obj];

console.log(obj2); //[{index: 1, msg: "one"}, {index: 2, msg: "two"}]

obj2.push({index: 3, msg: "three"});
console.log(obj2); // [{index: 1, msg: "one"}, {index: 2, msg: "two"}, {index: 3, msg: "three"}]
console.log(obj); // [{index: 1, msg: "one"}, {index: 2, msg: "two"}]

obj2[1].msg = "two again";
console.log(obj2); // [{index: 1, msg: "one"}, {index: 2, msg: "two again"}, {index: 3, msg: "three"}]
console.log(obj); // [{index: 1, msg: "one"}, {index: 2, msg: "two again"}]

深拷貝的實(shí)現(xiàn)方式
（1）手動(dòng)復(fù)制

var obj1 = { a: 10, b: 20, c: 30 };
var obj2 = { a: obj1.a, b: obj1.b, c: obj1.c };

（2）轉(zhuǎn)成JSON再轉(zhuǎn)回來(lái)（只有可以轉(zhuǎn)成JSON格式的對(duì)象才可以這樣用，像function沒(méi)辦法轉(zhuǎn)成JSON）

var obj1 = { body: { a: 10 } };
var obj2 = JSON.parse(JSON.stringify(obj1));
obj2.body.a = 20;
console.log(obj1);
// { body: { a: 10 } } <-- 沒(méi)被改到
console.log(obj2);
// { body: { a: 20 } }
console.log(obj1 === obj2);
// false
console.log(obj1.body === obj2.body);
// false

（3）使用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;
}

var str = {};
var obj = { a: {a: "hello", b: 21} };
deepClone(obj, str);

四、參考

【1】關(guān)于JavaScript的淺拷貝和深拷貝

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/100164.html

相關(guān)文章

  • JavaScript中的淺拷貝和深拷貝

    摘要：在中可以通過(guò)添加一個(gè)參數(shù)來(lái)實(shí)現(xiàn)遞歸，調(diào)用就可以實(shí)現(xiàn)一個(gè)深拷貝。利用序列化實(shí)現(xiàn)一個(gè)深拷貝 在JavaScript中，對(duì)于Object和Array這類(lèi)引用類(lèi)型值，當(dāng)從一個(gè)變量向另一個(gè)變量復(fù)制引用類(lèi)型值時(shí)，這個(gè)值的副本其實(shí)是一個(gè)指針，兩個(gè)變量指向同一個(gè)堆對(duì)象，改變其中一個(gè)變量，另一個(gè)也會(huì)受到影響。 這種拷貝分為兩種情況：拷貝引用和拷貝實(shí)例，也就是我們說(shuō)的淺拷貝和深拷貝 淺拷貝（shallow...

    ernest.wang 評(píng)論0 收藏0

  • 關(guān)于JavaScript的淺拷貝和深拷貝

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

    shenhualong 評(píng)論0 收藏0

  • JS中的淺拷貝和深拷貝

    摘要：說(shuō)明外層數(shù)組拷貝的是實(shí)例說(shuō)明元素拷貝是引用深拷貝在堆中重新分配內(nèi)存，并且把源對(duì)象所有屬性都進(jìn)行新建拷貝，拷貝后的對(duì)象與原來(lái)的對(duì)象完全隔離，互不影響。中的方法可以實(shí)現(xiàn)深拷貝，源碼原理也是遞歸使用淺拷貝。 1.淺拷貝 當(dāng)把數(shù)組或?qū)ο蠛?jiǎn)單賦值給其他變量的時(shí)候，實(shí)際上進(jìn)行的是淺拷貝，淺拷貝是拷貝引用，只是將拷貝后的引用指向同一個(gè)對(duì)象實(shí)例，彼此間的操作還會(huì)互相影響。 分為兩種情況：直接拷貝源對(duì)象...

    xeblog 評(píng)論0 收藏0

  • js的淺拷貝和深拷貝和應(yīng)用場(chǎng)景

    摘要：而大多數(shù)實(shí)際項(xiàng)目中，我們想要的結(jié)果是兩個(gè)變量初始值相同互不影響。所以就要使用到拷貝分為深淺兩種深淺拷貝的區(qū)別淺拷貝只復(fù)制一層對(duì)象的屬性，而深拷貝則遞歸復(fù)制了所有層級(jí)。 為什么會(huì)用到淺拷貝和深拷貝 首先來(lái)看一下如下代碼 let a = b = 2 a = 3 console.log(a) console.log(b) let c = d = [1,2,3] let e = f = {a:...

    MartinDai 評(píng)論0 收藏0

  • js的淺拷貝和深拷貝和應(yīng)用場(chǎng)景

    摘要：而大多數(shù)實(shí)際項(xiàng)目中，我們想要的結(jié)果是兩個(gè)變量初始值相同互不影響。所以就要使用到拷貝分為深淺兩種深淺拷貝的區(qū)別淺拷貝只復(fù)制一層對(duì)象的屬性，而深拷貝則遞歸復(fù)制了所有層級(jí)。 為什么會(huì)用到淺拷貝和深拷貝 首先來(lái)看一下如下代碼 let a = b = 2 a = 3 console.log(a) console.log(b) let c = d = [1,2,3] let e = f = {a:...

    nemo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

GeekQiaQia

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<