前端隨心記---------深拷貝與淺拷貝

時間 2020-07-21

標籤前端隨心拷貝简体版

原文原文鏈接

深拷貝與淺拷貝

　　在前端js裏面的數據類型分爲兩大類：

1.基本數據類型（數據傳遞：值拷貝）前端

var a = 12; var b = a; // 賦值操做，是把 a 地址裏面對應的值賦值給了 變量b 所對應的地址空間。
 b = 24; a; // 不會受到影響 數據傳遞：值拷貝

2.複合數據類型（引用數據類型）react

var obj = {id: 1, username: 'andy', todos: ['吃飯', '睡覺']}; // 複合數據類型
 
var xiaoming = obj; // 複合數據類型，地址的拷貝，如今 xiaoming 變量 和 obj 變量，同一個地址空間 // 好處：節省內存空間。 // 弊端：數據之間彼此受到影響。（存在在風險）
 xiaoming.username = 'xiaoming'; // xiaoming 變量
console.log(xiaoming); // xiaoming

// 隱患
console.log(obj.username); // xiaoming

針對這種問題，咱們把上面的這種現象叫作：淺拷貝。若是要解決這種問題，咱們須要使用深拷貝進行實現：把複合數據類型（對象），將對象的key和value換成基本數據類型複製拷貝。git

var tmp = {}; function copy( source ){ for(var attr in source ){ if( typeof  source[attr] === 'object' || typeof  source[attr] === 'array'){ copy(source[attr]); }else{ // 基本的數據類型的拷貝
             tmp[attr] = source[attr]; } } }

根據案例，遞歸代碼（深拷貝：值拷貝），程序複雜很差理解，很差書寫，而且存在性能問題，函數的使用，都須要開啓內存空間，所以，減小遞歸的使用。es6

var obj = {id: 1, username: 'andy', todos: ['吃飯', '睡覺']} var xiaoming = JSON.parse( JSON.stringify(obj) );    先把對象轉化成字符串，在轉化成Javascript對象

　　以上雖然實現深拷貝，而且性能較好，可是存在一個問題：這種不能拷貝對象裏面的方法，若是對象裏面出現了方法，在使用JSON.stringify把方法丟失github

　　es6中也存在一種拷貝方式，下例：segmentfault

var obj = {id:1, name: 'andy'}; // Object.assgin 把多個參數進行合併，返回一個新的對象
var xiaoming = Object.assign({}, obj); xiaoming.name = 'xiaoming'; console.log(xiaoming.name); //xiaoming
 console.log(obj.name);// andy

可是這種拷貝存在弊端：1.瀏覽器兼容的問題 2.只實現第一層的深拷貝，其餘的都不是深拷貝，只是淺拷貝。例如：api

var obj = {id:1, name: 'andy', todos: ['eat', 'sleep']}; // Object.assgin 把多個參數進行合併，返回一個新的對象 // Object.assgin 只實現一層的拷貝，若是對象的屬性的值仍是一個複合數據類型，完成的地址的引用（帶來隱患）
var xiaoming = Object.assign({}, obj); xiaoming.todos.push('dadoudou'); xiaoming.name = 'xiaoming'; console.log(xiaoming.todos); // [ 'eat', 'sleep', 'dadoudou' ]
 console.log(obj.todos); // 是否受到影響？ 是 [ 'eat', 'sleep', 'dadoudou' ]

如何解決這種深拷貝的問題呢？如何如何解決這種淺拷貝帶來的性能問題和JSON.parse( JSON.stringify(obj) )表明的方法丟失問題？瀏覽器

　　咱們能夠採起第三方的庫來完成深拷貝如： loadsh.js 。 immutable.js 。underscrejs 。數據結構

immutable 簡介

Immutable Data 就是一旦建立，就不能再被更改的數據。對 Immutable 對象的任何修改或添加刪除操做都會返回一個新的 Immutable 對象。Immutable 實現的原理是 Persistent Data Structure（持久化數據結構），也就是使用舊數據建立新數據時，要保證舊數據同時可用且不變。同時爲了不 deepCopy 把全部節點都複製一遍帶來的性能損耗，Immutable 使用了Structural Sharing（結構共享），即若是對象樹中一個節點發生變化，只修改這個節點和受它影響的父節點，其它節點則進行共享。函數

參考資料：

https://www.jianshu.com/p/0fa8c7456c15

https://github.com/immutable-js/immutable-js