JavaScript中深淺拷貝的原理是什么

JavaScript中深淺拷貝的原理是什么，相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

創(chuàng)新互聯(lián)建站是一家專注于網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)與策劃設(shè)計(jì),呼中網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:呼中等地區(qū)。呼中做網(wǎng)站價(jià)格咨詢:18980820575

1、賦值

改變新對(duì)象時(shí)不管第幾層，老對(duì)象都會(huì)隨著變化。

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

2、淺拷貝

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

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

3、深拷貝

不管改變新對(duì)象第幾層，老對(duì)象都不會(huì)隨之改變。

var people = {
  name: "小明",
  act: ["吃飯", "睡覺"]
}
var people1 = JSON.parse(JSON.stringify(people));//深拷貝
people1.name = "小紅";
people1.act[1] = "打游戲";
console.log(people.name);//小明
console.log(people.act);// ["吃飯", "睡覺"]

總結(jié)一下就是：

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

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

一、淺拷貝

1、Object.assign（）

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

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

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

2、展開運(yùn)算符（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)) {//不復(fù)制原型鏈上的屬性
   res[index] = obj[index];
  }
  }
  return res;
 }

二、深拷貝

1、JSON.parse(JSON.stringify(obj))

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

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

這個(gè)方法比較簡(jiǎn)便但也存在問題

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

2、會(huì)忽略對(duì)象中的undefind。

2、lodash函數(shù)

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

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

看完上述內(nèi)容，你們掌握J(rèn)avaScript中深淺拷貝的原理是什么的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

分享文章：JavaScript中深淺拷貝的原理是什么
網(wǎng)站網(wǎng)址：http://muchs.cn/article8/jehoip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、網(wǎng)站設(shè)計(jì)、網(wǎng)站營銷、企業(yè)網(wǎng)站制作、虛擬主機(jī)、網(wǎng)站維護(hù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容