腳本之家服務器常用軟件

快捷導航

js中的深淺拷貝問題簡析

更新時間：2019年05月10日 11:33:32 作者：見面那天有

這篇文章主要給大家介紹了關于js中的深淺拷貝問題的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用js具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧

前言

在開發(fā)過程中，偶爾會遇到這種場景，拿到一個數(shù)據(jù)后，你打算對它進行處理，但是你又希望拷貝一份副本出來，方便數(shù)據(jù)對比和以后恢復數(shù)據(jù)。

那么這就涉及到了 JS 中對數(shù)據(jù)的深淺拷貝問題，所謂深淺拷貝，淺拷貝的意思就是，你只是復制了對象數(shù)據(jù)的引用，并沒有把內(nèi)存里的值另外復制一份，那么深拷貝就是把值完整地復制一份新的值。

下面這篇文章就對js中的深淺拷貝進行了深入的講解，下面話不多說了，來一起看看詳細的介紹吧

問題描述：

因為在JavaScript中對象在賦值中存儲的是對象的地址（指針），所以會造成對象類型在復制過程中只復制對象的地址，從而導致以下問題

 var people = {
 name: "小明"
 }
var peoplea = people;
peoplea.name = "小白";
console.log(peoplea.name)//小白
console.log(people.name)//小白

我們本來期望只改變peoplea的name，現(xiàn)在連people的name都改變了。根據(jù)情況的不同，可使用深拷貝或淺拷貝來解決。

解決方法：

我們在實現(xiàn)深淺拷貝之前，我們先看一看深、淺拷貝、賦值這三種的區(qū)別：

1、賦值

改變新對象時不管第幾層，老對象都會隨著變化。

 var people = {
 name: "小明",
 act: ["吃飯","睡覺"]
}
var people1 = people;//賦值
people1.name = "小紅";
 people1.act[1] = "打游戲";
console.log(people.name);//小紅
console.log(people.act);//["吃飯", "打游戲"]

2、淺拷貝

改變新對象第一層基本數(shù)據(jù)類型時，老對象不變。有子對象時，改變子對象，老對象會隨著變化。

 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);// ["吃飯", "睡覺"]

總結一下就是：

	第一層為基本數(shù)據(jù)類型	多于一層含有子對象
賦值	新老一起改變	新老一起改變
淺拷貝	新對象改變，老對象不變	新老一起改變
深拷貝	新對象改變，老對象不變	新對象改變，老對象不變

了解完了區(qū)別，下面介紹實現(xiàn)深淺拷貝的幾個方法。

一、淺拷貝

1、Object.assign（）

官方對這個函數(shù)的介紹是：Object.assign() 方法用于將所有可枚舉屬性的值從一個或多個源對象復制到目標對象。實際上就是會把屬性中的簡單數(shù)據(jù)類型直接復制，而對于對象屬性，只會拷貝地址（指針）,上邊介紹區(qū)別時用的就是這個；

var people1 = Object.assign({}, people);

需要注意的是，如果對象沒有子對象，Object.assign（）實現(xiàn)的就是深拷貝。

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))

上邊介紹區(qū)別時用的就是這個：

var people1 = JSON.parse(JSON.stringify(people));//深拷貝

這個方法比較簡便但也存在問題

1、不能復制對象中的函數(shù)。

2、會忽略對象中的undefind。

2、lodash函數(shù)

官方介紹是：lodash是一個一致性、模塊化、高性能的 JavaScript 實用工具庫。官網(wǎng)是
www.lodashjs.com/ ，我推薦用其中的_.cloneDeep(value)方法。

ar objects = [{ "a": 1 }, { "b": 2 }];
 
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

還有自己去寫一個遞歸，但是需要考慮的東西較多，不再贅述，也有用jq的$.extend（）方法實現(xiàn)的，但是性能不好，這里提一下。

總結

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

js中的深淺拷貝問題簡析

相關文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具