前言
在開發過程中，偶爾會遇到這種場景，拿到一個數據后，你打算對它進行處理，但是你又希望拷貝一份副本出來，方便數據對比和以后恢復數據。
那么這就涉及到了 JS 中對數據的深淺拷貝問題，所謂深淺拷貝，淺拷貝的意思就是，你只是復制了對象數據的引用，并沒有把內存里的值另外復制一份，那么深拷貝就是把值完整地復制一份新的值。
下面這篇文章就對js中的深淺拷貝進行了深入的講解，下面話不多說了，來一起看看詳細的介紹吧
問題描述：
因為在JavaScript中對象在賦值中存儲的是對象的地址（指針），所以會造成對象類型在復制過程中只復制對象的地址，從而導致以下問題
var people = { name: "小明" }var peoplea = people;peoplea.name = "小白";console.log(peoplea.name)//小白console.log(people.name)//小白我們本來期望只改變peoplea的name，現在連people的name都改變了。根據情況的不同，可使用深拷貝或淺拷貝來解決。
解決方法：
我們在實現深淺拷貝之前，我們先看一看深、淺拷貝、賦值這三種的區別：
1、賦值
改變新對象時不管第幾層，老對象都會隨著變化。
var people = { name: "小明", act: ["吃飯","睡覺"]}var people1 = people;//賦值people1.name = "小紅"; people1.act[1] = "打游戲";console.log(people.name);//小紅console.log(people.act);//["吃飯", "打游戲"]2、淺拷貝
改變新對象第一層基本數據類型時，老對象不變。有子對象時，改變子對象，老對象會隨著變化。
var people = { name: "小明", act: ["吃飯", "睡覺"]}var people1 = Object.assign({}, people);//淺拷貝people1.name = "小紅";people1.act[1] = "打游戲";console.log(people.name);//小明console.log(people.act);// ["吃飯", "打游戲"]3、深拷貝
不管改變新對象第幾層，老對象都不會隨之改變。
var people = { name: "小明", act: ["吃飯", "睡覺"]}var people1 = JSON.parse(JSON.stringify(people));//深拷貝people1.name = "小紅";people1.act[1] = "打游戲";console.log(people.name);//小明console.log(people.act);// ["吃飯", "睡覺"]總結一下就是：
| 第一層為基本數據類型 | 多于一層含有子對象 | |
|---|---|---|
| 賦值 | 新老一起改變 | 新老一起改變 |
| 淺拷貝 | 新對象改變，老對象不變 | 新老一起改變 |
| 深拷貝 | 新對象改變，老對象不變 | 新對象改變，老對象不變 |
了解完了區別，下面介紹實現深淺拷貝的幾個方法。
一、淺拷貝
1、Object.assign（）
官方對這個函數的介紹是：Object.assign() 方法用于將所有可枚舉屬性的值從一個或多個源對象復制到目標對象。實際上就是會把屬性中的簡單數據類型直接復制，而對于對象屬性，只會拷貝地址（指針）,上邊介紹區別時用的就是這個；
var people1 = Object.assign({}, people);需要注意的是，如果對象沒有子對象，Object.assign（）實現的就是深拷貝。
2、展開運算符（ES6新增）
var people = { name: "小明", act: ["吃飯", "睡覺"]}var people1 = {...people};people1.name = "小紅";people1.act[1] = "打游戲";console.log(people.name);//小明console.log(people.act);// ["吃飯", "打游戲"]3、自己寫
var people = { name: "小明", act: ["吃飯", "睡覺"] } var people1 = shallowCopy(people); people1.name = "小紅"; people1.act[1] = "打游戲"; console.log(people.name);//小明 console.log(people.act);// ["吃飯", "打游戲"] function shallowCopy(obj) { var res = {}; for (var index in obj) { if (obj.hasOwnProperty(index)) {//不復制原型鏈上的屬性 res[index] = obj[index]; } } return res; }二、深拷貝
1、JSON.parse(JSON.stringify(obj))
上邊介紹區別時用的就是這個：
var people1 = JSON.parse(JSON.stringify(people));//深拷貝
這個方法比較簡便但也存在問題
1、不能復制對象中的函數。
2、會忽略對象中的undefind。
2、lodash函數
官方介紹是：lodash是一個一致性、模塊化、高性能的 JavaScript 實用工具庫。官網是
www.lodashjs.com/ ，我推薦用其中的_.cloneDeep(value)方法。
ar objects = [{ "a": 1 }, { "b": 2 }]; var deep = _.cloneDeep(objects);console.log(deep[0] === objects[0]);// => false還有自己去寫一個遞歸，但是需要考慮的東西較多，不再贅述，也有用jq的$.extend（）方法實現的，但是性能不好，這里提一下。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對武林網的支持。
新聞熱點
疑難解答
