js----深淺拷貝
深拷貝和淺拷貝
相關文章:https://juejin.im/post/5ad6b72f6fb9a028d375ecf6
http://www.cnblogs.com/penghuwan/p/7359026.html
https://yanhaijing.com/javascript/2018/10/10/clone-deep/
```
深淺拷貝針對的只是引用型別(array,object,map,set...等等)
```
##### 深淺拷貝的不同:
1.淺拷貝就是簡單的物件屬性的賦值,而不是遞迴複製,js的儲存物件都是存地址的,所以地址沒有改變.
<html>
<!--在這裡插入內容-->
// 值型別的拷貝
var num = 1;
var num2 = num;
num2 = 3;
console.log(num,num2)
//output
1 3
//引用型別的拷貝
var obj = {c:1,d:0};
var obj2 = obj;
obj2.c = 9;
console.log(obj.c,obj2.c)
//output
9 9
//新物件發生改變,老的物件也會隨著變化,就是因為他們指向的是同一個地址
</html>
2.深拷貝就是使用遞迴複製,不僅複製物件的各個屬性,還將物件屬性所包含的物件複製
==(物件是有原型鏈的)==
實現深拷貝的兩種方法:
(1)迭代遞迴法
for ... in (方法) 最常用
Reflect
lodash中的深拷貝
<html>
<!--在這裡插入內容-->
function deepClone(source){
var target = {};
for(var i in source){
if(source.hasOwnProperty(i)) {
if(typeof source[i] === 'object'){
target[i] = deepClone(source[i])
} else {
target[i] = source[i];
}
}
}
return target;
}
var obj = {c:1,d:0};
var obj2 = obj;
obj2.c = 3
console.log(obj.c,obj2.c)
///output
1 3
</html>
(2)序列化反序列化法(用的較多)
<html>
<!--在這裡插入內容-->
function deepCloneTwo(source){
return JSON.parse(JSON.stringify(source)) ///重要
}
var obj = {c:1,d:0};
var obj4 = deepCloneTwo(obj);
obj4.c = 0
console.log(obj.c,obj4.c)
//output
1 0
</html>
深拷貝陣列呢
上述的拷貝操作,對陣列(set,map)一樣可用
<html>
<!--在這裡插入內容-->
var mapType = {}
var arrType = []
var setType = {}
var testType1 = typeof(mapType)
var testType2 = typeof(arrType)
var testType3 = typeof(setType)
console.log(testType1, '引用')
console.log(testType2, '資料')
console.log(testType3, '型別')
//output
object 引用
object 資料
object 型別
</html>
==原因就是:array object set map 的typeof 都是 object==
---
上面所說的是 多層次的拷貝
如果是隻做第一層的拷貝呢:
陣列:
1.直接遍歷
2.slice()
slice() 方法返回一個從已有的陣列中擷取一部分元素片段組成的新陣列（不改變原來的陣列！）
3.concat()
concat() 方法用於連線兩個或多個數組。( 該方法不會改變現有的陣列，而僅僅會返回被連線陣列的一個副本。)
物件:
1.直接遍歷
2.ES6的Object.assign
Object.assign：用於物件的合併，將源物件（source）的所有可列舉屬性，複製到目標物件（target），並返回合併後的target
用法： Object.assign(target, source1, source2); 所以 copyObj = Object.assign({}, obj); 這段程式碼將會把obj中的一級屬性都拷貝到 ｛｝中，然後將其返回賦給copyObj
(以前就接觸過,但是沒有完全瞭解)