JS的賦值與深淺拷貝實例
賦值
- 基本類型： 傳值，在棧內(nèi)存中的數(shù)據(jù)發(fā)生數(shù)據(jù)變化的時候鼻吮，系統(tǒng)會自動為新的變量分配一個新的之值在棧內(nèi)存中育苟，兩個變量相互獨立，互不影響的
- 引用類型： 傳址椎木，只改變指針的指向违柏，指向同一個對象博烂，兩個變量相互干擾
//基本數(shù)據(jù)類型賦值
var a = 10;
var b = a;
a++ ;
console.log(a); // 11
console.log(b); // 10
//引用數(shù)據(jù)類型賦值
let a = { name: '11' }
let b = a
b.name = '22'
console.log(a.name) // 22
console.log(b.name) // 22
淺拷貝
- 對于基本類型，淺拷貝是對值的復(fù)制漱竖，拷貝前后對象的基本數(shù)據(jù)類型互不影響
- 對于引用類型來說禽篱，淺拷貝是對對象地址的復(fù)制, 也就是拷貝的結(jié)果是兩個對象指向同一個地址，所以如果其中一個對象改變了這個地址馍惹，就會影響到另一個對象
注意：淺拷貝只復(fù)制一層對象的屬性
實現(xiàn)淺拷貝方法
方法一：Object.assign
**語法：Object.assign(target, ...sources) **<br />ES6中拷貝對象的方法躺率，接受的第一個參數(shù)target是拷貝后的對象，剩下的參數(shù)是要拷貝的對象sources（可以是多個）
例1：
let target = {};
let source = {a:'11',b:{name:'duoduo'}};
Object.assign(target ,source);
console.log(target); // { a: '11', b: { name: 'duoduo' } }
例2：
let target = {};
let source = {a:'11',b:{name:'duoduo'}};
Object.assign(target ,source);
source.a = '22';
source.b.name = 'nana'
console.log(source); // { a: '22', b: { name: 'nana' } }
console.log(target); // { a: '11', b: { name: 'nana' } }
Object.assign注意事項
- 只拷貝源對象的自身屬性（不拷貝繼承屬性）
- 它不會拷貝對象不可枚舉的屬性
-
undefined和null無法轉(zhuǎn)成對象万矾，它們不能作為Object.assign參數(shù)悼吱，但是可以作為源對象 - 屬性名為
Symbol值的屬性，可以被Object.assign拷貝良狈。
<a name="tt1xh"></a>
<br />
<a name="M21mM"></a>
方法二：Array.prototype.slice
實現(xiàn)原數(shù)組的淺拷貝
var a = [ 1, 3, 5, { x: 1 } ];
var b = Array.prototype.slice.call(a);
b[0] = 2;
console.log(a); // [ 1, 3, 5, { x: 1 } ];
console.log(b); // [ 2, 3, 5, { x: 1 } ];
// 從輸出結(jié)果可以看出后添，淺拷貝后，數(shù)組a[0]并不會隨著b[0]改變而改變
// 說明a和b在棧內(nèi)存中引用地址并不相同薪丁。
var a = [ 1, 3, 5, { x: 1 } ];
var b = Array.prototype.slice.call(a);
b[3].x = 2;
console.log(a); // [ 1, 3, 5, { x: 2 } ];
console.log(b); // [ 1, 3, 5, { x: 2 } ];
// 從輸出結(jié)果可以看出遇西，淺拷貝后，數(shù)組中對象的屬性會根據(jù)修改而改變
// 說明淺拷貝的時候拷貝的已存在對象的對象的屬性引用严嗜。
<a name="MeAAK"></a>
<br />
<a name="i7CEU"></a>
方法三：Array.prototype.concat
let array = [{a: 1}, {b: 2}];
let array1 = [{c: 3},{d: 4}];
let array2=array.concat(array1);
array1[0].c=123;
console.log(array2);// [ { a: 1 }, { b: 2 }, { c: 123 }, { d: 4 } ]
console.log(array1);// [ { c: 123 }, { d: 4 } ]
<a name="e9pGO"></a>
<br />
<a name="6nDua"></a>
方法四：...擴展運算符
語法：var cloneObj = { ...obj };
var a = [ 1, 3, 5, { x: 1 } ];
var b = {...a};
b[0] = 2;
console.log(a); // [ 1, 3, 5, { x: 1 } ];
console.log(b); // [ 2, 3, 5, { x: 1 } ];
// 從輸出結(jié)果可以看出粱檀，淺拷貝后，數(shù)組a[0]并不會隨著b[0]改變而改變
// 說明a和b在棧內(nèi)存中引用地址并不相同阻问。
var a = [ 1, 3, 5, { x: 1 } ];
var b = {...a};
b[3].x = 2;
console.log(a); // [ 1, 3, 5, { x: 2 } ];
console.log(b); // [ 1, 3, 5, { x: 2 } ];
// 從輸出結(jié)果可以看出梧税，淺拷貝后，數(shù)組中對象的屬性會根據(jù)修改而改變
// 說明淺拷貝的時候拷貝的已存在對象的對象的屬性引用称近。
<a name="POpRe"></a>
其他方法：
//淺拷貝實現(xiàn)
var obj = { a:1, arr: [2,3] };
var shallowObj = shallowCopy(obj);
function shallowCopy(src) {
var dst = {};
for (var prop in src) {
if (src.hasOwnProperty(prop)) {
dst[prop] = src[prop];
}
}
return dst;
}
shallowObj.arr[1] = 5;
obj.arr[1] // = 5
<br />
<a name="T4oun"></a>
深拷貝
<br />深拷貝開辟一個新的棧第队，兩個對象對應(yīng)兩個不同的地址，修改一個對象的屬性刨秆，不會改變另一個對象的屬性<br /><br />注意：深拷貝對對象中的子對象進行遞歸拷貝凳谦，拷貝前后兩個對象互不影響<br />
<a name="RwkJM"></a>
實現(xiàn)方法:
<a name="njWEd"></a>
方法一：JSON.parse(JSON.stringify())
- JSON.stringify()是前端開發(fā)過程中比較常用的深拷貝方式。
- 原理是把一個對象序列化成為一個JSON字符串衡未，將對象的內(nèi)容轉(zhuǎn)換成字符串的形式再保存在磁盤上尸执，再用JSON.parse()反序列化將JSON字符串變成一個新的對象
let arr = [1, 2, {name: ' duoduo'}];
let newarr = JSON.parse(JSON.stringify(arr));
newarr[2].name = 'nana';
console.log(newarr); // [ 1, 2, { username: 'nana' } ]
console.log(arr); // [ 1, 2, { username: 'duoduo' } ]
JSON.stringify()實現(xiàn)深拷貝注意點
- 拷貝的對象的值中如果有函數(shù),undefined,symbol則經(jīng)過JSON.stringify()序列化后的JSON字符串中這個鍵值對會消失
- 無法拷貝不可枚舉的屬性，無法拷貝對象的原型鏈
- 拷貝Date引用類型會變成字符串
- 拷貝RegExp引用類型會變成空對象
- 對象中含有NaN缓醋、Infinity和-Infinity如失，則序列化的結(jié)果會變成null
- 無法拷貝對象的循環(huán)應(yīng)用(即obj[key] = obj)
方法二：jquery 的 $.extend
var $ = require('jquery');
var obj1 = {
a: 1,
b: { f: { g: 1 } },
c: [1, 2, 3]
};
var obj2 = $.extend(true, {}, obj1);
<a name="gm4ie"></a>
賦值、深拷貝送粱、淺拷貝
淺拷貝和****深****拷貝****區(qū)別<br />淺拷貝只復(fù)制一層對象的屬性褪贵，而深拷貝則遞歸復(fù)制了所有層級<br />
fuzhi.png
<br />
<br />
